SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1px off in IE - Help!

    www.papergodmother.com/test

    This page works fine in FF, but the top bar and the shadow below the nav are off by 1px in IE. I don't know how to fix this.

    Any ideas?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    It looks like the images themself have 1 pixel row of white-space on their left.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You might get around a lot of bugs by changing your whole box from an odd number (971px) to an even number.

    http://www.sitepoint.com/forums/showthread.php?t=593844
    Although that IE bug comes from absolutely positioned boxes, but usually off-by-1 boxes can be attributed to odd numbers. I usually make all my big containers even numbered if I can for that reason.

  4. #4
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't there a CSS hack that allows for you to modify in IE6, IE7, or IE8 only?

    *html .class { width:101px; } I believe is IE6
    .class { width:101px\0/; } is IE8
    Not too sure what IE7 was, something similar to:
    *html body .class { *width:101px; }

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Instead of using hacks, it's preferable to use conditional comments to load IE-specific code.

    Code html4strict:
    <!--[if IE]>
    <link type="text/css" rel="stylesheet" href="css/ie-specific.css">
    <![endif]-->
     
    <!--[if lte IE 7]>
    <link type="text/css" rel="stylesheet" href="css/ie-7-and-less.css">
    <![endif]-->
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Instead of using hacks, it's preferable to use conditional comments to load IE-specific code.

    Code html4strict:
    <!--[if IE]>
    <link type="text/css" rel="stylesheet" href="css/ie-specific.css">
    <![endif]-->
     
    <!--[if lte IE 7]>
    <link type="text/css" rel="stylesheet" href="css/ie-7-and-less.css">
    <![endif]-->
    Ah, I've looked into this a bit but have always found css hacks to be more efficient with a cleaner markup. Is there a reason for using conditions over hacks, with the functionality, future use, or similar?

    Thanks.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by crayz View Post
    Is there a reason for using conditions over hacks, with the functionality, future use, or similar?
    Hacks are relevant only at this point now. There is no knowledge of how those hacks will affect new versions of the web browser, or other web browsers.

    With the conditional comments, they are using a syntax that is automatically ignored by all web browsers except for IE, and the syntax is one where the browser has no possibility of confusion.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The Tan hack is stable and safe. No other vendor will ever allow it to work, at least partially because of its fame and partially because no other browsers are really so confused about whether the HTML element has a parent (my guess is, IE gets this from the DOM as used by JScript somehow?).

    Tan hack: * html #element {lte IE6 styles here;}

    IE7's appears to be safe as well: *+html #element {IE7-only styles here;} and I've been using it, but only when I know what I'm targetting and having more than one or two of them is usually a flag that I'm coding wrong.

    Inline hacks, so long as you don't have many of them, also have the advantage of a single stylesheet which you can ctrl-f to find all code for a particulat element in once place.

    I did not know IE8 had a happy-guy hack: \0/ (lawlz, reminds me of Perl's "goatse operator" =()= haha). I would not consider that one (IE8's) safe, nor any of the hacks for Opera, Safari, or the non-moz Mozilla ones. While IE8 does have bugs, in general one should not need hacks for it (maybe only if it's specifically a really bad one that you cannot code around).

    I have resorted once to conditional comments, because the number of hacks for both IE6 an 7 were getting ridiculous for the one stylesheet (due to my choice of lots of inline-block and display: table and lots of attribute selectors and min-heights... I have a limit with how many Tan hacks I'll allow in a stylesheet). Now, it's updating two sheets instead of one, and I'm missing ctrl-f really hard.
    If you really were dealing with plenty of IE8 bugs (real IE8 bugs that cannot be coded around) then I would likely also prefer a separate stylesheet called by conditional comments.

    All that said, I personally (if this were my page) would see if the even-odd thing fixed stuff... and if it DID, I'd make everything even for ALL browsers so hacks wouldn't be necessary... it's ideal when your "hack" code is just valid code sitting out in the open (like using open Haslayout triggers). So, use the hacks first to determine if they work, because the even-odd thing was just an idea. It may be some other bug instead.

    Is that margin-left: -1px something you tried for the problem?

    I do see background images set to "center" inside a 971px wrapper, so again that's suspect, but I only see the header and bottom-container being affected in IE7.


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
  •