[css-d] My layout breaks in IE6 and 7

[Josue Martinez]

Hello, everyone. I am working on a website and want to get the layout ready
before I continue to make dreamweaver templates based on the index page.
Here's a little info about the html code before I get into my problems:

I have 3 container divs. Why so many? The first one, called "bodybg," has
the shadow background. I didn't apply it to the body element because
otherwise the layout would break if someone made their browser window small
enough. The second one, called "extradiv," contains the blue abstract bg.
The third one, "container," acts as the real container for the rest of the
elements.

As I already mentioned, the layout breaks in IE7. It's easier if you just
look at it, assuming you have the browser. Here's the URL, followed by the
css code. I want to take it a step at a time, but I'll point out that, as a
comment explains, removing the top border from the masthead will shift the
whole site down in most browsers. Also, I hope to optimize my CSS, but
that'll come later. Thank you very much for your help

http://www.ic.sunysb.edu/clubs/phiota/test/



/*--CSS FILE--*/

/*----basic elements-----------------------------------------------------*/

body {
        text-align: center;
        color: black;
        background-color: white;
        margin: 0;
        padding: 0;
        }
div#bodybg {
        background: transparent url(assets/images/container_shadow.gif) 50% 0 
repeat-y;

        width: 890px;
        margin: -1px auto 0 auto;
        position: relative;
        /*border: 1px solid black;                                              
                /*delete after troubleshooting*/
        }
#extradiv {
        background: transparent url(assets/images/abstract_bg.gif) 50% 0 
no-repeat;

        width: 880px;
        margin: 0 auto;
        /*border: 1px solid silver;                                             
                /*delete after troubleshooting*/
        }
#masthead {
        width: 606px;
        height: 125px;
        padding: 0;
        margin: 0;
        background: white url(assets/images/banner.jpg);

        border-top: 1px solid black;                                    /*If I 
remove the border, the
masthead is pushed down except in IE6 WIN*/
        }
#masthead span {
        display: none;
        }
ol#nav {
        list-style: none;
        margin: 126px 0 0 0;

        padding: 0;
        height: 20px;
        background-color: black;
        color: white;
        font-size: 11px;
        }
ol#nav li {
        background-color: black;
        color: white;
        text-align: left;
        float: left;
        width: 95px;

        height: 20px;
        border-right: 1px solid white;
        margin: 0;
        padding: 0 0 0 5px;
        font-size: 11px;
        }
ol#nav li.first {
        width: 100px;
        }
ol#nav li:hover {
        background-color: red;
        }

ol#nav li a {
        display: block;
        font: 11px "Trebuchet MS", Helvetica, Arial, Tahoma, Verdana, 
sans-serif;
        font-weight: bold;
        text-decoration: none;
        color: white;
        letter-spacing: .1em;
        }

h1, h2 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-weight: normal;
        font-size: 18px;
        }
p {
        font: 10pt/1.4 "Trebuchet MS", Helvetica, Arial, Tahoma, Verdana, 
sans-serif;

        }
#footer {
        background: black;
        clear: both;
        color: white;
        padding: 3px 0;
        }
#footer p {
        font-size: 8pt;
        padding: 5px;
        }
/*----Positioning------------------------------------------------------*/

#container {
        /*background: white url(assets/images/temp_bg.gif) repeat-y; */
        text-align: left;
        position: relative;
        width: 606px;
        margin: 0 auto 0 auto;
        /*border: 1px solid yellow;                                             
                /*delete after troubleshooting*/

        }
#rightside {
        width: 390px;
        margin: 50px 5px 20px 207px;
        padding: 0 0 0 5px;
        /*border: 1px solid red;                                                
                                /*delete after troubleshooting*/
        }
#sidebar {
        position: absolute;
        width: 192px;

        margin: 50px 0 0 5px;
        /*border: 1px solid red;                                                
                        /*delete after troubleshooting*/
        }

/*----Should be taken out of global list and applied to specific
page------------------*/
div#sidebar h2#news {

        font: bold 12px/1.2 "Trebuchet MS", Helvetica, Arial, Tahoma,
Verdana, sans-serif;
        text-align: center;
        background-color: yellow;
        border: 1px solid black;
        border-bottom: none;
        margin-bottom: -1px;

        padding: 1px 0;
        }
div#sidebar ol#newsitems {
        background: white url(assets/images/stripes.gif);
        list-style: none;
        margin: 0;
        padding: 0;
        border: 1px solid black;
        }
div#sidebar ol#newsitems li {

        font: 9pt/1 "Trebuchet MS", Helvetica, Arial, Tahoma, Verdana, 
sans-serif;
        padding: 6px 5px;
        border-bottom: 1px solid black;
        }
div#sidebar ol#newsitems li.last {
        border-bottom: none;
        }
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/