Forum Moderators: not2easy
<style type="text/css">
body {
margin:0;
padding:0;
background: url(bg.gif);
color:#000;
min-width:750px;
height: 100%;
}
div#wrap {
background:url(mainbg.gif);
margin:0 auto;
width:750px;
height: 100%;
}
#header {
background-color:#ddd;
margin-left: 5px;
margin-right: 5px;
}
#nav {
background-color:#c99;
margin-left: 5px;
margin-right: 5px;
}
#nav ul{
margin:0;
padding:0;
}
#nav li{
display:inline;
list-style:none;
margin:0;
padding:0;
}
#main {
float: left;
width: 485px;
margin-left: 5px;
margin-right: 5px;
}
#sidebar {
width:242px;
margin-left:495px;
}
#wrap > #sidebar {
width:245px;
}
#footer {
background-color:#cc9;
clear:both;
}
#imageholder {
background-color: #FFFFFF
width: 245px;
position: absolute;
bottom: 0;
}
</style>
HTML:
<body>
<div id="wrap">
<div id="header"><h1>Whatīs up?!</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option</a></li>
</ul>
</div>
<div id="main">
<h2>Column 1</h2>
</div>
<div id="sidebar">
<h3>Column 2</h3>
<ul>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="imageholder">
<IMG SRC="lol.gif">
</div>
</div>
</body>
padding:0;
<div id="imageholder">
<IMG SRC="lol.gif"></div>
instead of
<div id="imageholder">
<IMG SRC="lol.gif">
</div>
(trust me!)
Gave the same result as padding: 0; on #wrap
<div id="imageholder"><IMG SRC="lol.gif"></div>
almost did the trick, 1 or 2 more pixels to go down.
I really donīt seem to understand how these things work :_(
as well?
That's stever's solution taken one step further. Fixed the gap for me in IE 6.0 SP1. FF displays it correctly with and without the newlines.
Background: A newline in the html is equivalent to a space character. Your div is of fixed width so the space character wraps to the next line and creates the vertical gap. These hidden whitespace bugs can easily be identified by changing the font size. If the gap changes with font size, it's a hidden whitespace.
Another way to fix it is adding this style:
#imageholder img { display: block; }
Then you can leave the newlines in the HTML.
Iīm using IE 6.0.2 SP2.
#imageholder img { display: block; } didnīt do the trick either iīm afraid.
