CSS problems between FF, IE6 and IE7

[mcvickj]

I have been beating my head against the wall for the last week trying to get the alignment issues hashed out between Firefox and IE. I started working on this site using Firefox and everything was going great. That is until I looked at it under IE.

Here is the link to the site. http://www.grdl.org/TEST/

I want to keep the spacing between #top_menu, #header, #content_outer and #footer. When viewing the site under IE the majority of the spacing between the 4 sections disappears. Also the location of the text inside #header moves.

I have been reading about the !important hack but either it is ignoring it or I'm not correcting the right lines in the CSS code. Here is a link to the current CSS code http://docs.google.com/Doc?id=ddth887t_0cddvjb

I am a newbie to HTML/CSS/PHP and I am learning as I go. The Web Developer addon for Firefox has helped me decipher some of the CSS.

I have found the code that I am trying to change so I can get the look to stay consistent between Firefox and IE.

} <---LN 141
#header {
background-color : #FFFFFF;
height : 58px;
background-repeat : repeat-x;
float : left;
background-image : url(../images/header.jpg);
margin-top : 10px !important;
margin-top : 20px;
margin-bottom : 10px !important;
margin-bottom : 20px;
border : 1px solid #000000;
width: 100%;
}



} <---LN 193
#content_outer {
width : 100%;
background-repeat : repeat-x;
float : left;
border : 1px solid #010101;
background-color : #FFFFFF;
color : #666666;
background-image: url(../images/content_bg.gif);
padding-bottom: 25px;
margin-bottom: 10px !important;
margin-bottom: 20px;
}

After reading up on the !important hack I am pretty certain I am using it correctly but IE6 and IE7 are still not displaying the site like I would expect. What is really strange is I used the same hack for the header to get the text aligned properly and it is working it IE6 but IE7 isn't working.

} <---LN 626
.maintitle {
font-family : "Courier New", Courier, monospace;
color : #0D1448;
font-weight : bolder;
float : left;
padding-left : 20px !important;
padding-left : 10px;
font-size : 36px;
padding-top: 19px !important;
padding-top: 2px;

}

Should I be going about this a different way? I'm hoping a fresh pair of eyes will be able to steer me in the right directions.

 

[mooglekit]

If you're going to use a background image of a fixed width you might want to fix the width of the page...if you notice when you narrow the browser your image is cut off on the right because the header (and main content area for that matter) changes widths...personally I'd create a minimum acceptable width for your .maintitle class so you don't lose the dartboard image...I can look more closely later..don't have IE7 at work (thank god...)

Any way you could PM the whole CSS for the Joomla template you're using??