IE7 pixel problem

[billybrag]

Hi all,

the usual bloody thing of not working in IE!!

http://www.organiclinker.com/forum/

the header seems to be 1 px out - but i cant tell what is out ie the header or the menu - it works great in other browsers... sigh!

anyone know a fix for it?

thanks all

Mike

[Rob_D]

Try the universal selector to apply 0 margin and padding to all elements in the top of your stylesheet:

* {
padding:0;
margin:0;
}

The universal selector simply ensures that padding and margin is 0 for all elements that do not have them specified in subsequent rules.

Also, "organic forum" takes up two lines in the navigation and breaks out. See attached. This is in Safari 2.0.4

[Paul O'B]

Hi,

The 1px side shift is the 1px background jog. See the faq for an explanation.

If you close the window slowly you will see that the header jogs in and out. This is because you have centred the header on a 100% element width and that will never match up with your centred page that use auto margins.

You should centre the header using a width and margin:auto and then it will match with the other elements.

e.g.

#Header {
    background: url(http://www.organiclinker.com/forum/themes/vanilla/styles/Dizzy/header.jpg) no-repeat left top;
    margin:auto;
    width:754px;
    height: 119px;
    }

Although the above will work it would actually have been better to have a page wrapper with the correct width and centre that and then make sure all elements are inside. This will keep all backgrounds relative to the fixed width page wrapper and will always scale correctly.

read the faq for a longer explanation