Fri, 2003-05-23 04:23
Hi all, I'm experimenting with a pseudo-framed layout using three divs - one for main content, one left-floated and the third resting at the top of the page. In NS7, they all sit perfectly as I want, but for some reason - IE6 leaves a 3px margin between the left-hand and top DIVs. I've checked all margins, padding and borders are 0, tried removing whitespace from the source, but all to no avail. I've found references to a "double width" margin bug in IE6, but if my margins as I've set all mine to 0, i'm not sure if it's the same bug.
I have included a sample page below - if anyone could shed some light on this, I'd be deeply grateful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>example layout</title>
<style type="text/css">
body {
margin:0px 0px 0px 0px;
height:100%;
width:100%;
}
#main {
position:absolute;
top:0;
left:0;
background:#ddf;
height:100%;
width:100%;
padding:0;
margin:0;
border-width:0;
}
#main #tbox {
border-right:1px solid #000;
float:left;
height:100%;
width:149px;
background:#eee;
margin:0;
padding:0;
}
#main #lbox {
width:auto;
border-width:0px;
padding:0px;
border-bottom:1px solid #000;
height:124px;
background:#eee;
margin:0;
}
h1 {
font-size:14px;
margin:0px 10px 10px 10px;
padding-top:10px;
}
</style>
</head>
<body>
<div id="main">
<div id="tbox">
<h1>Left</h1>
</div>
<div id="lbox">
<h1>Top</h1>
</div>
<h1>Content</h1><br />
</div>
</body>
</html>
Fri, 2003-05-23 05:36
#1
IE6 float bug?
Hi Genyus,
if you add margin-right:-3px; to tbox the gap disapears.
You may then need to add a padding-left:3px; to other elements for balance.
Why have you choosen to have the content div contain the top and left divs :?:
It may be more logical to seperate them and layout them out something like
<div id="leftbox"> <h1>Left</h1> </div> <div id="topbox"> <h1>Top</h1> </div> <div id="main"> <h1>Content</h1><br /> </div>
Just a suggestion, course you would have to modify the CSS to get it to work.
If you stick to the method you have rename the id's as lbox for the top box and tbox for the left box are a little confusing.
Fri, 2003-05-23 14:03
#2
IE6 float bug?
Thanks for your reply, Tony. I was aware of the -3px margin fix, but it breaks the layout in NS7; should've mentioned that before, apologies. And sorry for the iffy naming, I had stripped out all the other junk in the page for clarity and had renamed the elements to make them more obvious, I guess at that time of night I was just a little muddled.
I know the layout is very odd, but I have a specific reason for this - I want to create a frame-type presentation, but I will be using DHTML to animate the "frames" loading. The logic for having two divs inside the main one is that I couldn't find a way to have the overall dimensions take up the full size of the screen and no more. ie using a "three-div" layout as u suggested, i'd essentially need something like (ignoring margins etc):
#topbox{width:100%;height:125px;}
#leftbox{height:100%-125px;width:150px;}
#content{height:100%-125px;width:100%-150px;}
I've been unable to find a way to do this and keep everything within the boundaries of the visible area, hence my alternative layout.
By turning off the background-color for the left-hand box, I realised that IE6 doesn't seem to be implementing float as specified in the W3C spec; the top div starts at the edge of the left one, whereas NS7 has the top div spanning the full width, with the content starting at the edge of the left-hand box, as it should do.
Have reposted the page with more sensible element names:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>example layout</title>
<style type="text/css">
body {
margin:0px 0px 0px 0px;
height:100%;
width:100%;
}
#main {
position:absolute;
top:0;
left:0;
background:#ddf;
height:100%;
width:100%;
padding:0;
margin:0;
border-width:0;
}
#main #leftbox {
border-right:1px solid #000;
float:left;
height:100%;
width:149px;
margin:0 -3px 0 0;
padding:0;
}
#main #topbox {
width:auto;
border-width:0px;
padding:0px;
border-bottom:1px solid #000;
height:124px;
background:#eee;
margin:0;
}
h1 {
font-size:14px;
margin:0px 10px 10px 10px;
padding-top:10px;
}
</style>
</head>
<body>
<div id="main">
<div id="leftbox">
<h1>Left</h1>
</div>
<div id="topbox">
<h1>Top</h1>
</div>
<h1>Content</h1><br />
</div>
</body>
</html>
Fri, 2003-05-23 21:11
#3
IE6 float bug?
Hi Genyus,
Keeping the same CSS and changing the html so that the topbox is before leftbox
<div id="main">
<div id="topbox">
<h1>Top</h1>
</div>
<div id="leftbox">
<h1>Left</h1>
</div>
<h1>Content</h1><br />
</div>Gives the same look in Netscape7 and IE6.You may be able to work with that to give the look you are after.
Fri, 2003-05-23 21:41
#4
IE6 float bug?
That is the original layout I wanted, the reason I shunned it is because setting leftbox to 100% height stretches it past the bottom edge of the screen which isn't what I want. By using auto width for the topbox div, i could ensure it filled the full width of the screen, but there's no equivalent vertical mechanism that i've been able to find.