Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css" media="screen">
body{
text-align:center;
font-size:0.8em;
}
#holder{
margin:auto;
width:600px;
border-width:0 10em 0 1em;
border-style:solid;
border-color: #de8936;
}
#content{
float:left;
width:570px;
margin:0;
padding:1em 15px;
}
#sidebar{
float:left;
margin:0 -20em 0 0;
width:9em;
padding:0.5em;
background:#44607d;
}
</style>
</head>
<body>
<div id="holder">
<div id="content">Some text</div>
<div id="sidebar">Some text</div>
</div>
</body>
</html>
With IE version under 7(according to browsershots.org and tested with full source, hopefully I didn't remove anything relevant) sidebar is behind holder border, but I want it on top of the border.
Also as a more minor issue, in Opera and IE7, it won't stay on border precisely being either slightly wider or narrower.
Also, when defining a width on an element, it is typically not good practice to also define a padding to that element. It's best to define padding on the child elements instead. Otherwise, the padding & width that you define end up adding up together and increasing the overall width of the element in some browsers. This is badly affecting your content division causing a horizontal and vertical scrollbar to appear. It displays like this in both FF and IE7 for me. Border widths also add on to the ultimate size of a fixed width element with some browsers.
I would encourage you to try replacing some of you relative EM measurements with PX units... EM measurements are relative to the elements font size whereas PX units are relative to the screen resolution.
Problems I've seen so far is that sidebar is in the right place but behind holder or that 10em border and 10em sidebar aren't of equal width. One IE 5.x version showed it under and shifted but I wouldn't consider that a big issue if it were the only one. I haven't tried z-index yet, because I've always thought it's for absolute positioning.
When it comes to padding and margins adding width to an element then my experience so far is that avoiding quirks mode let's you rely on room-taken=width+padding+margin+border. At least in newer browsers.
Do I get it right that you're seeing a horisontal/vertical scrollbar? I sure didn't.
At the moment I wouldn't like to give up em widths and would like to know why 10!=10 and if there's a way to make IE6 (at least) to display like IE7 does, even if it needed css applied only to IE6 alone. And in the end showing sidebar on top is far more important than 10!=10 because the ladder doesn't make my site less usable and is more my perfectionism issue.
Added position:relative; to floated sidebar and now it displays in all browsers. IE5.x makes content narrower and therefore sidebar is shifted but it is usable. In IE other versions sidebar is about 1px narrower than border and in Opera as much wider.
I'd be great if someone could come up with further improvements as I've run out of ideas and can't access IE5 othr than using browsershots.
