PDA

View Full Version : Big white gap in IE 6

dux0r
07-27-2006, 01:54 AM
Hi all,

First off, I'm very new to CSS so bare with me while I try to explain what's going on.

First off my site is http://www.eurotripped.com It looks ugly right now because it's only about a week old and I'm trying to edit a template that I haven't written, so I'm trying to work out what's going on (and not having much luck)

As you can see there's a big white gap between the top of the section and the first post, I think this may have something to do with the Navigation bar on the left hand side.

There's three CSS files. I will include the one that I think is relevant to the question.

/* andreas01 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given to the original author.

Version: 1.3 (Nov 28, 2005)

20060413 - Sebastiaan Brozius -> Changed #avmenu-items to be more specific to the primary links
#avmenu ul --> #avmenu ul#primary-links
#avmenu li --> #avmenu ul#primary-links li
#avmenu li a --> #avmenu ul#primary-links li a
#avmenu li a:hover --> #avmenu ul#primary-links li a:hover

Screen layout: */

body{
margin:0 auto;
padding:0;
background:#000000;
color:#303030; font-style:normal; font-variant:normal; font-weight:normal; font-size:76%; font-family:Verdana, Tahoma, Arial, sans-serif
}

#wrap{
background:#FFFFFF;
color:#303030;
margin:0 auto;
width:760px;
}

#header{
clear:both;
margin:20px 0 0 0;
padding:0;
height:45px;
}

#header h1{
width:250px;
margin:0 0 10px 0;
float:left;
}

#header p{
width:500px;
float:right;
text-align:center;
color:#a0a0a0;
margin:0 0 10px 0;
font-size:0.8em;
line-height:1.2em;
background-color:inherit;
}

#frontphoto{
border:0px none;; margin-left:0; margin-right:0; margin-top:0; margin-bottom:10px
}

#avmenu{
clear:left;
float:left;
width:150px;
margin:0 0 10px 0;
padding:0;
font-size:0.9em;
background:#FFFFFF;
text-transform:capitalize;
}

#avmenu ul#primary-links{ /* To change Menu Links */
list-style:none;
width:150px;
margin:0 0 20px 0;
padding:0;
font-size:1.1em;
text-transform:capitalize;
}

#avmenu ul#primary-links li{
margin-bottom:4px;

}

#avmenu ul#primary-links li a{
font-weight:bold;
height:20px;
text-decoration:none;
color:#505050;
display:block;
padding:6px 0 0 10px;
background:#CCFFFF; /* #f4f4f4; */
border-left:4px solid #cccccc;

}

#avmenu ul#primary-links li a:hover{
background:#eaeaea;
color:#286ea0;
border-left:4px solid #286ea0;

}

.announce{
margin:10px 0 10px 0;
padding:10px;
width:130px;
color:#505050;
background-color:#FFFFFF; /* #f4f4f4; */
line-height:1.3em;
}

#extras{
float:right;
width:120px;
margin:0 0 10px 0;
padding:0;
font-size:0.9em;
line-height:1.5em;
}

#extras p{
margin:0 0 1.5em 0;
}

#content{
margin:0 130px 20px 160px; /* margin:0 130px 20px 160px; */
border-left:1px solid #f0f0f0;
border-right:1px solid #f0f0f0;
padding:0 10px 0 10px; /* padding:0 10px 0 10px; */
line-height:1.6em;
text-align:left;

}

#content h2{
font-size:1.5em;
margin:0 0 0.5em 0;
}

#content img{
padding:1px;
display:inline;
background:#cccccc;
color:#303030;
border:4px solid #f0f0f0;
}

h3{
font-size:1.3em;
margin:0 0 10px 0;
}

a{
text-decoration:none;
color:#286ea0;
}

a:hover{
text-decoration:underline;
color:#286ea0;
}

a img{
border:0px none;
}

#footer{
clear:both;
margin:0 auto;
padding:10px 0 20px 0;
border-top:4px solid #f0f0f0;
width:760px;
text-align:center;
color:#808080;
font-size:0.9em;
}

#footer a{
color:#808080;
text-decoration:none;
}

#footer a:hover{
text-decoration:underline;
}



.left{
margin:10px 10px 5px 0;
float:left;
}

.right{
margin:10px 0 5px 10px;
float:right;
}

.textright{
text-align:right;
}

.center{
text-align:center;
}

.small{
font-size:0.8em;
}

.bold{
font-weight:bold;
}

.hide{
display:none;
}

Here is the page.tpl.php file (I'm doing my site with Drupal)

<?php
// $Id$
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language ?>">

<head>
<title><?php print $head_title ?></title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<?php print $head ?>
<style type="text/css" media="screen">@import "<?php print base_path(). path_to_theme(); ?>/andreas01.css";</style>
<style type="text/css" media="projection">@import "<?php print base_path(). path_to_theme(); ?>/andreas01.css";</style>
<style type="text/css" media="print">@import "<?php print base_path(). path_to_theme(); ?>/print.css";</style>
<?php print $styles ?>
</head>

<body>
<div id="wrap">
<div id="header">
<a href="<?php print base_path() ?>" title="<?php print t('Home') ?>">
<?php
print '<img src="' . base_path() . $directory . '/eurotrippedtitle.gif" />'
?>
</div>
<br><br>
<img id="frontphoto" src="<?php if ($logo) { ?><?php print $logo ?><?php } else { ?><?php print base_path(). path_to_theme(); ?>/front.jpg<?php } ?>" width="760" height="175" alt="" />

<div id="avmenu">
<?php if ($primary_links) { ?>
<h2 class="hide"><?php print t("Primary Links:")?></h2>
<ul id="primary-links">
<?php foreach ($primary_links as $link) { ?>
<li><?php print $link?></li>
<?php }; ?>
</ul>
<?php }; ?>
<?php if ($sidebar_left != "") { ?>
<div class="announce">
<?php print $sidebar_left ?><?php /* print left sidebar if any blocks enabled */ ?>
</div>
<?php }; ?>
</div>

<?php if ($sidebar_right != "") { ?>
<div id="extras">
<?php print $sidebar_right ?><?php /* print right sidebar if any blocks enabled */ ?>
</div>
<?php }; ?>

<div id="content">
<div id="content-wrap">

<div id="breadcrumb">
<?php print $breadcrumb ?>
</div>

<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
<?php print $help ?>
<?php print $messages ?>

<?php if ($title) { ?><h2 class="title"><?php print $title ?></h2><?php } ?>
<div class="tabs"><?php print $tabs ?></div>

<?php print $content; ?>

</div>
</div>

<div class="footer" id="footer">
<?php print $footer_message ?>
</div>
<?php print $closure ?>

</div>

</body>
</html>

Sorry for the overkill code posting, I just wanted to include everything relevant in the hope that someone can help me get rid of that gap! It's fine in IE7 and Firefox (the two browsers I just happened to be using) but IE6 doesn't like it at all. The comments next to some of the margins is me changing values and the commented values are the previous settings, just in case I forgot them, I did however, change them back to what they were before, hence why they say the same thing.

Anyone have any ideas as how to get rid of that nasty big white space gap ?

Thanks a lot

dux0r
RexxCrow
07-27-2006, 04:05 AM
Maybe something to do w/ a margin/padding rules presidence? To many rules for me to read through and figure out what you are doing, I think it would be easier for you to compair them to see if that is what the case is or not.

I was thinking you might benefit from DIV the header images and positioning the top one with similar to (as it looks a little off right now):

position: absolute; top: 0; left: 0
Kravvitz
07-27-2006, 05:18 AM
1) Why are you using XHTML 1.1?
You should be aware that text/html should not be used with XHTML 1.1; use application/xhtml+xml instead or switch to XHTML 1.0 Strict.
Sending XHTML as text/html Considered Harmful (http://www.hixie.ch/advocacy/xhtml)
Serving up XHTML with the correct MIME type (http://keystonewebsites.com/articles/mime_type.php)
http://www.w3.org/2003/01/xhtml-mimetype/
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html
http://www.w3.org/TR/xhtml-media-types/#summary
Content-Typing XHTML (http://www.greytower.net/archive/articles/xhtmlcontent.html)
http://www.dynamicsitesolutions.com/demos/test.xhtml

2) You problem is the height you set on #header. IE is wrongly expanding it so the <br>s cause a gap, but in FF the height is respected so the <br>s are used to push down the <img> under #header.

3) Give #content position:relative; and #content-wrap width:auto;.

4) Please read Guidelines and Suggestions for Posting on Web Development Forums (http://www.dynamicsitesolutions.com/other/forum_posting_guidelines/).
dux0r
07-27-2006, 09:23 AM
Thanks for your reply,

I'm going to paste what I've changed, could you advise if it is correct or not?

Added position:relative to #content tag -

#content{
margin:0 130px 20px 160px;
border-left:1px solid #f0f0f0;
border-right:1px solid #f0f0f0;
padding:0 10px 0 10px;
line-height:1.6em;
text-align:left;
position:relative;
}

Added content-wrap tag as -

#content-wrap{width-auto
}

The white space gap has gotten slightly smaller after those edits, but still about 2 inches from the top of the page in line with the bottom of the right hand side navigation bar, does that have something to do with it?

You mentioned that the problem was the height that was set on #header. Should that be modified to a new value? I tried to change the height value but that didn't seem to do anything..

Thanks for your advice..much appreciated

dux0r
Kravvitz
07-27-2006, 09:46 AM
My point number 2 was a separate problem. Either set the height to the height of the image or don't set it at all.

The rule for #content looks fine, but the rule for #content-wrap should look like
#content-wrap{
width:auto;
}
dux0r
07-27-2006, 11:51 AM
Ok, all done

Still doesn't seem to have eliminated that big gap of space between the bottom of the image and the first post.

Any other ideas as to why it's still there?

Thanks

dux0r
dux0r
07-27-2006, 05:09 PM
I'm using Drupal to design the site, and I've discovered that if I remove blocks along the left sidebar (navigation menu, login menu etc) the white space starts to disappear, when I add blocks, it increases and gets further down the page. It must be something with the #av-menu tags in the CSS file? Just a guess. When I remove all the blocks the text in the centre of the page (the posts) are up the top of the page where they should be, but they are squashed up into half the size of the middle column.

Hope this helps a bit..

Thanks,

dux0r
Kravvitz
07-28-2006, 01:36 AM
In http://www.eurotripped.com/themes/andreas01/style.css you need to remove the width:100%; from #content-wrap.

Adding a CSS rule does no good if another rule later in the stylesheet(s) overrides it.
dux0r
07-28-2006, 02:28 AM
Thank you very much, the problem is now solved. But alas I've run into another, IE6 looks good, Firefox looks good but IE 7 now has a white line down the right hand side of the page.. I'm just wondering how I can get remove that and possibly extend the left and right hand borders so that there's a bit of extra space for the calender..

Thanks for all your help so far
Kravvitz
07-28-2006, 03:11 AM
You're welcome :)

It looks like IE7 needs the width I just told you to change.

Since the width setting doesn't seem to be causing a problem in other browsers, we'll show this rule to browsers other than IE4-6/Win.
#content>#content-wrap {
width:100%;
}
add that after
#content-wrap{
width:auto;
}
dux0r
07-28-2006, 03:37 AM
Oh my gosh, I am in awe. You are awesome! Thanks so much

I put that in and the line disappeared, just as I wanted. Yet I have no idea as to how it got there in the first place, or how you got it to go away with that commmand.

*falls off chair in amazement* how do you get to know all this stuff! Years of playing around with CSS files I guess?

If only I could extend the left and right column widths a tad so that the calender fits in nicely, I beleive it will start to look half decent.

*bows to you* :thumbsup: :thumbsup: