Elastic Width Issue in IE6... [Archive]

Click to See Complete Forum and Search --> : Elastic Width Issue in IE6...

bklynwebgrrl

09-27-2007, 03:40 PM

Of course this looks fine in Firefox...

I have an elastic header. It stretches across the screen just fine in full screen view. But if I have my favorites open and there is a horizontal scroll... which is ok... the header stops short of the entire width and only goes across the visible width that it first had when I opened the page. If I hide my favorites, the header resizes no problem. I've used the min-width workarounds without any luck.

Any enlightenment would be awesome...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body style="margin:0px; padding:0px; background-color:#5992b4; background-image:url(images/bkgd_default.gif); background-repeat:repeat-y;">


<div style="border:0px; padding-left: 1000px; margin-right:-100px;">

<div style="border:0px;">

<div style="border:0px; position:relative; margin-left:-1000px;">

<div style="border-bottom:#379131 2px solid; background-color:#FFFFFF; height:0; height:auto; width:1100px; min-width:1100px; width:auto;">

<div style="background-color:#FFFFFF; width:1100px; min-width:1100px; width:auto;">
<p>The logo for the company goes here.</p>
</div>


<div style="position: absolute;top: 20px;left: 650px;height: 20px;width: 260px;vertical-align: middle;">
<p>The Search Goes Here</p>
</div>


<div style="border:#FF0000 1px solid; position:absolute; top:75px; left:236px; width:746px; padding:0px; margin:0px;">
<ul style="padding:0px; margin:0px;">
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="#" style="text-decoration:none;">LINK</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="#" style="text-decoration:none;">LINK</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="#" style="text-decoration:none;">LINK</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="#" style="text-decoration:none;">LINK</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="#" style="text-decoration:none;">LINK</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="#" style="text-decoration:none;">LINK</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="#" style="text-decoration:none;">LINK</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="#" style="text-decoration:none;">LINK</a></li>
</ul>
</div>

</div>


<div style="width:400px; border:0px; background-image:">
<p>A flash movie goes here</p>
<div style="border:0px; margin-left:60px;">
<p>Side news type items go here.</p>
</div>
</div>


<div style="position:absolute; top:120px; left:415px;">
<p>The main content of the page goes here</p>
</div>

<p> </p>
<p>Footer Goes Here</p>
<p> </p>
</div>

</div>

</div>

</body>
</html>

WebJoel

09-27-2007, 03:44 PM

Do any of these DIVs actually have the expected closing ("</div>")?
Use of 'negative margins' I have often seen is problematic with IE, at least, older versions.

I'll try what you have, -but I do not know what you are attempting to do yet.. :rolleyes:
(back) :

<div style="border:1px solid red; padding-left: 100px; height:30px; margin-right:-100px;">1111111111111111</div>
<div style="border:1px solid green; height:30px; background-color:yellow;">222222222222222</div>
<div style="border:1px solid blue; position:relative; height:30px; margin-left:100px;">3333333333333</div>
<div style="border-bottom:#379131 2px solid; background-color:#efcefc; height:0; height:auto; width:1100px; min-width:1100px; width:auto;">4444444444444</div>
<div style="background-color:#ececec; height:30px; width:1100px; min-width:1100px; width:auto;">5555555555555</div> -I'm lost... have no idea what you are after here..

bklynwebgrrl

09-27-2007, 03:50 PM

Sorry, of course that makes no sense. I striped out the content and put the entire page up...

WebJoel

09-27-2007, 03:54 PM

Seeing your updated 'whole code' this makes a bit more sence. I think you can better accomplish this using widths, margins & floats. Thinking 'flow' whereby elements want to 'stack' towards the upper-left of the screen, DIVs can be arranged to hold the content.

WebJoel

09-27-2007, 04:33 PM

Here's a quick mock-up, not quite what you had but it is tweakable..
should look the same for IE/Fx:

<!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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; height:101%; font-size:100.1%;
padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so this */
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:0; font-size:1.0em; line-height:1.0em; margin:16px 0 12px 0;}

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica, sans-serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.0em;}
</style>

<style type="text/css">
html, body {background-color:#00b5ef; height:100%;}
#wrapper {width:96%; height:auto; margin:10px auto 0 auto; border:3px double silver;}
#header {width:auto; height:30px; background-color:white; padding: 5px 25px;}
#navs {position:absolute; right:-20px; top:-60px; width:350px; border:1px solid gray; height:20px; float:right; margin:25px 75px 20px 0; display:inline;}
#navs li {display:inline; margin:2px 3px; list-style-type:none;}
#navs li a {color:white;}
#navs li a:hover{color:black;}

#content {position:relative; clear:both; margin:-45px 0 0 210px; padding:15px 10px; width:auto; height:100%; background-color:white;}
#content p {margin:15px 10px 12px 15px;}

#footer {width:96%; height:auto; text-align:center; padding:10px 25px; margin:0 auto; border-top:3px double silver;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>

<div id="wrapper">
<div id="header">
<h1 title="header" style="width:300px;float:left;">HEADER HERE</h1>
<form method=post action="" title="form or search here" style="border:1px solid black; float:right;">
form, or SEARCH goes here
</form>
</div>

<div title="FLASH movie here?" style="clear:both; width:200px; height:100px; border:1px solid gray; float:left;">
insert FLASH move here

<div title="Extra News etc?" style="position:absolute; left:30px; top:250px; background-color:#ececec; width:180px; border:1px solid red; height:300px;">
Extra news & etc.
</div>

</div>

<div id="content">
<ul id="navs">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>

<h1 title="Main Content Here" >Main Content Here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy.
<img alt="pic" src="#" style="width:55px; height:75px; float:left; margin:6px; border:1px solid green;" />
In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus.
<img alt="pic" src="#" style="width:55px; height:75px; float:right; margin:6px; border:1px solid green;" />
Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<h2 title="Second Header" >Second Header</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<h3 title="Third, etc." >Third, etc.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

</div>

<div title="Footer section here" id="footer"><p>Footer here</p></div>
</div>

</body>
</html>

bklynwebgrrl

09-28-2007, 08:52 AM

I got excited but then I tried to make the header bleed off the edge and put the nav in the header and got the same problem again. Here's what I did... I've actually been fighting with this sort of thing for the longest time.

Thanks again for all your help....

<!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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; height:101%; font-size:100.1%;
padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so this */
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:0; font-size:1.0em; line-height:1.0em; margin:16px 0 12px 0;}

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica, sans-serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.0em;}
</style>

<style type="text/css">
html, body {background-color:#00b5ef; height:100%;}
#wrapper {width:99%; height:auto; margin:0 0 0 0; border:0px;}
#header {width:auto; height:30px; background-color:white; padding: 5px 25px;}
#navs {position:absolute; right:-20px; top:-60px; width:350px; border:1px solid gray; height:20px; float:right; margin:25px 75px 20px 0; display:inline;}
#navs li {display:inline; margin:2px 3px; list-style-type:none;}
#navs li a {color:white;}
#navs li a:hover{color:black;}

#content {position:relative; clear:both; margin:-45px 0 0 210px; padding:15px 10px; width:auto; height:100%; background-color:white;}
#content p {margin:15px 10px 12px 15px;}

#footer {width:96%; height:auto; text-align:center; padding:10px 25px; margin:0 auto; border-top:3px double silver;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico" />
</head>

<body style="margin:0px; padding:0px; background-color:#5992b4;">

<div id="wrapper">
<div id="header">
<h1 title="header" style="width:300px;float:left;"><a href="default.html" title="Go to the Fox Rothschild LLP homepage."><img src="images/logo_foxRothschild.gif" alt="Go to the Fox Rothschild LLP homepage." border="0" width="206" height="109" /></a></h1>
<form method=post action="" title="form or search here" style="border:1px solid black; float:right;">
form, or SEARCH goes here
</form>
<div style="margin-top:80px; margin-left:-150px;">
<ul style="padding:0px; margin:0px;">
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="about/default.html" style="text-decoration:none;">ABOUT US</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="attorneys/default.html" style="text-decoration:none;">ATTORNEYS</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="practiceAreas/default.html" style="text-decoration:none;">PRACTICE AREAS</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="careers/default.html" style="text-decoration:none;">CAREERS</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="blogs/default.html" style="text-decoration:none;">BLOGS</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="caseStudies/default.html" style="text-decoration:none;">CASE STUDIES</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="offices/default.html" style="text-decoration:none;">OFFICES</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="newsstand/default.html" style="text-decoration:none;">NEWS & PUBLICATIONS</a></li>
<li style="display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;"><a href="events/default.html" style="text-decoration:none;">EVENTS</a></li>
</ul>
</div>
</div>

<div title="FLASH movie here?" style="clear:both; width:200px; height:100px; border:1px solid gray; float:left;">
insert FLASH move here

<div title="Extra News etc?" style="position:absolute; left:30px; top:250px; background-color:#ececec; width:180px; border:1px solid red; height:300px;">
Extra news & etc.
</div>
</div>
<div id="content">
<h1 title="Main Content Here" >Main Content Here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy.
<img alt="pic" src="#" style="width:55px; height:75px; float:left; margin:6px; border:1px solid green;" />
In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus.
<img alt="pic" src="#" style="width:55px; height:75px; float:right; margin:6px; border:1px solid green;" />
Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<h2 title="Second Header" >Second Header</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<h3 title="Third, etc." >Third, etc.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

</div>

<div title="Footer section here" id="footer"><p>Footer here</p></div>
</div>
</body>
</html>

WebJoel

09-28-2007, 10:43 AM

Something that you do not need to keep doing, is this:
<body style="margin:0px; padding:0px;">

because we have this, earlier:
* {margin:0; padding:0;}

which has already removed ALL margins and padding from EVERY element. -Saves you much time and redundant coding, over & over again. :)

Basically, just move a few things around.
<!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" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; height:101%; font-size:100.1%;
padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so this */
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */}
html>body {font-size:small; height:auto;}/* Assist IE6 and earlier, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:0; font-size:1.0em; line-height:1.0em; margin:16px 0 12px 0;}

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica, sans-serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:17px 0 9px 10px;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1.0em;}
</style>

<style type="text/css">
html, body {background-color:#5992b4; height:100%;}
#wrapper {width:auto; height:auto;}
#header {width:auto; height:143px; background-color:white; padding: 5px;}
#header img {width:206px; height:109px; border:1px solid red; margin-left:30px;background-color:silver; display:block;}/* this is the branding image here */

#navs {position:absolute; top:118px; right:10px; padding-top:4px; z-index:500; width:auto; border:1px solid silver; height:25px; background-color:none;}
#navs li {display:block; height:22px; margin:6px 3px 0; display:inline;font-family:Arial, Helvetica, sans-serif;font-size:11px;color:#999999;font-weight:bold;padding: 2px;border: #ffffff solid 1px;}

#x-traNews {position:absolute; left:14px; top:275px; padding:15px 6px 15px 10px;; background-color:#ececec; width:165px; border:1px solid red; height:300px; overflow-y:scroll;}/* "Extra News" stuff */
#flashMov {position:absolute; left:10px; top:160px; height:100px; width:190px; border:1px solid green;}/* FLASH movie stuff */

#navs li a {color:black; text-decoration:none;}
#navs li a:hover{color:red; position:relative; top:3px; border-bottom:2px solid #5992b4;}

#content {position:relative; clear:both; margin-left:210px; border-top:8px solid #5992b4; padding:15px 10px; width:auto; height:100%; background-color:white;}
#content p {margin:15px 10px 12px 15px;}

#footer {width:auto; height:auto; text-align:center; padding:10px 25px; margin:0 auto; border-top:3px double silver;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico" />
</head>

<body>

<div id="wrapper">
<div id="header">

<form method=post action="" title="form or search here" style="border:1px solid black; padding:10px; float:right; margin:40px 10px 0 0;">
form, or SEARCH goes here
</form>

<a href="default.html" title="Go to the Fox Rothschild LLP homepage." ><img src="images/logo_foxRothschild.gif" alt="Go to the Fox Rothschild LLP homepage." /></a>

<ul id="navs">
<li><a href="about/default.html">ABOUT US</a></li>
<li ><a href="attorneys/default.html">ATTORNEYS</a></li>
<li><a href="practiceAreas/default.html">PRACTICE AREAS</a></li>
<li><a href="careers/default.html">CAREERS</a></li>
<li><a href="blogs/default.html">BLOGS</a></li>
<li><a href="caseStudies/default.html">CASE STUDIES</a></li>
<li><a href="offices/default.html">OFFICES</a></li>
<li><a href="newsstand/default.html">NEWS & PUBLICATIONS</a></li>
<li><a href="events/default.html">EVENTS</a></li>
</ul>

</div>

<div id="flashMov" title="FLASH movie here?">
insert FLASH move here</div>

<div title="Extra News etc?" id="x-traNews">
<h4 title="Extra news & etc.">Extra news & etc.</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy.
<img alt="pic" src="#" style="width:55px; height:75px; float:left; margin:6px; border:1px solid green;" />
In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus.</p>

</div>

<div id="content">
<h1 title="Main Content Here" >Main Content Here</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy.
<img alt="pic" src="#" style="width:55px; height:75px; float:left; margin:6px; border:1px solid green;" />
In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus.
<img alt="pic" src="#" style="width:55px; height:75px; float:right; margin:6px; border:1px solid green;" />
Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<h2 title="Second Header" >Second Header</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<h3 title="Third, etc." >Third, etc.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

</div>

<div title="Footer section here" id="footer"><p>Footer here</p></div>
</div>
</body>
</html> Moved your repetitve inline-styles from the navigation's li's, to the STYLE's #nav li {} and saved a hundred or so bytes, same for the repetitive inline-style for the navigation li a's, again, to the STYLE's #nav li a {}. You want to *seperate* the CSS from the HTML wherever possible. The HTML is the 'content' and the CSS is the 'presentational stylings'. Keeping them seperate makes your pages load faster, gives greater key-word density for indexing/SEARCH 'bots (the SEARCH-bots aren't wading through your inline-style css), -and reduced bandwidth consumption is good for everyone.
I tweaked the navigation links a bit... if you don't want the 'underline on hover', remove the "border-bottom:2px solid color;" from the "#navs li a:hover;".
-It really is just this simple to affect changes on an entire page, by changing just *one line* in a CSS file. :D Try to avoid the 'inline-style' to make identical changes on same-elements.

This pages still looks very similar in IE vs. Fx., and validates with TIDY.