CSS Layout not working in IE7 (all other browsers are fine)

Question

I'm working on a project whereby the University has full control over the source code (Drupal) and all I can do is CSS Overrides in the theme area.

The problem that I'm having is that the header is not staying where it is supposed to in IE7.
IE8 along with Firefox, Chrome, and Safari work exactly as expected.

Here is my CSS Overrides

#uc-splash div.uc-section, div.splash{width:790px !important; height:184px !important;}
#uc-navigation div.secondary, #uc-navigation div.secondary a { color: #fff;}
#uc-navigation .primary, #uc-navigation .secondary {background-color:#14195b !important;}
#uc-navigation div.secondary, #uc-navigation div.secondary a {color:#fff !important;}
#uc-navigation div.secondary, #uc-navigation div.secondary a:hover {  background-color: #1c6fb7; color:#fff;}
#uc-content div.secondary a{color: #14195b;}
#uc-content div.secondary .block h2 { background-color: #14195b; color: #ffffff; }
#uc-content div.secondary .block{background-color:#e4e8ed;}
#uc-navigation .secondary{background-color: #14195b!important;}

And here is the page in question. http://wcmprod2.ucalgary.ca/mha_ipe/

Any help or direction will be greatly appreciated.

Answer 1

I remember having a problem with the form tag in IE7 (showing padding and/or margin)

Try to add this to your css...

form {margin:0; padding:0;}

Hope this helps... fingers crossed... :)

Answer 2

You should first include a reset, it neutralizes the default styling of HTML elements. Giving you more control over a lot of browsers.

http://developer.yahoo.com/yui/reset/

Answer 3

by "header" if you mean <div id="uc-header" class="uc-section header"> then the CSS you've shown here does not have a property addressing "uc-header". you should override the properties in level-c.css

Answer 4

The header image for some reason has a CSS attribute that gives it a margin of -6px. Add this

.logo img { margin-top: 0px !important; }

And you should be good.