View Full Version : Extra space below image in IE

09-13-2007, 11:20 PM
Hi everyone,

I am brand new to CSS (and haven't done HTML in a long time), and this board has been great.

I am having a problem with my first site: www.studioofvocalarts.com. In IE6, There is a space between the bottom of the image in the masthead and the bottom border of the masthead. The masthead and the image are both 167px high. In every other browser I've tried, the image fits in the masthead perfectly. I've been working on it, but haven't figured out the problem yet. Here's the relevant parts of the CSS:

* {

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address {
margin:1em 5%;

body {
min-width: 600px;

#masthead {
background-color: #E8947D;
height: 167px;
margin: 0 0 10px 0;
padding: 0px;
border: 1px solid #000;

#masthead img {
float: left;

And here's the HTML for the masthead:

<div id="masthead">
<img height="167" width="150" alt="Headshot of Kelliann Festa" src="images/kellheadshot.jpg"/>
<br /><br /><h1>Kelliann Festa's Studio of Vocal Arts</h1>
<h2>New Haven, Connecticut</h2>

Any guidance for me? Thank you!

09-13-2007, 11:28 PM

09-14-2007, 12:00 AM
Thank you twodayslate. I read through the page you linked to but couldn't find an answer. Maybe you're pointing out how to make the footer stay at the bottom of the page? (Which I'm going to fix next -- thanks!) I'm talking about the image in the masthead. If I'm missing the obvious, I apologize.

I did find this suggestion in one of the links from your page:

img {display:block;}

I've added that but still no go.

BTW, I have the same problem in IE5.

09-14-2007, 12:48 AM
It is your whole code, you need to redo everything. Bonrouge is a great resource.

<div id="container"> <!-- this wraps all your elements -->
<div id="header"> <!-- this is your header wrapper -->
<img src="logo.gif" style="float: left;" />
<h2>Name</h2><br /> <span>Discription</span>
</div> <!-- this is closing the header -->

<div id="contentwrapper">
<div id="sidebar">
nav here
</div> <!-- end sidebar -->
<div id="content">
</div> <!-- end content -->
</div> <!-- end content wrapper -->
<div id="footer">&copy;</div>
</div> <!-- end wrapper -->

More info on floats: http://www.quirksmode.org/css/clearing.html

09-15-2007, 10:47 PM
Thanks for your help. Putting the image in as the background of #header as opposed to using <img> in the HTML solved it. I still don't know why it wasn't working before, though, and I'd love to understand. It seems like there was a padding or margin issue, but I zeroed out both padding and margin with:

* {
at the beginning of my CSS.