Forum Moderators: open
Anyway, I'll get to the point:
Here's the layout. Don't worry, I'll post code later on.
[pre]
Container
Div__div 1 (content)
¦_div 2 (border)
[/pre]
Div container has 10em width, so should it's contained elements. Height is not set.
Div 2 (border) is position:absolute,0,0, should span 100% height (and width).
Div 1 (content) is essentially position:static, auto height (depending on content height), should have max width.
Here's code of the full thing... it is a nav menu I'm converting from table form to table-less form. It has more than what I mentioned, but the same basic layout and content is there.
[pre]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<html>
<head>
<title>MIE_HTML</title>
<style type="text/css">
*{font-family: "Arial", sans-serif; margin:0; padding:0}
body{background-color:black; color:white; height:100%}
#lnav{width:10em;}
#menucontainer{position:relative; top:0; left:0; width:10em}
#menu{position:relative; left:2em; width:10em; z-index:2;}
#menuborder{position:absolute; top:0; left:0; width:10em; height:100%; z-index:1;}
a{display:block;}
</style>
</head>
<body>
<div id="lnav">
<div style="width:10em;">
<img src="lnavt.gif" height="40px" width="100%" alt="">
</div>
<div id="menucontainer">
<div id="menuborder">
<img src="lnavlr.gif" style="width:100%; height:100%" alt="">
</div>
<div id="menu">
<a>content1</a>
<a>content2</a>
<a>content3</a>
<br>
<a>content1</a>
<a>content2</a>
<a>content3</a>
<br>
<a>content1</a>
<a>content2</a>
<a>content3</a>
</div>
</div>
<div style="width:10em;">
<img src="lnavb.gif" height="40px" width="100%" alt="">
</div>
</div>
</body>
</html>
[/pre]
I was playing around with a few potential fixes... I think I removed them all except body{height:100%}, which I don't think there's anything wrong in keeping (even though I don't have any children of body which will use relative heights.)
The way it is in IE is pretty bad. It doesn't look as bad as I think it is though. I should have colored my divs so I could analyze their size and positions but I have a good idea of how they are. (for FF I have tools to see their size without doing that stuff)
There's also a tiny problem for FF (and maybe other browsers), where there's a small gap inbetween the topnav image and the border image. I'm unsure why this is.
There's also a tiny problem for FF (and maybe other browsers), where there's a small gap inbetween the topnav image and the border image. I'm unsure why this is.
edit: god damn, what the hell is with the thing keep killing my spaces? I guess it's intentional? I thought the whole reason to use pre was to keep stuff like tabs and spaces intact! Every time I even edit my post, it eats up more and more spaces!?
Oh well, you'll just have to put up with ugly code...
[edited by: Xapti at 6:58 am (utc) on Mar. 29, 2007]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
And by the way, Ted... changing doctype changed a bit of things... I'll get back on that.
FYI, anyone should be able to test this code quite well... it's self-standing code, just no images. The images are pretty simple though, and are sized all in the code, so you could use any image, or no image (just the placceholders).
[edited by: Xapti at 4:39 am (utc) on Mar. 30, 2007]
<!--[if IE 6]>
<style type="text/css">
#menuborder{height: expression(document.getElementById("menu").clientHeight + "px")}
</style>
<![endif]-->
It took me a long time to figure out the expression though, because I'm not good with Javascript, and unfamiliar with the attribute tag thingies. I tried numerous other ones like "offsetheight" and "style.height".
Changing the doctype removed the strange space inbetween the top image, and the middle image, but IE still has it, even with the fix. Perhaps it's not running in standards-compliant mode, hence the same problem as FF had before the Doctype fix? What could be done to get it complying?
[edited by: Xapti at 5:03 am (utc) on Mar. 31, 2007]
[edited by: Xapti at 6:53 pm (utc) on Mar. 31, 2007]
