CSS - Problem With Css In Older Ie Versions

I just finished modifying an open CSS/XHTML webpage and it displays perfectly on IE7.

When the page is viewed on other IE versions, it is completely jumbled (i.e. footer at top of page, hover boxes on navigation bar take up whole screen, borders exceed defined 1000px, etc.)

I am a novice at CSS and am having difficulty fixing these issues. Any help would be greatly appreciated.

I'v attached screen shots of the correct and incorrect layouts.

I have 2 css formatting files: setup and text

Here's SETUP.CSS:

/* NON-HEADER */
*{padding:0; margin:0;}
body {font-size:62.5%; background:rgb(250,250,250) url(../img/bg_sides.gif); font-family:Verdana,arial,sans-serif; margin-bottom:40px} /*Font-size: 1.0em = 10px when browser default size is 16px*/
.page-container {width:1000px; margin:0px auto; margin-bottom:25px; font-size:1.0em;}
.page-footer {width:1000px; margin:0px auto; margin-top:20px; margin-bottom:10px; font-size:1.0em; text-align:center;}
.main {clear:both; width:1000px; padding-bottom:30px; background:rgb(255,255,255); top left repeat-y;}
.main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:940px; margin:30px 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.footer {clear:both; width:1000px; padding:1.0em 0 1.0em 0; background:transparent; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}

/* --- For alternative headers START PASTE here --- */

/* HEADER */
.header {width:1000px; font-family:"TREBUCHET MS",arial,sans-serif;}
.header-top {width:1000px; height:100px; background:rgb(195,0,0); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-middle {width:1000px; height:30px; background:transparent; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-bottom {width:1000px; height:300px; background:rgb(204,0,0) repeat-y;}
.header-breadcrumbs {clear:both; width:1000px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;}

/*******************/
/* HEADER SECTION */
/*******************/
.sitelogo {width:400px; height:100px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }
.sitepic {width:1000px; height:300px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }.sitename {width:300px; height:45px; position:absolute; z-index:1; margin:20px 0 0 90px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.sitename h1 {font-size: ;}
.sitename h2 {margin:-4px 0 0 0; color:rgb(125,125,125); font-size:120%;}
.sitename a {text-decoration:none; color:rgb(125,125,125);}
.sitename a:hover {text-decoration:none; color:rgb(50,50,50);}

.nav0 {width:350px; position:absolute; z-index:2; margin:25px 0 0 0; margin-left:550px !important /*Non-IE6*/; margin-left:553px /*IE6*/;}
.nav0 ul {float:right; padding:0 20px 0 0;}
.nav0 li {display:inline; list-style:none;}
.nav0 li a {padding:0 0 0 3px;}
.nav0 a:hover {text-decoration:none;}
.nav0 a img {height:14px; border:none;}

.nav1 {width:350px; position:absolute; z-index:3; margin:10px 0 0 650px;}
.nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;}
.nav1 li {display:inline; list-style:none;}
.nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(255,255,255); text-decoration:none; font-size:100%;}
.nav1 a:hover {text-decoration:none; color:rgb(145,145,145);}

.sitemessage {width:400px; height:120px; position:absolute; z-index:1; margin:30px 0 0 480px; color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/; overflow:hidden /*IE6*/;}
.sitemessage h1 {width:400px; text-align:right; font-size:230%;}
.sitemessage h2 {float:right; width:320px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;}
.sitemessage h3 {float:right; width:320px; margin:10px 0 0 0; text-align:right; font-size:140%;}
.sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);}
.sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);}

/*Drop-down menu*/
.nav2 {float:left; width:1000px; border:none; background:transparent url(../img/nav-bar-main.jpg) no-repeat; color:rgb(255,255,255); font-size:110%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; }
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(255,255,255);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover a {background-color:rgb(210,210,210); border: solid 1px rgb(130,130,130); text-decoration:none; color:rgb(80,80,80);} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:140px; position:absolute; z-index:999;}
.nav2 ul li:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none; border: solid 1px rgb(130,130,130); color:rgb(80,80,80);} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:140px; position:absolute; z-index:999;}
.nav2 ul li a:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/


.header-top .searchform {float:right; width:285px; padding:0 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/;}
.header-top .searchform form fieldset {float:right; border:none;}
.header-top .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; font-family:verdana,arial,sans-serif; font-size:120%; }
.header-top .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:transparent url(../img/search-button.gif); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;}
.header-top .searchform input.button:hover {cursorointer; background:transparent url(../img/search-button.gif);}

/******************/
/* MAIN SECTION */
/******************/

/* MAIN CONTENT */
.column1-unit {width:950px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column2-unit-left {float:left; width:600px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column2-unit-right {float:right; width:300px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column3-unit-left {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}
.column3-unit-middle {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:50px;}
.column3-unit-right {float:right; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;}

/********************/
/* FOOTER SECTION */
/********************/
.footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;}
.footer p.credits {font-weight:normal;}
.footer a {text-decoration:underline; color:rgb(125,125,125);}
.footer a:hover {text-decoration:none; color:rgb(0,0,0);}
.footer a:visited {color:rgb(0,0,0);}

/******************/
/* CLEAR FLOATS */
/******************/
.page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear-contentunit {clear:both; width:940px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);}

Here's TEXT.CSS:

/******************/
/* MAIN SECTION */
/******************/

/* MAIN CONTENT */
.main-content h1.pagetitle {margin:0 0 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px rgb(225,225,225); font-family:"georgia",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:220%;}
.main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190); font-family:"georgia",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:220%;}
.main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"georgia",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:210%;}
.main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;}
.main-content h3 {clear:both; margin:-.5em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(125,125,125); font-weight:normal; font-size:130%;}
.main-content h1.side {clear:none;}
.main-content h2.side {clear:none;}
.main-content h3.side {clear:none;}

.main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:170%;}
.main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-size:140%;}
.main-content h6 {clear:both; margin:0 0 .25em 0; line-height:1em; font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:100%;}
.main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;}
.main-content p.center {text-align:center;}
.main-content p.right {text-align:right; margin-right: 10px}
.main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;}
.main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;}

.main-content table {clear:both; width:880px; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);}
.main-content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:rgb(175,175,175); text-align:left; color:rgb(255,255,255); font-weight:bold; font-size:110%;}
.main-content table th {height:3.0em; padding:2px 20px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; color:rgb(80,80,80); font-weight:bold; font-size:110%;}
.main-content table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:110%;}
p.caption {clear:both; margin:0.5em 0 2.0em 20px; text-align:left; color:rgb(80,80,80); font-size:110%;}

.main-content ul {list-style:none; margin:0.5em 0 1.0em 0;}
.main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(../img/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;}
.main-content ol {margin:0.5em 0 1.0em 30px !important /*Non-IE6*/; margin:0.5em 0 1.0em 35px /*IE6*/;}
.main-content ol li {list-style-positionutside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;}

.contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);}
.contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);}
.contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;}
.contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;}
.contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
.contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

.loginform {width:160px; margin:-10px 20px 0 20px;}
.loginform p {clear:both; margin:0; padding:0;}
.loginform fieldset {width:160px; border:none;}
.loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;}
.loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;}
.loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;}
.loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;}
.loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;}
.loginform input.button:hover {cursorointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);}

/********************/
/* COMMON CLASSES */
/********************/
.main img {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:1px solid rgb(150,150,150);}
.main img.center {clear:both; float:none; display:block; margin:0 auto; padding:1px; border:1px solid rgb(150,150,150);}
.main img.right {clear:both; float:right; margin:3px 0 7px 10px; margin-right:10px; padding:1px; border:1px solid rgb(150,150,150);}

.main a {color:rgb(70,122,167); font-weight:bold; text-decoration:none;}
.main-content h1 a {color:rgb(70,122,167); font-weight:normal; text-decoration:none;}
.main a:hover {color:rgb(42,90,138); text-decoration:underline;}
.main a:visited {color:rgb(42,90,138);}

.main a img {border:solid 1px rgb(150,150,150);}
.main a:hover img {border:solid 1px rgb(220,220,220);}

Hi There,

I added a css dropdown menu to a dev site I am working on and although it works just fine in IE7 and FF it is broked in IE 6 & <

Here is the page

It seems that the IE conditional statements are kicking in for browsers older than and including IE6, but it just busts the menu - I've tried all sorts but to no avail.

It is the 'browse' menus.

Any pointers would be greatly appreciated

Hi,

I'm working on a full CSS-based layout:
http://www3.telus.net/mguzman/testnewsite/

I just have a few questions though.

Obviously, NN4, being the .... browser that it is won't really display CSS correctly at all - I've stuck in a DIV that is hidden using CSS that basically tells the user to upgrade to Mozilla or Opera. Is this considered good practice and professional?

How else can one deal with standards-incompliant browsers like NN or IE?

Please keep in mind that this layout may be used as a design for a business.

Also, in IE 5.0 (5.5 seems okay) and IE 4.x, the page displays *mostly* correctly, except that the DIV with the content is shifted down till after the floated left menu. Any suggestions on how this can be solved while still maintaining compatibility with other platforms?

In NN 6, it appears that the background (and/or background-image) CSS properties aren't supported. Generally, how is this issue dealt with?

Thanks so much! ^^

Hello all,
just when I thought IE6 and all its quirks was behind us I am faced with a very strange issue that can only be replicated in one version of IE8 that a client has... You'll find attached a layout with header, middle content area that stretches to fill remaining space (and has a background image that uses JQuery bgstretcher to fill its background with an image), and a footer that just stays at the bottom in IE7, IE8 and FF. Problem is, that in a client's PC with Explorer 8 that same footer is not a small stripe but it goes way up into the content area and takes up 1/3 of the screen space at the bottom. I can't replicate this in any of my IE7s or IE8s I looked around and I'm going mad. Is there something in the CSS that I could maybe take out or change or does someone know of any IE8 bug? Thanks.

All html + css is here (208K pls remove gaps to get link):
www . sendspace . com / file / ool8zx