Margins & elements treated different in IE than FF?

[mcarbone]

Hi

I am making my logo with a "nav" bar appear along side it. This nav bar should appear "within" the logoWrapper (meaning 30px below top of logo wrapper). To achieve this I made the margin of #logo 30px.

This is how it should look (pic taken in I.E.)



However, this does not work the same way in FF. The element #logo still sits at the top of the parent element (#logoWrapper) and the margin for #logo seems to "push" the margin over logoWrapper. See pic in FF below.


I've been struggling for days. Any suggestions? Thanks so much for any help!

[tino.schlegel]

See here for the definitions of margins and paddings. When you add a margin to the logo. Is it outside as you can see in the second picture. There is extra white space. If you want to have this effect for th navigation bar inside, you have to add a top margin there.

[mcarbone]

Hi, thanks for responding. This is what I have in my stylesheet:

#logo {
margin-top: 30px;
}

As you can see this works in i.e. but not FF. In FF the logo does not get "pushed" down being within the logoWrapper. It is as if it doesn't create a margin -top from the logoWrapper element but it does it push it down from navMainWrapper...but only in FF. Why?

I think I have a pretty good understanding about padding (inside the element with relation to the content) and margins (outside the element with relation to the next element).

Thanks for any help!

MC

[tino.schlegel]

Great that your understanding is soo good.

The easiest to solve this is to post a link to your website. Or at least the html and css code or the particular region. Or Install Firebug for Firefox to see what the problem is.

As you might see, the second picture, the margin above the image is 30px. I guess this is the content of your logo. The navigation bar inside does not have any margin. So i guess the navigation element has a different css class identifier.