Pixelpost

apt · #1 12-09-2007, 03:48 AM

ATTENTION: I've solved the problem. I'm an idiot. I was just missing a closing tag for one of my spans.

I am sure that, like last time I had a problem with my about page (umm... yesterday), I just need a set a new eyes. The page is a very simple 2 column CSS layout. It's looks fine in Firefox with a div stretched out along the top, a large column on the left side for content and a smaller column on the right for links.

I've included below a simplified version of the page and the entire stylesheet. I'm butchering the somethingblue template.

The problem is that in IE 6 and 7, there's about a screen's worth of blank space at the top of the page. I have no idea how to get rid of it. I swear, I have been looking and tweaking this tiny bit of code for HOURS and there's something that I am just not seeing. http://apt131.com/photos/index.php?x=about

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title><SITE_TITLE></title>
<!-- Link for ATOM feed autodiscovery -->
<link rel="service.feed" type="application/x.atom+xml" href="<ATOM_AUTODETECT>" title="<SITE_TITLE>" />
<!-- Link for RSS feed autodiscovery -->
<link rel="alternate" type="application/rss+xml" title="<SITE_TITLE> - RSS feed" href="/index.php?x=rss" />
<!-- Meta-Information -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<meta http-equiv="content-type" name="keywords" content="PhotoBlog,<SITE_TITLE>,<IMAGE_TITLE>,Pixelpost" />
<meta http-equiv="content-type" name="description" content="<SITE_TITLE>-PhotoBlog: <IMAGE_TITLE>, <IMAGE_NOTES_CLEAN>" />
<!-- StyleSheet -->
<link rel="stylesheet" href="./templates/somethingblue/somethingblue.css" type="text/css" />
<script language='javascript' type='text/javascript'>
<!-- BEGIN
function flip(rid)
{
    current=(document.getElementById(rid).style.display == 'none') ? 'block' : 'none';
    document.getElementById(rid).style.display = current;
}
// End -->
</script>
</head>




<div id="aboutwrapper">


<div id="logo" style="width:100%">
<span style="float:left"><a href="index.php">home</a></span>
<span style="float:right"><a href="index.php?x=browse">gallery</a> | <a href="index.php?x=about">info + links</a><br /><br />
</div>



<div id="aboutcontent">
<span class='headline'><SITE_TITLE></span>
<p class="abouttext">
Text text yay text</p>
</div>



<div id="aboutlinks">
<span class='headline'>Links</span><br />

<span class="abouttext">Site Links</span>
<ul>
<li><a href="http://photos.apt131.com/index.php?x=atom">RSS</a></li>
</ul>

The usual links and junk here

</div>


</div>
</body>
</html>

Code:

body {
	background:#211a1a;
	padding:0px;
	text-align:center;
	font-size:10px;
	color:#fffcf4; 
        }
A { color: #FBBFCC; font-family: verdana, arial, helvetica, sans-serif; font-size:12px; text-decoration: none; font-weight:normal; letter-spacing:1px; text-transform:lowercase;} 
A:link { color: #FBBFCC; text-decoration: none;} 
A:visited { color: #FBBFCC; text-decoration: none;} 
A:active { color: #FBBFCC; text-decoration: none;} 
A:hover	{ color: #FBBFCC; text-decoration: none;background-color: #000000;}
.headline {
    font-size:22px;
    font-weight:normal;
    font-family:Georgia, verdana, sans-serif;
    color:#DF1941;
    line-height: 150%;
    letter-spacing:-1px;
    }
.datetime {
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    line-height: 75%;
    letter-spacing:-1px;
    }
.abouttext {
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    line-height: 110%;
    letter-spacing:1px;
    }
.thumbnails {
    padding:5px;
    color: #fffcf4;
    border:0px;
    text-align: center;
    }
.current-thumbnail {
    padding:5px;
    border:1px dotted #FBBFCC;
    }
#wrapper {
    margin:0px auto;
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
    padding-bottom:0px;
    width:600px;
    text-align:center;
    }
#aboutwrapper {
    margin:0px auto;
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
    padding-bottom:0px;
    width:700px;
    text-align:center;
    }
#aboutcontent {
    margin:0px 0px;
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
    padding-bottom:0px;
    width:400px;
    text-align:left;
    float:left;
}
#aboutlinks {
    margin:0px 0px;
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
    padding-bottom:0px;
    width:200px;
    text-align:left;
    float:right;
}

#logo {
    padding:0px;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    letter-spacing:-1px;
    }
#image {
    padding:0px;
    background:#fffcf4;
    border:5px solid #fffcf4;
    }
#imagespacer {
    margin:0px auto;
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
    padding-bottom:0px;
    height:50px;
    text-align:center;
    }
#image-info {
    color: #fffcf4;
    font:12px verdana, arial, helvetica, sans-serif;
    line-height: 100%;
    text-align: justify;
    border-bottom:1px dotted #FBBFCC;
    }
#image-navigation {
    line-height: 100%;
    padding:0px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    letter-spacing:-1px;
    }
#add-comment {
    color: #fffcf4;
    font:12px verdana, arial, helvetica, sans-serif;
    line-height: 170%;
    text-align: justify;
    }
.input {
    width:50%;
    font-size:12px;
    border:1px dotted #FBBFCC;
    background-color:#211A1A;
    color:#FBBFCC;
    }
#comments {
    color: #fffcf4;
    font:12px verdana, arial, helvetica, sans-serif;
    line-height: 170%;
    text-align: justify;
    border-bottom:1px dotted #FBBFCC;
    }
#comments ul {
    list-style-type:none;
    margin:0px;
    padding:10px;
    }
#comments li {
    display:block;
    border:0p8B384Bd #FBBFCC;
    margin:0px;
    color:#fffcf4;
    text-decoration:none;
    padding:3px;
    }
#comments li a {
    color:#FBBFCC;
    text-decoration:none;
    }
#footer {
    text-align:center;
    margin-bottom:20px;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    letter-spacing:-1px;
    }

dhdesign · #2 12-09-2007, 07:05 PM

Glad you were able to get it sorted out.

If it happens again, simply run the page through the W3C validator and it will tell you if there are any coding errors. Could save a lot of aggravation and hours searching for the answer.

Pixelpost

Authentic Photoblog Flavour