I onlyCSS hack for IE7

**silversurfer5150** · Feb 29, 2012 09:17

Hi guys,

I was wondering if I could have someone Else's input on dreaded CSS hacks.

Basically I have been a developer for two going on three years now and although I wouldn't call myself advanced yet, I am no beginner and my mark-up is clean and usually validates with hardly any errors. Because I learned the web languages a bit later, I was never involved in the old-skool table design methodology, I learned mainly from Sitepoint books, forums and online tutorials to do everything with pure CSS. I only really use tables for forms.

I find that I rarely need tp use CSS hacks but that I do regularly use HTML * to compensate for differing margins, font-sizes and padding on older versions of IE. I must also state that I don't bother designing for IE6 anymore so I am referring to IE7 onwards.

So my question is if I'm not using any hacks but html* should I be worried? Is there anything that you think I could be missing or is it pretty much the same for the rest of you?

If there is potential need for hacks for Safari, Chrome, Opera etc, I would love to know what sort of things to look out for.
I appreciate your advice.

kind regards

Silversurfer

**markbrown4** · Feb 29, 2012 15:07

I6-8 are the only browsers I have needed hacks for css. I've been using this which may look a little ugly but works perfectly.

Code html5:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

It adds ie6, ie7, ie8 classes so that you can use rather than hacks.

**silversurfer5150** · Feb 29, 2012 15:10

Cool thanks for your input Mark.

Never seen that before, is that to go in the css or the html??

I use conditional comments sometimes but so far I'm not having too many problems with IE8. What sort of IE8 bugs do you find you run into? I'm just interested to know. Maybe I will run into them in the future.

**Paul O'B** · Feb 29, 2012 16:01

Originally Posted by silversurfer5150

Hi guys,

I was wondering if I could have someone Else's input on dreaded CSS hacks.

I find that I rarely need tp use CSS hacks but that I do regularly use HTML * to compensate for differing margins, font-sizes and padding on older versions of IE. I must also state that I don't bother designing for IE6 anymore so I am referring to IE7 onwards.

IE7 doesn't understand the * html hack as that only targets IE6. You can use the *+ html hack for IE7.

There is rarely a difference in padding, margins and font-size in IE7 (excluding known bugs) so you would seldom need to hack those. Most IE7 bugs/behaviours can be catered for by doing things in a structured way from the start and avoiding the need to hack. If you make sure that what you are telling the browser to do is correct then you can avoid it error handling (such as when dimensions are over constrained and the browser has to error handle code that doesn't make sense).

Make sure floats are contained and that margins are applied correctly by taking into account margin collapse behaviour. Don't apply top margin top elements following floats and remember that IE7 will auto contain child floats when it is in haslayout mode so just make sure other browsers have the floats contained also and then they will all agree.

If you have parent elements holding complicated content then make sure the element is in haslayout mode for IE7 otherwise the children may be misplaced. For example if you use a parent with position:relative as a stacking context for absolute child element then the parent will need to be in haslayout mode (see css faq on haslayout).

Following a few simple rules will avoid the need for many IE hacks. Only use a hack when its a known bug and not just because something doesn't fit.

So my question is if I'm not using any hacks but html* should I be worried? Is there anything that you think I could be missing or is it pretty much the same for the rest of you?

If there is potential need for hacks for Safari, Chrome, Opera etc, I would love to know what sort of things to look out for.
I appreciate your advice.

kind regards

Silversurfer

Leave other browsers alone. If you run into a specific bug then its better to code around it with a change of design. There are the odd times that a hack would come in handy but its a slippery slope and its best not to paint yourself into that corner

**markbrown4** · Feb 29, 2012 16:53

That code replaces your <html> tag.
It's one of the things in the HTML5 boilerplate which is well worth a read! http://html5boilerplate.com/docs/The-markup/

Paul is right, the need for hacks is very rare.
I sometimes use the ie classes not for hacks, but to give different styles when those browsers don't support a newer feature - In which case it's probably better to use something like modernizr.

I've just found it handy both having the ie version available in CSS and js for different things.

**silversurfer5150** · Mar 1, 2012 04:45

Thanks Mark I will check out that article and thanks Paul for all your advice, I have looked into a few of those possible issues and I am thinking about them lots atm.
I must clairfy one point

IE7 doesn't understand the * html hack as that only targets IE6. You can use the *+ html hack for IE7.

.

I wasn't referring to the * html hack, I was referring to another hack html* which definitely works on IE7 because I use it all the time. I am very occaissionally getting different font-sizes in IE7 tho, does anyone have any idea why that may be?

**Stomme poes** · Mar 1, 2012 04:52

I wasn't referring to the * html hack, I was referring to another hack html* which definitely works on IE7 because I use it all the time. I am very occaissionally getting different font-sizes in IE7 tho, does anyone have any idea why that may be?

Oh you mean
element {
foo: bar;
*foo: baz;
}
?

How are you setting your font sizes? Are you setting something on the body tag? Are you setting it in a %? (there's a known IE resizing bug that gets magically avoided if you set a font-size in % on the body element) Are you setting a mixture of large and small x-height fonts in the same font stack.

Do you have a page to show examples of this? Doesn't have to be done, just show the problem.

**Paul O'B** · Mar 1, 2012 05:07

Originally Posted by silversurfer5150

I wasn't referring to the * html hack, I was referring to another hack html* which definitely works on IE7 because I use it all the time.

Ah ok yes this works in IE6 and 7.

Code:

body{*background:red}

However it is invalid and you never know whether it will suddenly start tripping up other browsers although I guess it probably never will.

The* html and *+ html hacks are valid css and will never interfere with any browsers as they work on a broken parser concept. They will however affect specificity so they are not perfect either.

As Stomme said we'd need an example to determine where the error was occurring. Make sure you are using a full doctype as in quirks mode IE won't some inherit font-size properly into tables (plus many other bugs).

**silversurfer5150** · Mar 1, 2012 05:10

Hey Yes that's the one! Coincidentally, I only found out this week after using it for years that:
html* element{
font-size:15px;
}
is the same as:

element{
font-size:15px;
*font-size:15px;
}

Thanks for your interest, I'll dig something out and post back later

**silversurfer5150** · Mar 1, 2012 05:12

Ah ok I see, I'm not designing for IE6 you see so I haven't been distinguishing. Interesting to know tho thanks Paul.

**Paul O'B** · Mar 1, 2012 05:40

Originally Posted by silversurfer5150

Hey Yes that's the one! Coincidentally, I only found out this week after using it for years that:
html* element{
font-size:15px;
}
is the same as:

element{
font-size:15px;
*font-size:15px;
}

Thanks for your interest, I'll dig something out and post back later

Don't confuse the "universal selector" (*) with hacks.

The universal selector represents any element in that position so if you say div *{} then it will affect any element that is a descendant of div. Just as if you had said div p, div h1, div h2 etc...

When you say * html {background:red} then that's when it becomes the IE6 hack because html has no parent so the rule shouldn't match. Ie6 gets it wrong and just assumes you meant to say html {}. (The same applies to IE7 but with the * + hack instead.)

When you use the star in a property (*background

then you are using a character hack as the property is not allowed to start with a star but IE6 and 7 just ignore it.

**silversurfer5150** · Mar 1, 2012 05:54

Ok thanks Paul that's interesting, so what your saying is that IE6 interprets * html as html{} but why then does html* work for ie6 and 7 because obviously all browsers recognize anything from the html node down?

**Paul O'B** · Mar 1, 2012 06:37

Originally Posted by silversurfer5150

Ok thanks Paul that's interesting, so what your saying is that IE6 interprets * html as html{} but why then does html* work for ie6 and 7 because obviously all browsers recognize anything from the html node down?

That's another bug and when you say html* you are effectively saying something like this:

htmlh1 {}

There is no html element called htmlh1 and so the rule should fail because it should be html h1. The universal selector should have white space around it otherwise it won't work (unlike the child selector or adjacent selector).

html* is invalid css unlike * html.

**Stomme poes** · Mar 1, 2012 12:15

When you say * html {background:red} then that's when it becomes the IE6 hack because html has no parent so the rule shouldn't match. Ie6 gets it wrong and just assumes you meant to say html {}.

I've always wondered, since IE6 has a different view of the DOM than other browsers... it uses the same view as JScript or something... I've always wondered if in * html the * referred to "document".

but why then does html* work for ie6 and 7 because obviously all browsers recognize anything from the html node down?

Every browser deals with errors in its own way (at least, until they all use an HTML5 parser, which also has rules for errors, for unified error rendering). For Trident, html* might be being error-parsed to html * {}. If no other browsers treat that error the same way, boom: you've got a (here invalid) hack for IE.

Kludge might be a better word. The art of finding which kludges will be "stable" and which might suddenly be adopted by some future browser for other reasons is, apparently, what made those early heady years of CSS exciting.

**silversurfer5150** · Mar 1, 2012 12:32

This thread has re-enforced what I believed already. If you learn CSS the proper way, you should need minimal, IF ANY, CSS hacks to create cross-browser pages which validate.

Its annoying, I took a developer contract a few months into my software career and I took over a large codebase, tons of different style rules , from some guy who clearly didn't know what he was doing.

I say that because he was constantly using hacks like: @media screen and (-webkit-min-device-pixel-ratio:0). bearing in mind that this project was PC only and has nothing to do with mobile devices of any kind.

I though that this was acceptable because I was very green and I even started to doubt my own skills because I hadn't seen this hack much. Now I know it was because the guy was a bit of an idiot LOL

Anyway thanks for all your help guys, some really enlightening stuff, it helps to know the reasons why these selectors work.

User Tag List

Thread: I onlyCSS hack for IE7

Thread Tools

Display

I onlyCSS hack for IE7

Bookmarks

Bookmarks

Posting Permissions