This is a completely noob question. Margin-top not working in IE

HTML & CSS
1

I have a website: Action One . In IE the nav bar malfunctions it automatically goes down to the next wrapper? I guess that what you call it. But in Firefox it works as it should. I can give you a copy of the css file, I’ve googled but the explanations I’ve found really do no justice. If anyone has enough patience to provide an explanation I would be so grateful.
Here is the CSS:
.navigation {
background: url(“http://www.sitepoint.com/forums/images/navbar.jpg”) no-repeat scroll 0 0 transparent;
font-size: 12px;
height: 48px;
margin-left: 245px;
margin-top: 60px; This is what doesn’t work in IE.
padding-right: 18px;
position: relative;
width: 689px;
z-index: 6;

If anyone needs the index.php file I’ll be happy to post it :slight_smile: Thanks in advance guys!

2

in your html you call a second css file with IE hacks in it:

http://actionone.net/wp-content/themes/wp-creativix/ie.css

In this you specify a float:left and margin of -50px, if I disable these in IE’s dev tools the menu moved to the correct place.

So I think if you delete the .navigation class in the IE stylesheet above it’ll work

3

As you can see, it drops it down lower in IE now. My current navigation settings are as follow(again this is my style.css not iecss):
.navigation {
background: url(images/navbar.png) no-repeat;
padding-right:18px;
font-size:12px;
position: relative;
z-index: 6;
width: 689px;
height: 48px;
margin-left: 217px;
margin-top: 50px;
}

If you view it in IE currently you can see the result after I deleted the .navigation in the iecss file. I’ll leave the settings so everyone is able to see what is going on between ie and ff. Thank you for your input, we have a stepping stone :slight_smile:

4

Hi,

The main problem is that you have set the header to height 100px which is is clearly incorrect as the logo itself is 200px high. Good browsers will assume that anything over the 100px height will be ignored and therefore the nav is placed ignoring the great big logo that is in the way. IE tries to help you out and expands the header to include the logo and thus misplacing the navigation. The header doesn’t really need a height anyway as the content will dictate that.

I would set position:relative on the header and remove the height and that will allow you to absolutely position the nav in the top right corner. You can then remove the redundant margin-top from your slider.


[B]#header{position:relative;}[/B]
.navigation {
    background: url(http://actionone.net/wp-content/themes/wp-creativix/images/navbar.png) no-repeat;
    padding-right:18px;
    font-size:12px;
  [B] /* position: relative;*/[/B]
    z-index: 6;
    width: 689px;
    height: 48px;
[B]    position:absolute;
    top: 50px;
    margin:0;
    right:0;[/B]
}



#slide-wrapper {
    background: url(http://actionone.net/wp-content/themes/wp-creativix/images/slider-bg.gif) no-repeat;
    width: 921px;
    height: 365px;
 [B]   /*margin-top: 147px;*/[/B]
    padding-top:5px;
    z-index:1;
    margin-left: 10px;
    clear: both;
    float: left;
    margin-bottom: 5px;
}

That seems to get the desired effect in all browsers consistently.

5

YOU GUYS ROCK!!! THANK YOU FOR ALL YOUR INPUT!!! I’ve been lurking for 5 years, my first post, you guys nailed it. Thank you Paul O’B for taking the time. You guys ROCK!