This is an article discussion thread for discussing the SitePoint article, “Introduction to Browser-Specific CSS Hacks”
This has cleared up, in one simple article, exactly what all these hacks mean! I’ve been confused for 6 months (since beginning to tackle CSS properly), but no more.
(Well, ok, just a little bit;))
I personally try to avoid hacks where i can, because i want my sites to be displayed right in future browser-versions. You can never know how the next I.E. (when it is finally released in the next couple of years 
or Opera or Safari (or whatever…) interprets those hacks.
re: not knowing how they behave in the next few years…
what do you think keeps us employed? 
Always provide for now with a VIEW to the future
Hacks have always been part of web designing and always will be although I do only use them when completely neccesary.
To get around the box model I have at times used a div at a certain width and then nested another div inside with no width. The I’ve applied any padding to that div which seems to work fine for all browsers. I know it’s not ideal but I suppose it’s what everyone prefers and there’s no right or wrong way around the box model.
Hmm, isn’t over 99% 100%?
Great article As someone who is new to CSS hacks those are some useful tips!
That’s a great resource, Not even any of the CSS books I have describe the different browser ‘hacks’ as welll as that article.
Good stuff… I found the info on how to install many IE versions at once very useful
one question:
what is the /#eb3/ in the child selector sexample?
Some more details:
- Tantek Celik found out about the IE5 hack as he was the main developer of the Tasman engine, which powers IE5/mac
- be sure to use the child selector without any spaces around the >, otherwise IE5 will apply them
I think that /#eb3/ crept in there by itself (it doesn’t look valid to me)
I don’t usually comments on articles because its always hard to please everybody and its always difficult to get everything right but I do have a couple of comments that should be taken in consideration.
Say, for example, you want the space between a page’s header area and its content to total 25px in Internet Explorer. This gap might look good in [color=#800080]IE,[/color] but in [url=“http://www.sitepoint.com/glossary.php?q=F#term_45”][color=#0000ff]Firefox[/color], [url=“http://www.sitepoint.com/glossary.php?q=O#term_27”][color=#0000ff]Opera[/color] and Safari the gap is huge – you decide that a 10px gap looks far better. To achieve this perfect look in all browsers, you could use the following two CSS rules:
To achieve this result you don’t need a hack you just need to set the margins and padding of the elements in question and you will probably find that they are exactly the same. I see a lot in the forums of people hacking dimensions for heading tags when they don’t realise thet the browers have different defaults of padding and margin and just need to set both explicitly. (I realise the example was to explain why you may need a hack but the box model hack would have been a better example in this case :))
The problem lies in IE5’s misinterpretation of the box model. When we specify the width of an element in CSS, padding and borders aren’t included in this value. IE5, however, incorporates these values into the width value, which causes element widths to become smaller in this browser
As an addition to this it should be noted that ie5.5. and (ie6 in quirks mode) also use the broken box model therefore make sure you use the right hack for the version in question as ie6 in quirks mode will fail if the standard methods are used. Ie6 in quirks mode must get the same values that are passed to ie5 and 5.5.
This code would fail in ie6 quirks mode ( where no doctype or partial doctype is used).:
[size=3][color=#990000]#header {padding: 2em; border: 0.5em; width: 15em; [b]voice-family: "\\"}\\""; voice-family:inherit; width: 10em}[/b][/color][/size]
Ie6 in quirks mode needs the 15em width but gets the 10em because it understands the voice family hack. (and as mentioned in the article ie5 will also jump over the next style block (whatever it may be).
Paul
Wouldn’t a better solution be to use:
* { margin:0;padding:0; }
Then you can explicitly set all margins/padding exactly where you want them?
Indeed, i’ve been toying with this idea for awhile, but I can’t help thinking there’s got to be a few downsides. Anybody know of any?
Off Topic:
Indeed, i’ve been toying with this idea for awhile, but I can’t help thinking there’s got to be a few downsides. Anybody know of any?
A lot of people do use this technique and it saves a lot of headaches. You just need to remember that lists will not show their bullets when padding/margin is reduced and this throws a few people but is simple enough to fix.
Konqueror - a *NIX browser which is way more popular (and alive) then Netscape 4.7 - seems to fail the @import hack
see this post
I think its about time people stop spreading the @import myth - until the bug gets fixed by the KDE team.
I estimate at least 1/3 of Linux users to be Konqueror users (that includes myself).
The overall percentage is neglible still (~0.5%) but should carry on rising as Linux / Knoppix / KDE Desktops becomes more and more popular.
ok I found out what is wrong:
Konqueror only accepts:
<style type=“text/css”>@import url(basic.css);</style>
but will not accept @import url(basic.css)
written on already externalized stylesheets.
bah! lol
Ahhhhhhhhh this article made my day!!! I ended up using http://www.tantek.com/CSS/Examples/boxmodelhack.html which I learned would be one of the best solutions…
FYI-
http://www.tantek.com/CSS/Examples/boxmodelhack.html
isn’t foolproof in Firefox or Mozilla… the list <li> (bullets), at the bottom don’t wrap as they do in IE
Anti-moz hack (yes, I need it on occasion):
- html <element>{ <style stuff> }
nor does it wrap in KHTML !