18 replies [Last post]
mr dobalino
Offline
Regular
Last seen: 12 years 9 weeks ago
Timezone: GMT+13
Joined: 2009-05-01
Posts: 12
Points: 0

Hi,

I have read quite a bit about the topic but can't really seem to find a definitive answer.

What is the best way to deal with IE browser issues?

Surely using Conditional Style Sheets are the best way? I mean, using hacks in your code is bad for a number of reasons right (not future proof, invalid code)? But there seems to be people that don't necessarily think this and that some kind of hack is better.

Maybe there is something I am missing, but I am fairly new to CSS, but trying as hard as I can to learn all the 'best practices' for coding.

Is it just a personal preference thing where there is no 'best answer' but each is as good or bad as each other for its own reasons?

Is one of the primary reasons against use of an external conditional style sheet purely the argument for and against external vs internal style sheets?

Have I missed an alternative solution altogether?

Any thoughts would be great because I am slightly confused by it.

Thanks

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

You are correct in thinking

You are correct in thinking CC's are the best approach at this present time and is the approach taken by most and even a reccomendation from MS themselves as to the best method of dealing with IE rendering issues.

Littering you clean styles with hacks is best avoided where possible.

"purely the argument for and against external vs internal style sheets?"

What argument is this? Always use external styles unless there is a specific reason that you need to use embedded e.g perhaps the document needs to be portable and self contained?

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

mr dobalino
Offline
Regular
Last seen: 12 years 9 weeks ago
Timezone: GMT+13
Joined: 2009-05-01
Posts: 12
Points: 0

Thanks

Thanks for that, just needed some clarification

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I would think hacks or no

I would think hacks or no would be a completely personal thing. Conditional comments sit in your HTML... meaning they sit in every single HTML page. I use hacks in my CSS instead of my HTML for two reasons:
1. I'm not required by my boss to have CSS that passes the validator (I also use CSS3 stuff which also doesn't pass the validator and other browser hacks like display: -moz-inline-block who don't pass the validator)

2. I have one document with all styles, hacks and all. One place to store them, one place to find them, one place to fix them. (if I were using a CMS or includes or something this argument would be lessened)

* html is considered a "stable" hack. No future version of IE will accept * html code.

I'm no expert, but I fake one on teh Internets

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Stomme poes wrote:1. I'm not

Stomme poes wrote:

1. I'm not required by my boss to have CSS that passes the validator (I also use CSS3 stuff which also doesn't pass the validator and other browser hacks like display: -moz-inline-block who don't pass the validator)

I prefer CC because I believe it improves maintainability. Separate files keeps it clear that the styles are for a specific browser. I recognise all sorts of IE hacks because I've been working with CSS for some time. Often people new to CSS often have absolutely no idea what to make of a hack when they see it in the css code. This leads to confusion, errors and time wasting.

Browser specific styles (e.g. -moz-*) aren't so bad as it is clear that the property refers to a particular browsers. However, I'd still vote for CC to become standard.

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

Poes.... Stomme poes wrote:I

Poes....

Stomme poes wrote:

I would think hacks or no would be a completely personal thing.

Why,no there are not a personal thing, the practise of hacking (not in the true original sense of the word) is a bad thing, believe me I deal with a lot of poor code hacked around until it's forced to work, maintenance of that becomes increasingly difficult and nigh on impossible to debug when issues arise.

Quote:

Conditional comments sit in your HTML... meaning they sit in every single HTML page.

:? so do any other basic calls to files what's your point?

Quote:

I use hacks in my CSS instead of my HTML for two reasons:

hacks in your html :? why?

Quote:

1. I'm not required by my boss to have CSS that passes the validator (I also use CSS3 stuff which also doesn't pass the validator and other browser hacks like display: -moz-inline-block who don't pass the validator)

Then validate to css3 then of course it will validate! :?

vendor/developer prefixed properties are not hacks.

Quote:

2. I have one document with all styles, hacks and all. One place to store them, one place to find them, one place to fix them. (if I were using a CMS or includes or something this argument would be lessened)

I too have one place to store / maintain 'hacks' it's a CC wrapped stylesheet file called in to the page!

however in truth I might drop the odd star selector filter in to a normal sheet but very rarely. IE6 & 7 can be catered for with one file so far working with IE8 I've been fairly impressed and not needed to do anything, sure that will change though now I've tempted fate.

Quote:

* html is considered a "stable" hack. No future version of IE will accept * html code.

Yes it is but it's still a hack/filter and it's still emphatically wrong but hey ho

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

hugo wrote:Why,no there are

hugo wrote:

Why,no there are not a personal thing, the practise of hacking (not in the true original sense of the word) is a bad thing, believe me I deal with a lot of poor code hacked around until it's forced to work, maintenance of that becomes increasingly difficult and nigh on impossible to debug when issues arise.

I should have said, I think where the hacks sit would be a completely personal thing. I did not mean "whether to hack or not". Often there is no choice.

Quote:

so do any other basic calls to files what's your point?

I used CC's in a menu once that needed to be display: table for modern browsers and so floated for IE. I wanted my HTML to just be the document and its information, everything in the body to just be the information given to me... adding CC's in the HTML wasn't really different from giving each page a tag in the head. I don't like doing that either. Other people love such things and so, that's why I think it's a personal thing.

Quote:

hacks in your html why?

CC's.

Quote:

Then validate to css3 then of course it will validate!
vendor/developer prefixed properties are not hacks.

Ah, you've never seen people on forums stating their bosses require "valid css", meaning they get the green light to put the little badge on their pages. some people have that requirement. Luckily I don't. I will always get "errors" for vendor extentions. My boss doesn't care. Some out there (lord knows why) do.

Quote:

Yes it is but it's still a hack/filter and it's still emphatically wrong but hey ho

I'd rather
* html body {behavior: url("csshover.htc");}
any day over calling a whole new sheet. I know other people don't care. Some people like to write their css in one great big long horizontal line.
Some people would rather
#element {
min-height;
}
* html #element {height;}
than add CC's everywhere. I don't like keeping track of more than a single ctrl-f-able CSS document. Other people have no problems with it.

The argument that some newb might look at my code and won't understand what * html means is as bad as my husband saying I should write
element {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
because it's "more readable" than shorthand, at least to a newbie.

Whether there are lots of hacks or very very few seem to depend on what the graphic designer has given you. Whether those absolutely positioned submenus in a suckerfish dropdown where the parent li's have no set width end up trying to be 100% width of the page in IE6 alone affects whether or not there's even an issue to deal with.

Which is different than throwing ugly hacks everywhere because the code wasn't well-written in the first place. The same newbies who use tons of * html can just as easily have huge cc-called stylesheets, or ie6.css and ie7.css and ie8.css (I hate seeing those). I don't see the difference, only that I love ctrl-f, and I like having all my information about a particular element, for all browsers, in one place. Which is a purely personal thing. Like what editor you write your code in, or whether you like cake over pie.

Mmm, pie. And cake.

I'm no expert, but I fake one on teh Internets

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

Quote:Ah, you've never seen

Quote:

Ah, you've never seen people on forums stating their bosses require "valid css", meaning they get the green light to put the little badge on their pages. some people have that requirement. Luckily I don't. I will always get "errors" for vendor extentions. My boss doesn't care. Some out there (lord knows why) do.

I have sadly and it's simply ignorance of the matters they are dealing with also little badges are a waste of time and indicitive of people trying to prove something, Valid CSS :? it either works or not, I neither validate CSS nor slap little badges on sites, well not often.

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Stomme poes wrote:The

Stomme poes wrote:

The argument that some newb might look at my code and won't understand what * html means is as bad as my husband saying I should write
element {
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
because it's "more readable" than shorthand, at least to a newbie.

I strongly disagree. As IE6 fades ever so ungracefully from view, people have less and less understanding of its problems. In two or three years time, noob web developers will have little knowledge of IE7 foibles, let alone IE6 ones.

The use of margin or margin-top, margin-left, margin-bottom, margin-right is something that is detailed in a reference document that is likely to be available for years to come.

I'll grant you that whether or not to use shorthand is a coding policy decision, whichever is chosen doesn't matter a great deal, but it is sensible to stick to one way over another. In much the same way, how you order properties or position selectors and braces is policy. How to use hacks is a maintenance issue. If you place them in a normal CSS file, for clarity there should be comments that explain them. CSS files are rarely commented which makes hacks a bad move.

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

Chris, I suspect that

Chris, I suspect that stylesheets are poorly commented because so little requires any explanation; it's in the book. In other cases that require some explanation, the author hasn't a clue why he's doing what he does because he's just seen it somewhere and doesn't understand it. Would that naive author suddenly become erudite enough were he commenting the use of conditional comments?

For my own, I tend to avoid conditional comments in favor of keeping whatever hacks in context within the stylesheet. It's not always possible, but that's the goal. I do, of course, add a comment describing the reason for the odd bit.

The in-sheet hack is the only choice when correcting for Opera, Safari or Firefox. As for IE6/7, the star html and star+html hacks are guaranteed safe (or as safe as anything can be when guaranteed by MSFT).

When the need for supporting these obsolete browsers goes away, contextual hacks within the stylesheet require only the one maintenance point. (Complies with the SPOT1 and DRY2 principles.) Conditional comments involve correcting every static page, and however many dynamic page templates you have. In my mind, that makes CCs a maintenance nightmare.

cheers,

gary

1. Single Point Of Truth
2. Don't Repeat Yourself

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: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

"gary" wrote:Conditional

gary wrote:

Conditional comments involve correcting every static page,

Why :?

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

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

Every page that uses them;

Every page that uses them; that is implied. Otherwise, why not? Tongue

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Gary, means removing the

Gary, means removing the reference to the stylesheet in the page.

Only you would never do this. If a page currently supports IE6 why would decide to spend time removing that support?

I fully understand why it will eventually be no longer worthwhile adding IE6 support to new pages, but I don't think I could persuade anyone to have IE6 support removed from a page that currently supports it.

SPOT and DRY aren't violated. If you represent a matrix linearly, you will inevitably have to decide whether to go by row or column. Similarly, grouping by browser hack is just as valid as grouping by dom element (or css property).

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

Chris, I wouldn't argue that

Chris, I wouldn't argue that you're wrong. I would ask whether, in maintaining a site, you leave old IE5 and IE Mac hacks lying around. In my mind, cleaning out the cobwebs is part of a good maintenance program. If you agree, then hacking the html, compared to hacking the css, creates a terrible future burden.

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: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Chris..S wrote:Gary, means

Chris..S wrote:

Gary, means removing the reference to the stylesheet in the page.

Oh I see that's why I was confused, removing the reference to the sheet wouldn't have occurred to me as such.

As Chris says I'm not sure why one would bother removing the support, I may well begin to drop support for IE6 but if it's there already it might as well stay? It's one line, hardly a nuisance, only browsers it was intended for will do the work in parsing that file. removing the line shouldn't be a burden does anyone really create huge massive amounts of static pages if so they make a rod for their own backs, and would be wise to invest 5 mins in learning how to create server side includes of one flavour or another, I haven't created a truly static site in ages always creating a top or head include at the very least.

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Any file based search and

Any file based search and replace will sort the issue out in no time.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Well, I dunno if this is a

Well, I dunno if this is a good thing or a bad thing, but when I first started, I would do

thingie {
float: left;
display: inline; /*IE6 double margin float bug*/
width: whatever;
blah blah blah;
}

and nowadays, unless I'm specifically writing for someone who is learning CSS (rather than for a customer)
thingie {
float: left;
display: inline; /*IE6*/
blah blah;
}

on my own pages I've even left out the hack marker, though nobody else will see those.

Hugo wrote:

and would be wise to invest 5 mins in learning how to create server side includes of one flavour or another, I haven't created a truly static site in ages always creating a top or head include at the very least.

Learning a real server-side language takes me a bit longer than that, but I'm working on it.

I'm no expert, but I fake one on teh Internets

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

Stomme poes wrote: Hugo

Stomme poes wrote:
Hugo wrote:

and would be wise to invest 5 mins in learning how to create server side includes of one flavour or another, I haven't created a truly static site in ages always creating a top or head include at the very least.

Learning a real server-side language takes me a bit longer than that, but I'm working on it.

learning a server side language might but not how to use includes, re-read my comment Smile

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

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I know it's what you meant,

I know it's what you meant, but to me even simple includes are a black box.

I'm no expert, but I fake one on teh Internets