Introduction to Browser-Specific CSS Hacks

[ArticleBot]

This is an article discussion thread for discussing the SitePoint article, "Introduction to Browser-Specific CSS Hacks"

[mediaman_12]

That's a great resource, Not even any of the CSS books I have describe the different browser 'hacks' as welll as that article.

[physt]

Good stuff.. I found the info on how to install many IE versions at once very useful

[jorigami]

There's nice CSS hack chart at centricle.com if you need hack for specific browser versions.

[Paul O'B]

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 IE, but in Firefox, Opera 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).:

#header {padding: 2em; border: 0.5em; width: 15em; voice-family: "\"}\""; voice-family:inherit; width: 10em}

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

[Dean C]

Originally Posted by Paul O'B

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 )

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?

[benji]

Originally Posted by Dean C

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?

[Paul O'B]

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.

[hgilbert]

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

[hgilbert]

nor does it wrap in KHTML !

[Paul O'B]

Hi,

In ie you can't reduce the margins of the hr for some reason. You should be able to place it where you want though. Here are various examples for you to play with.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
hr.newrule {
 color: blue;
 height: 10px;
 border: 1px solid green;
 background-color: blue;
}
hr.newrule2 {
 height:1px;
 border:none;
 background:red;
 color:red;
}
hr.newrule3 {
 height:10px;
 border:none;
 background:red;
 color:pink;
 width:300px;
 position:absolute;
 left:100px;
 top:300px;
}

.border {
 border-top:1px solid red;
 height:0px;
 overflow:hidden;
}

</style>
</head>
<body>
<p>Horizontal Rule test 1 - 1px green border and 10px blue centre</p>
<hr class="newrule" />
<p>Horizontal Rule test 2 - 1px red centre line (no border)</p>
<hr class="newrule2" />
<hr class="newrule2" />
<hr class="newrule2" />
<hr class="newrule2" />
<hr class="newrule3" />
<hr class="newrule3" />
<p>Horizontal Rule test 3 - use div as top border</p>
<div class="border"></div>
<p>Note for hr mozilla uses background colour and ie uses foreground colour so both need to be specified.</p>
</body>
</html>

Hope that helps.

paul

[BonRouge]

hgilbert,

Paul put me on to this Opera hack. He said it wasn't foolproof, but it worked where I wanted to use it.

@media all and (min-width: 0px){ 
SELECTOR/id/etc 
{STUFF GOES HERE  
}}

I hope this helps.

[scattermachine]

I like the '*' hack. It seems the easiest solution, if you can remember to deal with lists seperately. I'm gonna give it a go the next time I have to use a CSS hack.



Btw...

OFF TOPIC: How do I use a custom avatar? I tried poking around the avatar section of my profile, but I couldn't fine the 'Custom' option. Wassup with that?

[BonRouge]

Off Topic:

Originally Posted by scattermachine

OFF TOPIC: How do I use a custom avatar? I tried poking around the avatar section of my profile, but I couldn't fine the 'Custom' option. Wassup with that?

I think you have to be here a while - you know, like maybe after 25 posts or something, you can use a custom avatar.

[subnet_rx]

I use the *{margin:0; padding:0;} inclusion, but I don't understand what your saying about lists. What would have to do in a list div to reset it to use bullets?

[scattermachine]

Originally Posted by subnet_rx

I use the *{margin:0; padding:0;} inclusion, but I don't understand what your saying about lists. What would have to do in a list div to reset it to use bullets?

Paul O'B wrote (back in post #15 of this thread):
> 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.


I think he's saying that you'd have to override the * {margin:0} in lists to allow them to show thier bullets.

[subnet_rx]

yeah, but to what?

[scattermachine]

Originally Posted by subnet_rx

yeah, but to what?

I would think 10 or 20px should do it. Try it out and see what you get. There should be a site that lists the default margins/padding for elements out there. Anyboby have a link handy?

[Paul O'B]

Hi,

Originally Posted by scattermachine

I would think 10 or 20px should do it

15 px is about right:

Heres a little test so you can see for yourself

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
.five{padding-left:5px}
.ten{padding-left:10px}
.fifteen{padding-left:15px}
.twenty{padding-left:20px}
 
.fivem{margin-left:5px}
.tenm{margin-left:10px}
.fifteenm{margin-left:15px}
.twentym{margin-left:20px}
</style>
</head>
<body>
<ul class="five">
<li>test 1 - 5px left padding</li>
</ul>
<ul class="ten">
<li>test 2 - 10px left padding</li>
</ul>
<ul class="fifteen">
<li>test 3 - 15px left padding</li>
</ul>
<ul class="twenty">
<li>test 4 - 20px left padding</li>
</ul>
<ul class="fivem">
<li>test 5 - 5px left margin</li>
</ul>
<ul class="tenm">
<li>test 6 - 10px left margin</li>
</ul>
<ul class="fifteenm">
<li>test 7 - 15px left margin</li>
</ul>
<ul class="twentym">
<li>test 8 - 20px left margin</li>
</ul>
</body>
</html>

Paul

[Paul O'B]

html>body #header {margin-bottom:1em}
so far, IE7 beta release has not picked up on it.

IE7 beta2 does support the child selector. (CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.))

[Paul O'B]

What about when Firefox doesn't do what the CSS tells it to do?

An example please!

[Paul O'B]

Got anything that hides CSS from IE7 but allows IE6 to see it?

IE7 doesn't understand the star selector hack (when in standards mode).

* html body{background:red;}

I would advise against using hacks for IE7 because its a moving target. Use conditional comments instead. There are hacks around to target just ie7 but I wouldn't rely on them.

e.g.

*+html .test{bac\kground:blue}

Or:

http://www.dynamicsitesolutions.com/...ild-plus-html/

[Paul O'B]

Hi Natalie if you are trying to omit styles from IE7 using the child selector (>) then it wont work because ie7 understands the child selector.

Use conditional comments to target different verision of IE more easily.