 dont you just love bill and his idea of what standards are for.
Instead of positioning things absolute I tend to float everything to the left.
heres an example
Code:
<html>
<head>
<style type="text/css">
#page{float:left;
width:90%;
height:100%;
background:lightgrey;
border:1px solid black;
}
#top{float:left;
margin-top:2%;
margin-left:1%;
width:95%;
height:10%;
background:white;
border:1px solid black;
}
#menu{float:left;
margin-left:1%;
margin-top:1%;
width:13%;
height:80%;
background:white;
border:1px solid black;
}
#content{float:left;
margin-left:1%;
margin-top:10px;
width:81%;
height:80%;
background:white;
border:1px solid black;
}
#footer{float:left;
margin-top:1%;
margin-left:1%;
height:4%;
width:95%;
background:white;
border:1px solid black;
}
</style>
</head>
<body>
<div id="page">
<div id="top">header</div>
<div id="menu">
menu
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
As you can see everything is floating to the left. This removes the need for absolute positioning and all the headaches that come with things been absolute.
Load up the html you will see it appears both the same in NN or IE infact I will be so bold as to say that any broswer will disaply it as it should look (providing they are css compliant).
The bueaty of float is that you need not think too much about about positioning as float:left will always stack your divs to the left.
Also take note of the use of % instead of px based positioning. 1px in firefox can resemble 10 in IE (ok exageration) but you all get my point.
Of course to make thing really easy on us all we should get Bill to code his browser to everyone elses standard (but yea bill knows best).
Hope I have helped some.
P.S.
Of course when you come to adding content you will need to drop the height attributes or change them to auto. This will keep the fluid feel of the site with everything floating inside the page tag.
Ibbo
Last edited by ibbo; 05-05-2005 at 10:22 AM..
|
