CSS Forum

**Rajaie** · 02-22-2008, 03:52 AM

Looking at the two pictures below, you can see that in Internet Explorer, there is a space under the image. any ideas how to fix this?

html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="Rajaie AlKorani" /> 
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>ZiiMobile | HomePage</title>
</head>
<body>
<div id="wrapper"><!-- Wrapper Begins Here -->
<div id="header"><!-- Header Begins Here -->
<a href="/ziimobile/"><img src="/ziimobile/header.png" title="ZiiMobile" alt="ZiiMobile"></a>
</div><!-- Header Ends Here -->
</div><!-- Wrapper Ends Here -->
</body>
</html>

css

Code:

html,body {
font-family: Tahoma,Arial,Helvetica,Sans-serif;
background: url('/ziimobile/bg.png');
color: #000000;
}
img {
border: 0;
}
#wrapper {
margin: 0 auto 0 auto;
background: #F5F4EA;
width: 1000px;
border: 1px solid black;
height: 1000px;
}
#header {
height: 120px;
width: 100%;
margin: 0 auto 0 auto;
border-bottom: 1px solid black;
}

**Gilligan** · 02-22-2008, 08:44 AM

Hard to tell without having the image.

But maybe try this in the css, replace #header with this

Code:

#header {
height: 120px;
width: 100%;
margin: 0 auto 0 auto;
border-bottom: 1px solid black;
padding: 0;
}

or maybe this, just for IE. Leave #header, but add this.

Code:

html>body #header {
height: 120px;
width: 100%;
border-bottom: 1px solid black;
margin:0;
padding:0;
}

OR, you could try adding this in the HTML, replace the image with.

Code:

<a href="/ziimobile/"><img src="/ziimobile/header.png" title="ZiiMobile" alt="ZiiMobile" style="margin:0; padding:0;"></a>

**Rajaie** · 02-22-2008, 10:07 AM

Thanks but that didn't work, so I tried this and it worked

Code:

#header img {
    border: 0;
    margin: 0 0 -3px 0;
}

**Gilligan** · 02-22-2008, 11:20 AM

Although that would set it so the -3px margin applies in all browsers. If you just want that change to IE. Use this

Code:

html>body #header img {
    border: 0;
    margin: 0 0 -3px 0;
}

And, another thing, you can set the margin for bottom easier with margin-bottom.

Code:

margin-bottom:-3px;

But if that works the way you want then okay