Thumbnails randomly loose grid structure on refresh

natetait · 14th June 12, 07:59 PM

So here's my website: http://nathantaitvaughan.com

I just uploaded the website it to my server last night and I'm having a strange issue. Occasionally, on loading the landing page, or if I refresh the page, the thumbnails will show up 'mis-aligned'. Here is a screenshot of it:

And here's my html:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Selected art + design work of Nathan Tait Vaughan. Official website, all content copyright Nathan Tait Vaughan." />
<meta name="keywords" content="nathan tait vaughan, installation, painting, pentemplation, nate vaughan, nate, art, nathan art, sculpture, nate usd, nate san diego, nate portfolio, nathan vaughan" />
<meta name="author" content="Nathan Tait Vaughan" />
<meta charset="UTF-8" />
<title>Nathan Tait Vaughan</title>



<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="fonts/fontface.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper">

    <div id="title">
    	<a href="index.htm"><img src="imgs/header2.svg" alt="Nathan Tait Vaughan" /></a>
    </div>

    <div id="nav">
        <ul>
            <li><a href="index.htm">WORK</a></li>
            <li><a href="biocv.htm">BIO/CV</a></li>
            <li><a href="tumblr.htm">TUMBLR</a></li>
            <li><a href="links.htm">LINKS</a></li>
        </ul>
    </div>

	<div id="content">
    	<h3>DRAWING/PAINTING/INSTALLATION</h3>
    	<ul id="drawings">
          <li class="thumb"><a href="art/untitledwoodinstallation.htm"><img alt="untitledwoodinstallation" src="imgs/art/thumbnails/_DSC0026thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/earthcactusinstallation.htm"><img alt="earthcactusinstallation" src="imgs/art/thumbnails/_DSC0524thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/untitledorangepaintings.htm"><img alt="untitledorangepainting" src="imgs/art/thumbnails/_DSC0380thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/orangebluewoodpainting.htm"><img alt="orangebluewoodpainting" src="imgs/art/thumbnails/_DSC0615thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/orangebluepainting.htm"><img alt="orangebluepainting" src="imgs/art/thumbnails/_DSC0443thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/cactuspainting.htm"><img alt="cactuspainting" src="imgs/art/thumbnails/_DSC0476thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/canvaspainting.htm"><img alt="canvaspainting" src="imgs/art/thumbnails/_DSC0468thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/untitledredwoodcut.htm"><img alt="untitledredwoodcut" src="imgs/art/thumbnails/_DSC0365thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/paellainstallation.htm"><img alt="paellainstallation" src="imgs/art/thumbnails/_DSC0173thumb.jpg"/></a></li>
          <li class="thumb"><a href="art/termites.htm"><img alt="termites" src="imgs/art/thumbnails/_DSC0578thumb.jpg"/></a></li>
        </ul>
        <br>
        <h3>DESIGN</h3>
        <ul id="design">
            <li class="thumb"><a href="design/cuttoform.htm"><img alt="cuttoform" src="imgs/design/thumbnails/CutToFormShowPosterthumb.jpg"/></a></li>
            <li class="thumb"><a href="design/intothewoods.htm"><img alt="intothewoods" src="imgs/design/thumbnails/intothewoodsposterthumb.jpg"/></a></li>
        </ul>
        
    </div>
    
<div id="footer">
<ul>
    <li><a href="http://twitter.com/#!/natetait">Twitter</a></li>
    <li><a href="http://www.linkedin.com/in/nathanvaughan">LinkedIn</a></li>
    <li><a href="https://www.facebook.com/nathantaitvaughan">Facebook</a></li>
</ul>

<ul>    
    <li><script> 
		<!-- 
		var user = "nate"; 
		var host = "creativecuffs.org"; 
		var link = user + "@" + host; 
		document.write("<a hre" + "f=ma" + "ilto:" + user + "@" + host + ">" + link + "</a>"); 
		//--> 
        </script>
    </li>
</ul>
</div> <!-- End of footer DIV -->

</div>
</body>

And here's my CSS:

Code:

html {
	padding: 0px;
	margin: 0px;
	background-color: #F5F5F5;
	background-image: url(../infiniteborder-01.png);
	background-repeat: repeat-y;
	background-position: center;
}

#wrapper {
	width: 900px;
	/* [disabled]margin-top: -20px; */
	margin-right: auto;
	margin-left: auto;
	min-height: 900px;
	padding-bottom: 100px;
	
}
p, a     {
	font-family: Museo300, Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666;
	text-decoration: none;
	line-height: normal;
}
a:link {
	color: #666;
}
a:hover {
	color: #FF9933;
}


h1, h2, h3, h4 {
	font-family: Museo300, Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333;
	text-decoration: none;
	line-height: normal;
}

strong {
	font-family: Museo300, Verdana, Geneva, sans-serif;
	color: #000;
	font-size: 1em;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
}
#title    {
	margin: 40px 0px 20px 0px;
	/* [disabled]margin-bottom: 10px; */
}
#content {
	padding: 0px;
	list-style-type: none;
	min-height: 600px;
	margin-top: 50px;
	margin-bottom: 0px;
	margin-left: 30px;
}
#content #drawings li{
	display: inline-block;
	height: 130px;
	width: 130px;
	overflow: hidden;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 20px;
	background: #F5F5F5;
}
#content   #design  li  {
	display: inline-block;
	height: 130px;
	width: 130px;
	overflow: hidden;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 20px;
	background: #F5F5F5;
}
#content .thumb   a:link{
	list-style-type: none;
}

#content .thumb a:hover {
	opacity:0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}
#nav ul{
	text-align: center;
	padding: 0px;
	margin-top: 0px;
	margin-right: 50px;
	margin-bottom: 30px;
	margin-left: 0px;
}
#nav ul li {
	display: inline;
}
#nav ul li a {
	background-color: #F5F5F5;
	text-align: right;
	padding-top: 4px;
	padding-right: 7px;
	padding-bottom: 4px;
	padding-left: 40px;
	margin-left: 50px;
	font-family: Museo500, Verdana, Geneva, sans-serif;
	letter-spacing: 0.2em;
	border: 1px solid #333;
}

#nav a:link {
	font-size: 0.8em;
	color: #333333;
}
#nav a:visited {
	color: #666;
}
#nav a:hover {
	color: #FF9933;
}
#nav a:active {
}
#links {
	padding: 0;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 30px;
}
#link li {
	padding: 0;
	margin: 0px;
	list-style-type: none;
}

#wrapper #tumblr h2 {
	margin-top: 50px;
	text-align: center;
}
#biocv {
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	margin-top: 50px;
	margin-bottom: 50px;
	min-height: 700px;
}



#biocv li{
	font-family: Museo300, Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666;
	text-decoration: none;
	list-style-type: none;
	text-align: justify;
	padding: 0px;
	margin-top: 0px;
	margin-right: 40px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#biocv p {
	font-family: Museo300, Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #666;
	text-decoration: none;
	list-style-type: none;
	text-align: justify;
	padding: 0px;
	margin-top: 0px;
	margin-right: 40px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#biocv h3 {
	line-height: normal;
	margin: 0px;
	padding: 0px;
	font-family: Museo500, Verdana, Geneva, sans-serif;
}




#footer {
	/* [disabled]width: 900px; */
	position: fixed;
	bottom: 0px;
	margin-right: auto;
	margin-left: auto;
}
#footer ul {
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width: 900px;
}
#footer li {
	display: inline-block;
	list-style-type: none;
	margin-bottom: 15px;
}
#footer li a:link {
	list-style-type: none;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 20px;
	border: 1px solid #333;
	padding-top: 4px;
	padding-right: 7px;
	padding-bottom: 4px;
	padding-left: 40px;
	background-color: #F5F5F5;
	font-family: Museo500, Verdana, Geneva, sans-serif;
	color: #333;
	font-size: 0.8em;
	letter-spacing: 0.2em;
}
#footer li a:visited {
	list-style-type: none;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 20px;
	border: 1px solid #333;
	padding-top: 4px;
	padding-right: 7px;
	padding-bottom: 4px;
	padding-left: 40px;
	background-color: #F5F5F5;
	font-family: Museo500, Verdana, Geneva, sans-serif;
	color: #333;
	font-size: 0.8em;
	letter-spacing: 0.2em;
}



#footer li a:hover {
	color: #FF9933;
}

#footer li a:active {
	list-style-type: none;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 20px;
	border: 1px solid #333;
	padding-top: 4px;
	padding-right: 7px;
	padding-bottom: 4px;
	padding-left: 40px;
	background-color: #F5F5F5;
	font-family: Museo500, Verdana, Geneva, sans-serif;
	color: #333;
	font-size: 0.8em;
	letter-spacing: 0.2em;
}

Any help is much appreciated!

Oh, and another mystery:
Is there a way to center the footer without giving it's container div a 'width'? The invisible div containing box covers up content even though the elements of the footer div do not. That's a little vague, but if you go to http://nathantaitvaughan.com/art/unt...stallation.htm then click the title of the work (to expand details), the footer will 'cover' the bottom thumbnail, not allowing it to be selected.

meesa · 15th June 12, 12:05 AM

Try clearing your cache.

chrishirst · 15th June 12, 12:06 PM

Quote:

Is there a way to center the footer without giving it's container div a 'width'?

Nope, without a defined width, block elements are as wide as the parent container is.

15th June 12, 12:05 AM	#2
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,138	Re: Thumbnails randomly loose grid structure on refresh Try clearing your cache. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode