CSS looks good in firefox but not in IE

[givitumee]

I have a problem with my website:
http://www.eecs.tufts.edu/~pgoran01/abet/

I'm using tabbed menus, all of them pop up when you login.

However, the interface looks good in firefox but when I open it in IE the background color of the subtab bar seems to stop halfway down and split through the subtab text. I got this CSS tab template somewhere on the web and I can't find it anymore. It seems that the CSS code I'm using it's working fine on Firefox but I need it to work on all browsers. Can someone see where my problem is. Here is the CSS code I'm using:

html {
    min-width: 600px;
    background: #4169E1;
    padding: 0.5em 2em 3em 2em;
}
 
body, div, td, th, h2, h3, h4 { /* redundant rules for bad browsers  */  
    font-family: verdana,sans-serif;
    font-size:    x-small;
    voice-family: "\"}\"";
    voice-family: inherit;
    font-size: small;
    color: #333;
}  
 
a { color: #06C; }
a:hover { color: #333; }
a:active { color: #000; }
 
p { line-height: 140%; }
 
h1 {
    font-family: trebuchet ms,arial,verdana,sans-serif;
    font-weight: bold;
    font-size: 140%;
    color: #333;
    padding-bottom: 2px;
    border-bottom: 1px dotted #CCC;
    margin: 0;
}
 
.note {
    background: #EEE;
    padding: 4px;
    font-family: tahoma,verdana,sans-serif;
    font-size: 85%;
    line-height: 130%;
}
 
#main {
    text-align: left;
    border: 1px solid #666;
    background: #FFFDF3; 
    clear: both;
    width: 98%;
    margin-top: -1px;
}
 
#bodyarea {
    padding: 20px;
    min-height: 300px;
}
 
#topbar {
    padding-bottom: 0.5em;
    font-family: trebuchet ms,verdana,sans-serif;
    font-weight: bold;
    font-size: 200%;
}
 
#topbar a { text-decoration: none; color: white; }
 
#topbar a:hover { text-decoration: underline; }
 
/*///////////// Tabs Code ////////////*/
 
#tabs {
    font-family: tahoma,verdana,sans-serif;
    font-size: 85%;
    clear: both;
    text-align: center;
}
 
#tabs ul {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
#tabs li { float: left; }
 
#tabs a,span { width: 90px; }
 
#tabs span {
    position: relative;
    top: 0;
    margin: 0 2px 0 0;
    float: left;
    background: #FFF3B3;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    padding: 6px 4px 6px 10px;
    text-decoration: none;
    color: #333;
}
 
#tabs a {
    position: relative;
    top: 0;
    margin: 1px 2px 0 0;
    float: left;
    background: #FFFAE1;
    border-right: 1px solid #AAA;
    border-top: 1px solid #AAA;
    border-left: 1px solid #AAA;
    padding: 5px 4px 5px 10px;
    text-decoration: none;
    color: #333;
}
 
#tabs a:hover {
    background: #FFF7CD;
    position: relative;
    top: 0;
    padding: 5px 4px 6px 10px;
    margin-top: 0px;
}
 
#tabs a.active {
    position: relative;
    top: 0;
    margin: 0 2px 0 0;
    float: left;
 /*    background: #FFF3B3; */
        background: #FFDEAD;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    padding: 6px 4px 6px 10px;
    text-decoration: none;
    color: #333;
}
 
#tabs a.active:hover {
    position: relative;
    top: 0;
    margin: 0 2px 0 0;
    float: left;
    background: #FFF3B3;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    padding: 6px 4px 6px 10px;
    text-decoration: none;
    color: #333;
}
 
#subtabs ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
 
#subtabs li {
    float: left;
    padding: 0 8px 0 8px;
    border-left: 1px solid #CCC;
    white-space: nowrap;
}
 
#subtabs li.list2 {
    float: right;
    padding: 0 8px 0 8px;
    border-left: 1px solid #CCC;
//    white-space: nowrap;
}
 
#subtabs li:first-child { border-left: none; }
 
#subtabs {
    font-family: tahoma,verdana,sans-serif;
    font-size: 85%;
    background: #FFDEAD;
 
    color: #666;
    padding: 5px 7px 7px 7px; /* for All other Browsers */
 
 
}
 

[tolkienarda]

Hi

I didn't see anything blatent in the code but somthing you should try is a css valadation program, if you are using firefox you should download the webdeveloper toolbar which is awesome and under tools there is a series of valadate programs use the valadate css and validate html this will check and make sure youre code is completely compliant, most pages have some errors and most of the time those don't matter. but this might pick up somthing everyone elce is overlooking. i havent installed it on my new laptop yet or i would do it for you.

another thing to look into is docutype descriptions and quirk mode in IE do a search on w3schools for quirk mode and valadate programs. what happens when your dtd is wrong your browser will load in quirk mode which means that IE sees the code as if it were an older browser, which may not accept your css or maybe some code in it.

eric

[drhowarddrfine]

Also, see the sticky at the top of this forum.

[givitumee]

Also, see the sticky at the top of this forum.

I added the DTD type as you said in the sticky. This was very helpful so now my fonts are all the same size in Firefox and in IE. But still in IE the colored bar behind the sub tabs isn't working right. It's getting cutoff halfway down. It's strange that this fixed the font problem but not the tabs problem. IE is really stubborn why doesn't it just work as well as firefox? I'm no CSS expert so I could use some help figuring out why there is a difference when using these two browsers.

The website is:
http://www.ece.tufts.edu/~pgoran01/abet

[tolkienarda]

i've been looking over your page in ie and firefox the differences aren't very big and i am thinking that the problem either that some settings are different in the firefox and ie preferences or it could be just that IE and firefox translate code sightly differently. the differences i see are that the white box over the blue bg is larger in firefox and there is a small line between the tab and the header of the content box also in firefox and the dotted lines are different, (more dashed in IE and dots if firefox) if there are more differences than these then there is probably somthing different in our browser configs if not then it is just a difference between the two and there is nothing that can be done. if firefox were exactly the same as ie it wouldn't be the awesome browser it is.

eric

[drhowarddrfine]

IE is the worst browser on the planet and nine years behind web standards. But, beyond that, you have 41 html errors and, potentially, some css errors but clean up the html first.

Your first one is you must use quotes around class and id names, eg, class="list"