...

View Full Version : Div is made taller than the only thing it contains in IE...



alank2
06-11-2012, 04:19 AM
Hi,

In Firefox the DIV expands to contain the image perfect with no border on it, but in IE there is a small strip of RED border at the bottom. I made it red to stand out. Any idea why IE makes the DIV larger than necessary??

Thanks,

Alan





body
{
background: #000000;
text-align: center;
}

.body
{
width: 975px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: #ff0000;
}



<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="body">
<img src="header.jpg">
<div class="body2">
</div>
<div class="body3">
</div>
</div>
</body>
</html>

tracknut
06-11-2012, 04:33 AM
Try putting this:


img {display:block}


in your CSS. IE has a nasty habit that way...

Dave

BuildMyWeb
06-11-2012, 05:27 AM
you might be better served making header.jpg a bg image:

of course, use the actual height and width of header.jpg:

#banner { width:100px; height:20px; background:url('header.jpg'); }


<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="body">


<div id="banner"></div> <!-- this is my banner img -->

<div class="body2">
</div>
<div class="body3">
</div>
</div>
</body>
</html>

Candygirl
06-11-2012, 08:26 AM
Try putting this:


img {display:block}


in your CSS. IE has a nasty habit that way...

Dave

I agree with the solution (maybe with a margin:0 auto in order to center the picture), but it's more related to the doctype (and the rendering engine choice) then the "nasty" IE ;)

If you add a XHTML 1.0 or HTML 4.01 transitional doctype, the "problem" will not appear in IE as well in FF. If you use the strict one, or HTML5, the "problem" will be there in FF also. I guess it's about the presence or not for the space under the text baseline.

alank2
06-11-2012, 02:07 PM
Hi,

Thanks for the tips everyone - that worked great.

I'm new at CSS, but trying to learn.

Thanks,

Alan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum