SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Swindon
    Posts
    304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 pixel problem

    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

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try the universal selector to apply 0 margin and padding to all elements in the top of your stylesheet:
    Code:
    * {
    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
    Attached Images Attached Images
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •