Forum Moderators: not2easy
while rendering in firefox nd other browsers the following code gives perfect look. but in IE 15px gap is showing...
CSS part
---------------------
*{padding: 0px; margin: 0px;}
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper{
width: 489px;
margin: 0px auto;
}
#header{
width: 489px;
height: 68px;
float: left;
padding: 0px;
background: #eeeeee;
}
#head1{
float: left;
background-image: url(images/Dart_Popup_01.gif);
background-repeat: no-repeat;
width: 25px;
height: 68px;
}
#head2{
padding-top: 15px;
float: left;
background-image: url(images/Dart_Popup_02.gif);
background-repeat: repeat-x;
width: 204px;
height: 68px;
}
#head3{
float: left;
background-image: url(images/Dart_Popup_03.gif);
background-repeat: no-repeat;
width: 213px;
height: 68px;
}
#head4{
padding-top: 1px;
float: left;
width:47px;
height:68px;
}
#left{
width: 25px;
height: 253px;
float: left;
background-image: url(images/Dart_Popup_06.gif);
background-repeat: no-repeat;
}
#content{
width: 417px;
height: 253px;
float: left;
padding: 0px;
margin: 0px 0px 0px 0px;
background: #f3efe5;
}
#right{
width: 47px;
height: 253px;
float: left;
background-image: url(images/Dart_Popup_09.gif);
background-repeat: no-repeat;
}
#footer{
width: 489px;
height: 60px;
float: left;
background: #efefef;
}
#foot1{
float: left;
background-image: url(images/Dart_Popup_10.gif);
background-repeat: no-repeat;
width:25px;
height:60px;
}
#foot2{
float: left;
background-image: url(images/Dart_Popup_11.gif);
background-repeat: no-repeat;
width:204px;
height:60px;
}
#foot3{
float: left;
background-image: url(images/Dart_Popup_12.gif);
background-repeat: no-repeat;
width:213px;
height:60px;
}
#foot4{
float: left;
background-image: url(images/Dart_Popup_13.gif);
background-repeat: no-repeat;
width:47px;
height:60px;
}
--------------------------------------------------------
HTML part
---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pop Up</title>
<link rel="stylesheet" type="text/css" href="pop.css" media="screen" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<!-- Divided header (4 parts) begins here-->
<div id="head1"></div>
<div id="head2">Heading goes here...</div>
<div id="head3"></div>
<div id="head4"><img src="images/Dart_Popup_05.gif" title="close" alt="close" /></div>
<!-- Divided header parts ends here-->
</div>
<!-- End Header -->
<!-- Begin Left Content -->
<div id="left">
</div>
<!-- End of Left Content -->
<!-- Begin Main content -->
<div id="content">
content goes here content goes
</div>
<!-- End of Main Content -->
<!-- Begin Right content -->
<div id="right">
</div>
<!-- End right content -->
<!-- Begin Footer -->
<div id="footer">
<!-- Begin Footer content divisions(3 parts) -->
<div id="foot1"></div>
<div id="foot2"></div>
<div id="foot3"></div>
<div id="foot4"></div>
<!-- End of footer divisions -->
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
plz help me to solve this issue :(
I see no gap in IE when pasting this code, perhaps there needs to content in the header or footer <hx> or <p>?
Can you tell us which divs you're seeing the gap between?
the img which is inside head4 should be made
display: blockAnother is that you have triggered an IE Float bug with the use of <!-- HTML Comments --> BETWEEN floats in the HTML Source, don't ask!
but either remove the comments or move them inside the floats.. e.g.
instead of:
<div id="right">
</div><!-- End right content --><!-- Begin Footer -->
<div id="footer">
make it:
<div id="right">
<!-- End right content --></div><div id="footer">!-- Begin Footer -->
whenever a float (IE6) starts a new line, like the footer in this case, if there is an HTML Comment between the floated elements (divs) IE allocates it some space, at least I think! anyway moving them gets rid of the gap between the content and footer - for me anyway
In Fact that may actually be the cause of the gap between the header and the first left float of the content so move those <!-- comments --> inside their respective divs too, see if that helps
[edited by: SuzyUK at 10:46 am (utc) on Jan. 11, 2008]
declaration at the top of the page.
All the pages that had the declaration caused my <span> tag to drop the element about 15px or so in Firefox.
When I removed the declaration(I'm not recommending this, it's just what I did), all pages rendered (nearly) the same.
You need a br in your code at this point.
<!-- End right content -->
<br />
<!-- Begin Footer -->
*<br /> over-used, under-utilised*
[edited by: Dave75 at 7:16 pm (utc) on April 3, 2008]
