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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html {
background-color:#9ec1a0;
}
body {
font-size: 76%;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
text-align:center; /*centered in ie*/
color:#000;
}
/*layout items*/
#logo {
height:100px;
width:56em;
margin: 0 auto;
}
.clear {
clear:both;
}
#wrapper { /*keep layout tidy*/
width:56em;
margin: 0 auto;
text-align:left;/*puts text back properly*/
border:1px solid #999;
background-color:#e6e6e6;
}
#messaging {
height:10em;
}
#photonav {
float:left;
}
#messagphoto {
width:37em;
height:8em;
overflow:hidden;
}
#navigation {
width:37em;
height:2em;
background-color:#ccc;
}
#message {
float:right;
width:18.9em;
height:10em;
background:#00a14e url(images/darkgreenbox.gif) no-repeat top left;
overflow:hidden;
}
#maincontent {
background-color:#fff;
float:left;
width:37em;
}
#supcontent {
float:right;
width:18em;
}
#footer {
clear:both;
background-color:#00a14e;
overflow:hidden;
}
/* main navigation settings */
#navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#navigation li {
float: left;
margin: 0 0 .15em 0;
padding: 0;
text-align: center;
border-right:2px solid #fff;
}
#navigation #navind {
border-right:none;
}
#navigation li a {
background-color: #ccc;
height: 2em;
font:bold 1em/2em;
width: 12.18em;
display: block;
text-decoration: none;
text-align: center;
}
#navigation li a:hover {
text-decoration:none;
background-color:#666;
}
/* supplemental navigation controls */
#logosupnav {
float:right;
margin-top:80px;
text-align:right;
width:25em;
}
#logosupnav ul {
list-style:none;
padding:0;
margin:0;
}
#logosupnav li {
display:inline;
margin:0 0 .5em 2.1em;
font-size:.95em;
font-weight:normal;
}
/*typographic settings*/
a {
text-decoration: none;
font-weight: bold;
color: #000;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
margin:.5em 0 0 16px;
}
#supcontent h3, #supcontent p {
margin:.5em 16px 0 0;
}
#message p {
margin-right:12px;
color:#ccc;
font-size:1.2em;
line-height:1.5em;
}
h1 {
font-size: 1.7em;
font-weight: bold;
margin-top: .75em;
margin-bottom: 0;
}
#message h1 {
color:#fff;
font-weight: normal;
margin-right:12px;
}
img, img a {
border: 0;
margin:0;
padding:0;
}
p {
font-size: 1.0em;
line-height: 1.7em;
margin:0 1em 1em 16px;
}
</style>
</head>
<body>
<div id="logo"><!--top is outside wrapper because of wrapper border -->
<div id="logosupnav">
<ul>
<li>one</li><li>two</li><li>three</li><li>four</li></ul>
</div><!--end logosupnav --><div class="clear"></div></div><!--end logo -->
<div id="wrapper">
<div id="messaging">
<div id="photonav">
<div id="messagphoto">
<p>photo</p>
</div><!--end messagphoto -->
<div id="navigation">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li id="navind"><a href="#">three</a></li>
</ul>
</div><!--end navigation -->
</div><!--end photonav -->
<div id="message">
<h1>section message </h1>
<p>message text</p>
</div><!--end message -->
</div><!--end messaging -->
<div id="maincontent">
<p>text text text text text text text text text text text text text text</p>
</div><!--end main -->
<div id="supcontent">
<h3>sub links</h3>
</div><!--end supcontent -->
<div class="clear"></div>
<div id="footer">
<p>address phone number copyright email link</p>
</div><!--end footer -->
</div><!--end wrapper div -->
</body>
</html>
#footer p {
color:#fff;
font-size:1em;
padding:.5em;
}My main concern was having the #message div stay where it is, not push other stuff down. It looked great at the original size (19em) in ff and ie on the mac, but ie pc pushed content down.
So, was that just a function of ie not liking 100% width measurements, or there something inherent in em widths that could cause problems?
So, was that just a function of ie not liking 100% width measurements, or there something inherent in em widths that could cause problems?
it's not IE not liking 100% in this case it's rounding differences as to the pixel calculation of the em width.
when using em's you cannot get pixel perfection x-browser
e.g. you have set your body font size to 76%, now presuming that a user is sitting at factory default of 16px, 76% of 16px = 12.16px this 12.16px then becomes 1em now some browsers may well round it off at this stage but others will round it off after the calucualation goes on a step..
your wrapper div is set to 56em which is 56*12.16 = 680.96px now when I tested this in firefox it was actually only 679px wide so already there is some rounding going on between the two calculations already.
but then even if the div was 680px wide..
the message div at 19em would = 19*12.16 = 231.04
and messagphoto at 37em would = 37*12.16 = 449.92
add the two together and you get 680.96 which is bigger that 679/680 so this is why IE was dropping down I think IE rounds up if required whereas FF always seems to round down.
short answer is you cannot know what the user font-size and indeed the idea behind using ems is so it does not matter, so you don't really need to do these calulations but still you have to build in a margin for rounding differences no matter which font size and the 0.5em reduction on one of the divs should do that ;)
Suzy
however I forgot to mention in order to stress test your final design you should view it all text sizes in IE and also zoom both up and down very high and very low in FF that should show you if 0.5em is indeed enough to cope with most situations without doing any calculations
Good Luck
