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?
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.
Instead of using hacks, it’s preferable to use conditional comments to load IE-specific code.
<!--[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]-->
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.
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.
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; }
It looks like the images themself have 1 pixel row of white-space on their left.
You might get around a lot of bugs by changing your whole box from an odd number (971px) to an even number.
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.