Extra space below element in ie6 and 7

HTML & CSS
1

Hi everyone,

I’m putting together a new web page but I’m having problems with a spacing issue. In the following code, there’s an h1 element that’s contained by a div with an id of “header”.


<div id="header" class="clearfix">
			<ul class="clearfix">
			<li><a href="index.php">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Treatment</a></li>
			<li><a href="#">Seminars</a></li>
			<li><a href="#">Testimonials</a></li>
			<li><a href="#">Location Map</a></li>
		</ul>
		<h1><a href="#">Logo</a></h1>
        <h2><a href="#">Contact us</a></h2>
</div> <!-- end #header -->

The h1 element has a logo in the background using css.


#header h1 {
	float: left;
	margin-left: 16px;
	width: 403px;
	}

#header h1 a {
	display: block;
	width: 403px;
	height: 73px;
	text-indent: -9999px;
	background: url(../img/Logo.gif) no-repeat;
	}

Below the header div is another div with id of “primary”.


#primary {
	float: left;
	margin-top: 10px;
	width: 596px;
	}
	
	#primary .feature {
	position: relative;
	height: 269px;
	overflow: auto;
	background: #f7f6e9 url(../img/bg-family.jpg) no-repeat;
	}

This is floated left and also contains an image in the background.

In most browsers, eg. Safari, Firefox, IE8 etc. there’s the correct amount of space between the bottom of the logo in the h1 and the “primary” div but in ie7 and 6 there’s a lot more space than there should be.

I’ve put the sample page up on a web server and wondered if someone could tell me what the problem might be in these two browsers?

http://example.com/test

http://example.com/test/css/screen.css

Thanks in advance for any help.

2

Thanks for the reply,

You referred to a line height on the h1. I know that there’s a line height on the body element set as part of the reset styles that I had, but I couldn’t see any line height on the h1. Did you mean that the h1 was inheriting the line height from the body? Actually I don’t even know what the line height on the body is for. I just copied it as part of the reset styles that are freely available from eric meyer. Can you explain the purpose of it?

In any case, the change in code did fix the issue which is great.

I know my text-indent technique isn’t the most ideal. I guess I’m just used to it now. I should try your alternative though.

3

Yes you set the line-height in the body to 1 but that won’t over-ride any default settings that browsers may have explicitly set on an element by default. (Just as setting font-size:13px on the body won’t affect the font-size of the h1 either because it is styled specifically by the browser and not inherited from a parent.)

Normally I set the line-height on the body to around 1.3 anyway to give text room to breathe.

4

Ok thanks for explaining.

5

Hi,

It’s the line height on the h1 causing a gap combined with the bottom margin on the ul being transferred to the last element due to a bug in IE.

Put the margin as a top margin on the h1 instead and then set the line-height for the h1.


h1 {
    font-size:36px;
   [B] line-height:1.0;[/B]
}

#header ul {
    [B]margin: 0 0 0 25px;[/B]
    position: relative;
}
#header h1 {
    float: left;
[B]    margin:20px 0 0 16px;[/B]
    width: 403px;
}

Rather than use text-indent to hide text which is not very accessible add an inner element instead to hold the image and place it on top of the text instead.


#header h1 {
    float: left;
    margin:20px 0 0 16px;
    width: 403px;
}
#header h1 a {
    display: block;
    width: 403px;
    height: 73px;
  [B]  overflow:hidden;
    position:relative;[/B]
}
[B]#header h1 em{
    width: 403px;
    height: 73px;
    background: url(http://example.com/test/img/Logo.gif) no-repeat;
    position:absolute;
    left:0;
    top:0;
    cursor:pointer;
}    
[/B]



    <h1><a href="#">Logo<em></em></a></h1>

That means that if css or images are missing then the text is still displayed. The method can’t be used for transparent images though as the text wil show underneath.