Introduction to Browser-Specific CSS Hacks

HTML & CSS
61

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/css/filters/first-child-plus-html/

62

it’s sux!
Use dynamic CSS instead. nothing is better, lighter, easier to update than a server side script generating a CSS depending on the browser who made the request and caching them. Look at the IE7 problem: with Dynamic CSS, it’s juste some code line to add to some “if-then-else” structural block. And for IE8 what you gonna do? Me, I already know.

63

@tex
Providing that the IE dev team does their job the bug that makes those conditional comments work will be fixed at the same time the rendering bugs are fixed. Granted the probability of that actually happening is somewhere near getting struck by lightning while being attacked by a shark.

Personally, I’m going to do a global search and replace for
s/[if IE]/[if lte IE7]/
Or, just drop my ie_fixes.css file from my server (provided once again that IE8 is Acid2 compliant).

My question for you is; what are you going to do when the User-Agent header isn’t the browser default?

–R

64

Safari is made available now for Windows.

65

good luck

66

Thanks for the html>body hack! Works great for me.

67

Nice For one page diffrent ype of CSScan implement in a hack

68

Thanks! muy útil

69

hey! So I tried this but the code still shows up in IE 7. Are you sure this works there?

All the CSS pertaining to this section is kinda long so I just added it to the end…

Here’s the specific CSS I used:

div.banner {
margin: 0;
font-size:29px;
font-weight:bold;
line-height: 1.5;
text-align: right;
position: fixed;
top: 0px;
left: auto;
width: 797px;
hight:150px;
color: transparent;
border:none;
}

td>div.banner {
margin: 0;
font-size:29px;
font-weight:bold;
line-height: 1.5;
text-align: right;
position: fixed;
top: 0px;
left: auto;
width: 797px;
hight:150px;
color: transparent;
background-image:url(images/head.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position:0px 0px;
border:none;
}

And here’s a snipit of code it relates to:

<div class=“banner”>
<div class=“transparent”>
<p>
<a href=“…/index.htm”>Home</a>
<a href=“…/about.htm”>About</a>
<a href=“…/specials.htm”>Specials</a>
<a href=“…/Treatments.htm”>Treatments</a>
<a href=“…/store.htm”>Store</a>

    &lt;/p&gt;
    &lt;p2&gt;
    &lt;a href="../appointment.htm"&gt;Make an Appointment!&lt;/a&gt;
    &lt;/p2&gt;
&lt;/div&gt;

I also tried body>div.banner{ for the CSS instead of td>div.banner, but that didn’t work either. I also tried turning them all into IDs rather than classes, but that REALLY didn’t work.

And here’s all the CSS for that section:

div.banner {
margin: 0;
font-size:29px;
font-weight:bold;
line-height: 1.5;
text-align: right;
position: fixed;
top: 0px;
left: auto;
width: 797px;
hight:150px;
color: transparent;
border:none;
}

td>div.banner {
margin: 0;
font-size:29px;
font-weight:bold;
line-height: 1.5;
text-align: right;
position: fixed;
top: 0px;
left: auto;
width: 797px;
hight:150px;
color: transparent;
background-image:url(images/head.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position:0px 0px;
border:none;
}

div.banner p {
margin: 30px 5px 10px ;
padding: 0;
font-family: Palatino Linotype, Book Antiqua3, Palatino6, serif;
background: transparent;
border:none;
font-style:italic;
}

div.banner p2 {
padding: 0;
font:Palatino Linotype, Book Antiqua3, Palatino6, serif;
background: transparent;
border:none;
font-style:italic;
}

div.transparent {
filter:alpha(opacity=100);
-moz-opacity:0.0;
-khtml-opacity: 0.0;
opacity: 0.0;}

div.banner a{ margin: 0 0 0 0 }
div.banner a{ border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: none; }

div.img{
border:none;
border-spacing:0;
padding:10px;
float:inherit;
}

oh, and in case you’re curious, yes, this is coding for a navbar, however kooky it might be. Also, the type is invisible so that you can see the graphic behind, which I didn’t end up wanting to slice.

70

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.