...

View Full Version : Gaps in IE!!



blacktears
04-30-2006, 12:39 PM
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, 01: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, 05: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, 08: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)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum