whitespace before first element won't go away except in MSIE - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

whitespace before first element won't go away except in MSIE

It goes away only if i have my header with no content.

danpritchard

10:16 pm on May 19, 2005 (gmt 0)

10+ Year Member

I'm using a "sliding doors" tab navigation, which is the "header" div, and my logo is above it in a div called "logodiv". When just those two divs are present, there's no problem. But when I introduce any tags after that, h2 or p for example, or even an empty div, the logodiv jumps down by about 10px in Safari and Mozilla (actually i tried in Camino, as I don't currently have Firefox). My friend says IE6/XP doesn't show that whitespace. I don't understand what's causing it. Maybe someone who has more experience with CSS will be able to figure out what's going on here.

Things I checked:
Margin and padding for body are all zero.
#logodiv has margins set to zero.

Here's the CSS:

<style type="text/css" media="screen">
body {
background:#fff;
margin:0px;
padding:0px;
color:#000;
font:x-small/1.5em Verdana,sans-serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
} html>body {font-size:small;}
#header {
float:left;
width:100%;
background:#e1e9ed url("images/bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#logodiv {
float:left;
width:100%;
background:#0f4e73;
font-size:93%;
line-height:normal;
}
</style>

Here's the html:

<body>
<div id="logodiv">
<img src="images/logo.gif" />
</div>
<div id="header">
<ul>
<li id="current"><a href="index.html">Home/Blog</a></li>
<li><a href="photos/">Photos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<p>content (remove this p tag and page renders fine) </p>
</body>

kk5st

1:52 pm on May 20, 2005 (gmt 0)

10+ Year Member

Not tested.

I would suspect collapsing margins. Try removing margins from the <p> element and see if that makes a difference.

Meyer has a good article on the subject, Uncollapsing Margins ... [complexspiral.com]

cheers,

gary

createErrorMsg

2:45 pm on May 20, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Header and logodiv are both floated, which means that they are actually sitting on TOP (along the z-axis) of the non-floated element that follows them. The nature of floats will not allow the content (line boxes containing text, images, etc) to be covered up by the floats, so the text of your H1 or P tag will appear beneath the floated divs, but the actual element itself starts at the top, even with the top of the "header" div. Since H1 and P tags comes with default margins, the gap you are experiencing is, in all likelihood, those margins.

You can do one of two things to get rid of it.

h1{ /*whatever element follows the logo*/
clear:left;
}

or

h1{ /*whatever element follows the logo*/
margin-top:0;
}

cEM

danpritchard

3:23 am on May 21, 2005 (gmt 0)

10+ Year Member

createErrorMsg, thanks so much for your help. I used

clear: left;

on all my h1, h2... and p tags...

and it worked!

Awesome!

createErrorMsg

2:24 pm on May 21, 2005 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Glad to hear the problem is solved. One thing about this...

on all my h1, h2... and p tags..

...it's best to use the clear property sparingly, especially if you have a float based layout. it's one of those properties that seems simple on the surface but gets quickly complicated when multiple floats and clears start to mix. So my advice is to use the clear ONLY on the element that immediately follows the floated logo. If that element is always an H1, just apply it to the H1. If it is different elements on different pages, you might try creating a class name with the clear styling and apply it to whatever element on each page immediately follows the logodiv...

html for Page 1:
<div id="logodiv"></div>
<h1 class="clear_the_logo">Lorem Ipsum</h1>
html for Page 2:
<div id="logodiv"></div>
<p class="clear_the_logo">Lorem ipsum dolor sit amet.</p>
css for both:
.clear_the_logo{
clear:left;
}

cEM

danpritchard

12:54 am on May 22, 2005 (gmt 0)

10+ Year Member

Good to know. I'll keep that in mind and perhaps modify my stylesheet accordingly. I like the idea of creating a class to apply to the first element following my header.