20 replies [Last post]
wibble
Offline
Regular
Microsoft Country, WA
Last seen: 17 years 41 weeks ago
Microsoft Country, WA
Joined: 2004-12-16
Posts: 22
Points: 0

When I look around different CSS discussion boards, I hear people talk about "Yeah I switch between CSS for FireFox and IE6", but they do not go into what that means. How is this accomplished?

Is there a way to present FF CSS and IE6 CSS neatly WITHOUT JavaScript or Javascript browser sniffing to "fix" things (for users that do not have javascript enabled).

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

FireFox 1.0 and IE6 "CSS Switching" - What does th

Well, this ought to ruffle a feather or three. There is seldom, if ever, a need to sniff out the visitor's browser make and model for the purpose of delivering a different stylesheet or javascript.

When you see it done, it is most likely due to laziness—the author can't be bothered to create a cross-browser/platform document, or ignorance—the author doesn't know the road to enlightenment.

Browsers fail gracefully. It's the historical nature of the beast. If a browser doesn't understand something, it gets ignored. There is one major exception to this rule, IE. It's not what it doesn't know that's the problem. It's what it does know that isn't so.

The general rule can be taken as write standards compliant html/css/javascript, test in a standards conforming browser (Firefox is the best at this time), then apply the (generally well known) hacks, work-arounds and dumbing down that IE needs. There's more, of course, but even MS's proprietary JScript has come around to the W3 DOM and ECMAScript (the official Javascript) standards.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

FireFox 1.0 and IE6 "CSS Switching" - What does th

As KK5st says there is no reason to browser sniff to serve up different stylesheets, it is pure lack of knowledge to do so and always suggests to me that the person just hasn't made much effort to get to grips with learning CSS and results in giving themselves more work, unnecesery scripts/files .it's an entirely out of date idea and I sometimes get the impression that people think it demonstrates cleverness when nothing could be further from the truth.
You can produce cross browser CSS with a little understanding and can always use IE conditional comments if you really have to serve up something specific for IE only.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 15 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

i agree fully with Hugo and kk5st

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 10 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FireFox 1.0 and IE6 "CSS Switching" - What does th

Me too! [ jumps up and down waving hands in a manic 'one week to Christmas' sort of way ] ...don't forget me: I agree too! [ calms down a bit then realises how foolish he looks :oops: ]

Laughing out loud

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 21 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

5 out of 5 enthusiasts/gurus agree . . . that roy looks like a fool waving his arms about Laughing out loud

Oh yes, and that browser sniffing is an old-school hack that has been replaced with a virtual pantheon, an armamentarium of new-school hacks. Actually, to feel really sofixtikated we can call ourselves la jeunne ecole de CSS (except in the US where they are still peeved with the French for their lack of gullibility, but I digress . . .)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

wibble
Offline
Regular
Microsoft Country, WA
Last seen: 17 years 41 weeks ago
Microsoft Country, WA
Joined: 2004-12-16
Posts: 22
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

Quote:

The general rule can be taken as write standards compliant html/css/javascript, test in a standards conforming browser (Firefox is the best at this time), then apply the (generally well known) hacks, work-arounds and dumbing down that IE needs.

Suppose I make my layout, but it always does something weird in IE, usually die to calculation, what is the best way to "fix it" for IE? For instance, my layout has floated divs, and IE6 seems to double the horizontal margins of floated divs. What is the best way to handle that, in CSS? JavaScript? a "Css Hack"? to reduce the number to half for just IE versions?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 10 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FireFox 1.0 and IE6 "CSS Switching" - What does th

Life's a b*tch and then you die!

wibble
Offline
Regular
Microsoft Country, WA
Last seen: 17 years 41 weeks ago
Microsoft Country, WA
Joined: 2004-12-16
Posts: 22
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

Is there any particular reason why the escape character is applied after the first character?

e.g.

w/idth

instead of

/width

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 10 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FireFox 1.0 and IE6 "CSS Switching" - What does th

wibble - so far five people have given their time to help you yet you have not once said please or thank you! If you want any more help then learn some manners Evil

Life's a b*tch and then you die!

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 15 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

wibble wrote:
Is there any particular reason why the escape character is applied after the first character?

e.g.

w/idth

instead of

/width

it's actually

w\idth not w/idth

and that's just how it's done... it's the Simplified Box Model Hack (SBMH)

same with height... it's he\ight

and yes... a little "Thanks!" would be appreciated!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 21 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

Just beat me to the punch.

Using the escape character '\' (not '/' ) within a property makes IE5.x skip the property declaration. It is not needed before the first line. I think one of the most commonly used methods now is the following "Modified Simplified Box Model Hack":

div#critical-width {
  display:block;
  width:400px;/*Used by all non-IE CSS-compliant browsers*/
  padding:5px;
  border:2px solid #000;
}
/*Star-HTML selector hack targets only IE*/
* html  div#critical-width {
  width:414px; /*IE 5.x*/
  w\idth:400px;/*IE 6 */
}
The escape hack works with any property providing the escaped letter is not between 'a' and 'f' (which are part of hexadecimal notation). There fore you can use he\ight but not h\eight.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

wibble
Offline
Regular
Microsoft Country, WA
Last seen: 17 years 41 weeks ago
Microsoft Country, WA
Joined: 2004-12-16
Posts: 22
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

My apologizes, I've been stumped on this problem since I first started and I'm just simply anxious to clear these mental roadblocks.

I do appreciate all the help (even if I neglect to mention it).

:oops:

Got it, thanks everyone!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

FireFox 1.0 and IE6 "CSS Switching" - What does th

It is also important that the escape character does not precede the first six letters of the alphabet .

Wibble there is a famous and apposite quote by William of Wykham in the fourteenth century and which is the motto of Winchester collage and runs thus;

'Manners Maketh Man'

This is as true on forums as it is in life, perhaps more so.


Remember you are benefiting from peoples knowledge, knowledge they have generally worked hard to obtain and willingly pass on to neophytes. they seldom require more than a small token of appreciation in return.
It's very little to ask, my friend.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wibble
Offline
Regular
Microsoft Country, WA
Last seen: 17 years 41 weeks ago
Microsoft Country, WA
Joined: 2004-12-16
Posts: 22
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

And I do appreciate all the help!

I'm new to forums in general so if I am omitting customary behavior, I apologize. Like I said before, I do appreciate everyone's input and efforts.

Regarding to Hugo's post above where using JavaScript is bad:

I've just read several articles online about these debates on whether CSS hacks are "legitimate" or "bad/good style".

I'm not well-versed enough in web design to really have a strong opinion on either. If you guys have strong opinions or if there is a strong consensus I'll probably go along since this group here knows what they're doing Wink

I suppose because releasing software is different than releasing cars in that you can't simply recall them for a fix (well there's patching but that is difficult to pursue everyone to download and install patches). I will guess that putting these "fixes" in JavaScript is bad for two reasons. Correct me if I'm wrong on this: 1.) if the client does not have Javascript enabled, the fixes won't work and 2.) adding fixes as a post rendering step makes the site load slower?

I wonder why do some CSS advocates like to use browser sniffers, or JavaScript functions to modify inline styles using parent.document.getElementById("nameOfElement").style.etcetc post-rendering to control CSS?

I think I can only find one example, which is to force a div to expand to an unpredetermined height (of an iFrame perhaps?), but I do not know much about this area.

Any thoughts?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 10 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

FireFox 1.0 and IE6 "CSS Switching" - What does th

My thoughts are that Javascript has its place but should only be used as a last resort if you can't achieve the same goal with CSS or server-side scripting. As you suggest, many people (and corporate networks) disable Javascript, and screen-readers ignore it (AFAIK). Also, if a browser is going to crash for whatever reason, you can bet your life it'll be Javascript that'll triggers it. I use Javascript somewhere or other in most jobs, but only for secondary tasks like form validation, table row rollovers and 'are you sure' boxes, that sort of thing.

Life's a b*tch and then you die!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

FireFox 1.0 and IE6 "CSS Switching" - What does th

Sorry DE, somehow I didn't see your post :?

Wibble the mistake that seems to be made regarding hacks is often the misguided belief that they are a coding necessity and sometimes come across hacks used when they weren't needed at all . It is a fact that certain hacks are unavoidable and therefore are to be considered legitimate as in correcting the box model for IE5 and the use of things such as escape characters to feed specific rules to overcome inherit flaws in browser behavior; but it is possible to avoid many problems that arise and are often dealt with through the use of hacks by working around the problem, such as not padding and margining main containers thus avoiding box model problems.
The other temptation when problems start to arise is that you just throw a browser specific hack at the problem and feed a new set of rules to cure the symptoms rather than actually consider why the problem has arisen and whether or not you could write a better rule , you tend to end up with a stylesheet that is bloated and far more difficult to follow and edit than needs be.
So it is not that it is bad style to use hacks but that good coding will only use them when absolutely necessary, after all it is one of the great sadnesses of CSS that so many hacks seemed to be needed in order that code would render cross browser it upset the purity of the specification and to paraphrase Tod Farhners words "it is a great sadness that CSS has become such a cabalists affair"

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

FireFox 1.0 and IE6 "CSS Switching" - What does th

Just to add to Roys post ( and to get of that number, it always gives me the creeps!)I tend to think of javascript as fine to use as long as it is not for "mission critical" things where it really doesn't cause major problems if a browser has it turned off, It's embellishments rather than something that if it doesn't work brings your page to a grinding halt, but that if possible use another solution.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 21 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

Many hacks have been designed to be, as much as possible, "forward compatable". By this I mean that the hack relies on a browser peculiarity to feed the browser a different value from standard to correct another problem. It is often a case of using two wrongs to make a right. Forward compatability means that when a future version of the browser comes out it will likely (1) have a standards compliant interpretation of CSS (2) ignore the hack used to feed it the alternate properties and (3) require no modification of the CSS. (eventually when 99% of browsers are compliant you might want to remove the hacked code)

I actually am of the school that really prefers to use the term "CSS filters" when referrring to hacks. They in effect filter in or out certain browsers from the properties being declared. While I agree with Hugo's statement that it is a shame that CSS currently requires these arcane twists to work, we must remember that tables didn't work properly cross-browser in the beginning either, especially when designers started pushing them. We are seeing exactly the same situation now with CSS. In a few years the CSS situation will settle down and there will be some new coding wonder that browsers have rushed to market and implemented in an incomplete or idiosyncratic manner and we will have a new round of variable compliance and hacking to compensate.

And so it goes.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

FireFox 1.0 and IE6 "CSS Switching" - What does th

Yes 'Filters' is a far better term to apply to this issue and is actually a correct method of describing what is happening, the filtering out or in of certain rules, 'Hacks' is a very inelegant word.

DE it's a very good point to make regarding the fact that validating 'filters' are as much as possible forward compatible and should when a browser comes up to standards follow the correct behavior and be ignored.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wibble
Offline
Regular
Microsoft Country, WA
Last seen: 17 years 41 weeks ago
Microsoft Country, WA
Joined: 2004-12-16
Posts: 22
Points: 0

FireFox 1.0 and IE6 "CSS Switching" - What does th

That's very good insight, thanks everyone!

I am now convinced that using JavaScript to control CSS, or to "make it work" is a bad idea, since I hear enough cases where in some places, JavaScript turned off is normal.

So I should probably only put "nice to have" features and in no place should the site depend on JavaScript to "work". As far as the layout goes, I hope I can get around with using only filters and IE condictionsal statements.