Gaps in IE!!

blacktears

04-30-2006, 11:39 AM

I have started on a site that works great in firefox (as always) yet in IE there is a gap at the bottom of the page where the image is supposed to go right the bottom as it does in firefox (as always!) There is also a gap between the divs, which is just on the right of the leopard print, which is not supposed to be there. I know there is a hack but not sure if it's the right one and can't remember it! :D Also, gonna sort out the layout of the coding later on hehe

CSS
body {
margin: 0;
padding: 0;
background: #000000;

}

img {border: none;}
a {text-decoration: none;}
#wrap {
margin: 0 auto;
width: 980px;
height: 590px;
padding: 0 20px 0 0;

}

#skin {

margin: 0 0 0 20px;
height: 590px;
width: 420px;
padding: 0 10px 0 0;
float: left;
background: url(images/skin.gif);

}

#paper {
margin: 0 0 0 0px;
width: 495px;
height: 600px;
padding: 0 10px 0 0;
background: url(images/back.gif);
float: left;

}

.katie {

margin: 35px 0 0 30px;
padding: 0 10px 0 0;
float: left;
}

.rainstorm {

margin: 0 auto;
padding: 390px 0px 0 0;
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Katie Fox Photography - Main.</title>

<link rel="stylesheet" type="text/css" href="style2.css">

<meta name="author"
content="Becka Dawson" />
<meta http-equiv="content-type"
content="text/html; charset=uk-ansi" />

</head>

<body>
<div id="wrap">
<div id="skin">
<img src="images/katiefox.gif" alt="Katie Fox Photography"class="katie">
<a href="http://www.rainstormphotography.co.uk"><img src="images/rainstorm.gif" alt="Rainstorm Photography"class="rainstorm"></a>

</div>
<div id="paper">
ggg
</div>

</div>
</body>
</html>

SCREENSHOT (FIREFOX)
http://www.rainstormphotography.co.uk/katie/FIREFOX.gif

SCREENSHOT (IE)
http://www.rainstormphotography.co.uk/katie/IE.gif

VIPStephan

04-30-2006, 12:03 PM

Without having the actual images it's hard to help you (can't try it out myself) but the gap between the divs is due to the 3px gap bug in IE. I think you can work around that by floating the right div to the right (and specifying a width).
If it's not working or if there is any need to put a different style for IE you should use conditional comments (http://www.quirksmode.org/css/condcom.html).
The best is to upload the page to a test server for us and we can really help you. ;)

_Aerospace_Eng_

04-30-2006, 04:19 PM

Its not really a bug. It occurs in Firefox sometimes to. Its the whitespace you have in your html. You can change this
<div id="skin">
<img src="images/katiefox.gif" alt="Katie Fox Photography"class="katie">
<a href="http://www.rainstormphotography.co.uk"><img src="images/rainstorm.gif" alt="Rainstorm Photography"class="rainstorm"></a>

</div>
to this
<div id="skin"><img src="images/katiefox.gif" alt="Katie Fox Photography"class="katie"><a href="http://www.rainstormphotography.co.uk"><img src="images/rainstorm.gif" alt="Rainstorm Photography"class="rainstorm"></a></div>
Which will fix it or make the images display:block; but this will put the images on their own line fyi.

Arbitrator

04-30-2006, 07:35 PM

Heh, it's kind of difficult to test this kind of problem without actually having access to the images:
http://www.rainstormphotography.co.uk/images/rainstorm.gif (valid)
http://www.rainstormphotography.co.uk/images/skin.gif (not valid)
http://www.rainstormphotography.co.uk/images/back.gif (not valid)