Forum Moderators: not2easy
it's the star HTML hack only IE sees it
Where but Webmaster World would one learn such a thing? Okay, maybe a book somewhere but many of us can't afford to buy a whole CSS library! :) So how about a list of all (or a lot) of the "CSS Hacks" that wouldn't exist in a perfect world, but are still necessary in some cases?
In the cases where you absolutely have to (e.g. to support an older browser) then rather than hack up the CSS I just use a simple PHP script to sniff the browser and supply the appropriate stylesheet.
I find this approach a LOT cleaner and slightly easier to maintain.
I'd love too but they're all in my head or at the end of a search engine ;) and I don't generally like to use them anyway...
That "centricle filters" site is good, but I find it hard to understand sometimes.
Use validated CSS and HTML, with a full doctype, and you will rarely (if ever) have to produce browser specific hacks for any of the modern browsers.
That is generally true and what I had liked to think and work by but there is I think a "better than nothing" scenario at hand.
Namely I think the browsers are starting to fall into 2 seperate categories as far as their CSS support goes.
1. - fairly CSS compliant
2. - IE
and I'm sorry but much as the name would have you believe IE Standards Compliant mode doesn't always do what it says on the tin ;)
It's not so much "bugs" it's either their difference in interpreting the standards or their complete lack of implementing some features.
BUT as we all know there are some uses for their different quirky features that almost mimic what standard compliant browsers are now implementing. (like stretching floats for example).
So I became a fan of Conditional Comments so I could use IE only quirks for them and compliant code for the rest. Like browser sniffing almost but without the hassle (some people don't have access to PHP, or any other scripting language for that matter, graham.. ;)) it's still valid code...
Then recently I came across that star * HTML hack (apparently IE thinks it has another element above the HTML root) which targets all of IE (even Mac too) and it just seems so much simpler than having a seperate section of code or stylesheet. Now I can keep the full doctype {with <?xml> declaration intact, which may be required by some sites anyway} and use this hack in amongst the rest of the CSS.. it validates it's easily commented and removable at a later date ..
also with IE's buggy support of basic things like "float" then hacking in a "height" is a very small price to pay in order that IE users (and we keep hearing that they are the majority) can enjoy what we already know should be possible
IE in standards compliant mode is going to become the blacksheep as there are CSS features you may want to use but just can't and because the "quirks" have gone from it you can't use them to advantage either.
After years of learning about IE's little quirks Now it's like we get a little chance to use them to our advantage.. which we can't do without a little "hackery" code, whether thats a hack (which is possible because of them, deliberately?) or a conditional comment which they gave us the use of anyway what's the difference it still validates..
Summary: I'll "hack" for IE if it means I can use advanced CSS now ;)
addendum: a useful addition to the * html hack is to be able to hide it from IE/Mac as it's CSS support is better you may not need to use a quirky feature in it.. so using the "holly hack" (still valid) feeds code to IE/Win only
/* start hide \*/
* html div {code here}
/* end hide */
The first line requires the red backslash just before the end of the comment which IE/Mac interprates as escaping the following asterisk so it thinks the comment is still open and doesn't apply any CSS rules until the comment is closed which it thinks is at the end of the third line...
Suzy
it validates it's easily commented and removable at a later date ..
The beauty of the * html hack.
Another nice one:
/*/*//*/
will hide everything after it from all But NN4.
to undo, simply slip in another proper set of comments (or just a close comment).
Comes in handy if you want to slip in a bit of icing for NN4 when using a
<link src="simple.css"...
@import url(complex.css)...
