Forum Moderators: not2easy
Is there a better way to code the containers?
program -----------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css" media="screen">
body {
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
#outsidebox {
height:100%;
width:100%;
background-color: #b0a07e;
text-align: left;
margin:0;
}
#insidebox {
position:relative;
background-color: #cfbd9c;
margin:3% 3% 3% 3%;
padding:1% 1% 1% 1%;
}
#menu {
position:relative;
/*height:100%; */
width:97.4%;
background-color: #b0a07e;
margin-left:1%;
/*float:left; */
}
#header {
position:relative;
height:190px;
width:75%;
background-color: #cfbd9c;
background-repeat:no-repeat;
margin-left:1%;
}
#mainbody {
width:75%;
position:relative;
background-color: #2d4632;
margin-left:1%;
color:#FFFFFF;
text-align:center;
}
#rightsidebar {
float:right;
width: 22%;
height: 400px;
background-color: white;
margin-right:1.63%;
}
#innerrightsidebar {
float:left;
width: 17%;
height: 500px;
color:white;
background-color: #05164c;;
padding-left:10px;
}
#footer {
position:relative;
width: 70%;
margin-top:8px;
margin-left:4%;
text-align:center;
background-color: #cfbd9c;
color:white;
font-size:11px;
}
.solidblockmenu ul{
margin: 0;
/*padding: 0;*/
float: left;
font: 11px Arial;
/*width: 100%;*/
border: 1px solid #05164C;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display:inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
height: .2em;
font: 12px Arial;
line-height:4px;
/* width:8em; */
text-align:center;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li a.current{
color: black;
background: transparent url(media/blockactive.gif) center center repeat-x;
}
</style>
</head>
<body>
<div id="outsidebox">
outside box
<div id="insidebox">
inside box
<div id="menu">
menu here
</div><!-- menu -->
<div id="rightsidebar">
rightsidebar
</div><!-- rightsidebar -->
<div id="header">
header (logo here)
</div><!-- header -->
<div id="mainbody">
<p>mainbody</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- mainbody -->
<div id="footer">
footer</div><!-- footer -->
</div><!-- insidebox -->
</div><!-- Outside box -->
</body>
</html>
In firefox (3) I don't see any problem with the page, at any window size. (when you say screen resolution, I assume you mean window size)
In IE6 I don't see the sidebar appear at all at any window size, and there are several other bugs as well.
Generalyl the point of different screen sizes is that so people can fit more content on their page without wasting space. If you are sizing all margins and menus with dynamic relative widths, you end up wasting lots of space.
A more easy to manage design, and one which would be more efficent for the user, would be to have fixed withs sides (in EM units if it contains text), and have the center/main content area take up all remaining width - the default behaviour of a div.
There's also very little point in assigning hieghts to many containers, and if you do, use EMs, so that people don't get ocntent cut off using minimum font sizes, for instance.
However I can tell you that it is your usage of very specific percentages for widths and margins (same would happen with em's to an extent) which are probably causing rounding differences in calculations dependant on screen resolution. There would be no way to perfect that as you cannot tell which resolution someone is using all the time!
If the design is meant to be 100% flexible then perhaps the right thing to do is not try for pixel perfection and amend the colors and borders to suit better so while there may still actually be "gaps" (there might be the three pixel gap in IE6 anyway) they won't be visible to the eye nor will they affect the pages x-browser?
