Hello,

I am wondering what browser others optimize their code for. I have and still do develop in IE 6 and then check it often in Firefox Opera and IE 7. I use the strict parameter at the top, I have found that this really helps all the browsers to interpret the code the in the same way. I always adjust the spacing to look the best in IE 6 since that is or was the most popular browser.

Is it time to abandon IE 6 yet? Or do you think there are still to many still using it.

Cheers

It's definitely not time to abandon IE 6. IE 6 still has a huge majority of the market share, despite the fact that Microsoft has released IE 7, which has its own problems.

I usually design in Firefox and then fix up anything that IE 6 screws up later. But short answer, no. IE 6 still needs to be put up with, for at least a few more years.

Agreed. You can't give up on IE6 just yet. I've seen reports that put it at around 30% market share currently.

Check out the browser stats @ W3schools:

http://www.w3schools.com/browsers/browsers_stats.asp

based on 10m+ visits:

IE:--------70.73%
Firefox----25.16%
Safari-----2.06%
Opera------1.3%
Mozilla----0.3%

Of the IE visits versions were:
6.0--------56.56%
7.0--------43.14%
5.5--------0.13%

I took a look at the Display Resolution at the w3schools.com page. It is interesting to see that the 80% are at 1024x768 or higher.

Cheers

IE6 is still the dominant browser. Of course, this is really relative. It comes down to knowing your visitors. If, for example, you run a tech blog, there's a good chance the majority of your visitors are going to be using a browser other than Internet Explorer.

A good rule of thumb is (and I forget where this comes from) that you should continue developing for a browser for 5-7 years after a new version is released.

That means you should consider IE6 until about 2012. You will continue to develop for IE7 until 5 years after IE8 is released, and so on.

Your site should obviously be optimized to your visitors, but it should always be cross-browser compatible. And please, for the love of god, don't put up silly "Get Firefox" images or tell visitors that they need to switch to another browser.

And as far as screen resolutions go, 1024x768 is the best choice to optimize for.

Fixago said it well, but IMO if you really want to be completely cross-browser compatible try looking into using JS of PHP to detect what your visitors are using. With that you can direct them to the IE6, FF, ect. version of that template.

It does take longer, but it's worth it IMO.

Well here is what one of my sites weekly report shows:
Explorer 6.x 41.20 %
Explorer 7.x 34.37 %
Firefox 21.65 %
Safari 1.08 %
Opera 0.70 %
Unknown 0.44 %
Opera 9.x 0.32 %
Netscape 4.x 0.13 %
Mozilla 0.06 %
Netscape 7.x 0.06 %

Fixago said it well, but IMO if you really want to be completely cross-browser compatible try looking into using JS of PHP to detect what your visitors are using. With that you can direct them to the IE6, FF, ect. version of that template.

It does take longer, but it's worth it IMO.

A competent designer doesn't need to make separate pages for browsers, nor does a competent designer need to use (1) CSS hacks, (2) CSS conditionals, or (3) separate stylesheets.

And to be honest, IE6 is the least of my concerns. It's Safari I have the biggest issue with because of their anti-aliasing feature. They give users three options for font smoothing. That's three options that can break a layout no matter how well your code is.

People can gripe about IE 'till their blue in the face (and they will if they're not competent), but you can't control the font smoothing issue. A site can look fine in IE6/7, Opera, Firefox, etc., but be completely destroyed in Safari (or hell, I suppose any browser on a Mac because of their font rendering technology).

A competent designer doesn't need to make separate pages for browsers, nor does a competent designer need to use (1) CSS hacks, (2) CSS conditionals, or (3) separate stylesheets.

I'd never use CSS hacks or separate style sheets, but I've found altering classes depending on the visitor's browser works best for me.

This is as simple as it gets.

I know the most of people know, but in supplemental style sheets you put just fixes not the entire copy of the main style sheet.


<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>
<style type="text/css" media="all">
@import "css/ie_general.css";
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="all">
@import "css/ie_6.css";
</style>
<![endif]-->
<!--[if gte IE 7]>
<style type="text/css" media="all">
@import "css/ie_7.css";
</style>
<![endif]-->

This is as simple as it gets.

I know the most of people know, but in supplemental style sheets you put just fixes not the entire copy of the main style sheet.


<link rel="stylesheet" href="css/main.css" type="text/css" />
<!--[if IE]>
<style type="text/css" media="all">
@import "css/ie_general.css";
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="all">
@import "css/ie_6.css";
</style>
<![endif]-->
<!--[if gte IE 7]>
<style type="text/css" media="all">
@import "css/ie_7.css";
</style>
<![endif]-->


That works, but IMO it's better to use 1 style sheet by detecting the browser, then just print the browser specific classes. But whatever works best for you.

And as I said before, the best thing to do is not have separate stylesheets or conditionals. You don't need to.

And as I said before, the best thing to do is not have separate stylesheets or conditionals. You don't need to.

Very true if you want to avoid using a good amount of things available to you in CSS.

Very true if you want to avoid using a good amount of things available to you in CSS.

Really, now? Can you provide some examples, besides the obvious selectors (which aren't a make-or-break deal)? It's my experience that when someone is trying to do something they really shouldn't be doing in the first place, that that is where issues start to arise, and if that's the case, they're missing the entire point of what a website is and is supposed to be to the most important aspect of any site: the user.

Really, now? Can you provide some examples, besides the obvious selectors (which aren't a make-or-break deal)? It's my experience that when someone is trying to do something they really shouldn't be doing in the first place, that that is where issues start to arise, and if that's the case, they're missing the entire point of what a website is and is supposed to be to the most important aspect of any site: the user.

I never said that it's impossible (referring to the make or break deal comment) to have one stylesheet without hacks, I just said you are limiting what you can do.

Child Selectors
Adjacent Selectors
:first-child and :last-child

I can't count how many things need position: relative added to them just to make them show as they should in IE6.

Displaying navigation unordered lists inline has IE6 showing them as blocks quite often, have to make sure if you want to do anything along those lines you float them to the left instead.

Off the top of my head I believe that :hover is only available on the A element, and nothing else in IE6.

Using a PNG with transparency as a background for an element is a no no in IE6.

No minimum width or minimum height settings.

There's quite a few other things that you can't do with IE6 without either hacking your CSS document or giving a completely different one depending on the browser.

A good rule of thumb is (and I forget where this comes from) that you should continue developing for a browser for 5-7 years after a new version is released.

That means you should consider IE6 until about 2012. You will continue to develop for IE7 until 5 years after IE8 is released, and so on.

The HORROR! devving sites for IE6 'till 2012... :angry: :banana:


A competent designer doesn't need to make separate pages for browsers, nor does a competent designer need to use (1) CSS hacks, (2) CSS conditionals, or (3) separate stylesheets.
I partially agree on that one. With over 4 years of experience as a web designer and HTML/CSS coder, I can say that usually it all turns out quite well for all browsers, but sometimes behaviour is very unexpected... There are (too) many browsers out there....

People can gripe about IE 'till their blue in the face (and they will if they're not competent), but you can't control the font smoothing issue. A site can look fine in IE6/7, Opera, Firefox, etc., but be completely destroyed in Safari (or hell, I suppose any browser on a Mac because of their font rendering technology).

As if... Well like it or not IE was never, and probably will never be, a standards compliant browser.
That's why we still use hacks for PNG transparency support just for IE5.5 and iE6.:eek:
I find your opinios quite Windowsesque...

And yes one thing that works in one browser WORKS in another browser differently so if you want to take full advantage of CSS you'll probably have to use hacks or different CSS or both. Or use javascript frameworks and CSS and that's when the "fun" starts...:D :D :D

Go as "cross-browser" as you can and use an fluid or elastic layout IF YOU WANT and IF YOU CAN...

A competent designer doesn't need to make separate pages for browsers, nor does a competent designer need to use (1) CSS hacks, (2) CSS conditionals, or (3) separate stylesheets.

Maybe you are not sure what competent designer means:) Such person should make an attempt to design site which will display great as often as possible. Using CSS conditionals and separate pages it is possible to serve proper content and styles to clients regardless if that is IE6, Firefox or some handheld device running Opera.

Only complaints about separate stylesheets and multiple pages before this one was from people who did not understand how they work.

I would love to see how you deal with handheld devices and how you work around known bugs and limitations in IE6 and odd behaviors in IE7 (for an example a need to trigger hasLayout property) without using any of the things you listed.

Currently, I would say IE is still on top, but eventually Firefox will be the one.

Peace,

I use now IE 7.0

Maybe you are not sure what competent designer means:) Such person should make an attempt to design site which will display great as often as possible.

I know what "competent designer" means, I've been working with CSS since late 1999, and HTML since the beginning.

Using CSS conditionals and separate pages it is possible to serve proper content and styles to clients regardless if that is IE6, Firefox or some handheld device running Opera.

Well, I wasn't talking about using separate stylesheets to serve different media, such as print or handheld, I was talking about using multiple stylesheets for one media type, specifically screen, since that's what we're talking about here.

The only hack I've used before is the PNG hack, but that's when I'm doing PSD->HTML slicing for a client and using their design. When it's my design, I don't make a design that would require it in the first place. I don't use fluid/elastic layouts either, or some of the other things mentioned. That's what I meant by "probably doing something you don't need to" a couple replies back, and that's what I meant by competent designer.

Would it be nice to use selectors and PNGs without worry? Of course, but we as designers can't do that right now. Give it another 5-10 years, but until then, don't try to do something you're not supposed to because browser dominance dictates otherwise. But most importantly, design for your visitors and meet their needs.

Many still use IE 6.0

...don't try to do something you're not supposed to because browser dominance dictates otherwise. But most importantly, design for your visitors and meet their needs.

Err - it's the machines that have to follow human needs and dictations. Not the other way around. It the designer and the web developer who dictate what they want to do. Not some "funky" software company.-

It seems that you work in a very specific way which is good... that is, for you and probably some other people. For the rest of us, I think we' re gonna be asking for more rather than be content with what's available.
None of the approaches is right or wrong. They're just different (!?) ways of dealing with software problems :D :D :D

I know what "competent designer" means, I've been working with CSS since late 1999, and HTML since the beginning.



Well, I wasn't talking about using separate stylesheets to serve different media, such as print or handheld, I was talking about using multiple stylesheets for one media type, specifically screen, since that's what we're talking about here.

The only hack I've used before is the PNG hack, but that's when I'm doing PSD->HTML slicing for a client and using their design. When it's my design, I don't make a design that would require it in the first place. I don't use fluid/elastic layouts either, or some of the other things mentioned. That's what I meant by "probably doing something you don't need to" a couple replies back, and that's what I meant by competent designer.

Would it be nice to use selectors and PNGs without worry? Of course, but we as designers can't do that right now. Give it another 5-10 years, but until then, don't try to do something you're not supposed to because browser dominance dictates otherwise. But most importantly, design for your visitors and meet their needs.

Well it comes down to difference in philosophy. I believe designer should keep raising the bar, expect more of the browser and never be satisfied. I am not waiting 5 to 10 years to do something that can be done right now for people with decent browsers. There is simply no reason to be limited by limitation or one broken browser.

Few examples:

IE6 and IE7 have bug where they keep separate z-index stacks for nested lists (as used in CSS :hover based menus). This causes outer lists to bleed through the popup lists. It is simple to avoid overlapping those lists in IE by using couple lines in IE specific style sheet. In IE those menus will look decent and in standard compliant browsers they will look great.

IE6 does not support :hover on all elements. This can be easily fixed by including .htc file from IE6 specific style sheet.

IE6 handling of width:auto for list elements with display:block is broken. In IE6 specific style sheet you can specify absolute width for those elements.

Ordered list in IE6 has extra top margin that is there for no reason. You can easy kill it off in IE6 specific style sheet.

legend form element display is broken in IE6, again that is where browser specific style sheet helps.

These are the first ones that come to my mind and I do not do much design myself any more. I am sure people who do it day to day have much longer lists.

Well, maybe the kind of sites you develop don't have to adhere so strictly to the dominant browser, in this case, Internet Explorer. I develop sites that appeal to the LCD, not to the 15-20% of users out there.

Do I have sites that are heavily dominated by Firefox users? Yes. I have sites that are also heavily dominated by Opera users, and I use things that not even Firefox supports (HTML5 features, for example).

But for your average site that has to appeal on a global level to everyone, doing "fancy" things isn't an option, not when it does nothing to enhance the site beyond ego-centered design.

IE6 and IE7 have bug where they keep separate z-index stacks for nested lists (as used in CSS :hover based menus).

I can't remember the last time I've used z-index, it must have been back in 2001-2002.

IE6 does not support :hover on all elements. This can be easily fixed by including .htc file from IE6 specific style sheet.

Or using JavaScript, either way, I limit my hovering to links. Until the dominant browser supports the hover-effect on all elements, I don't need to use it for a supporting role. Would it be nice? Sure.

IE6 handling of width:auto for list elements with display:block is broken. In IE6 specific style sheet you can specify absolute width for those elements.

I'd have to see this example, not really sure what you mean here. Lists are block elements, no?

Ordered list in IE6 has extra top margin that is there for no reason. You can easy kill it off in IE6 specific style sheet.

Resetting your styles will help (and not the global reset or one Meyer's recommends), because all browsers have their quirks when it comes to spacing for things like paragraphs, lists, etc.

legend form element display is broken in IE6, again that is where browser specific style sheet helps.

Again, I would have to see that. I do know that fieldsets are different in IE compared to say, Firefox, and Fx is different from Opera. Same goes for buttons.

I am sure people who do it day to day have much longer lists.

Certainly. I don't do design much anymore either, but as I said before, I do a lot of converting PSD to HTML/CSS, about 15-20/week on average. It usually takes 1.5-2 hours for a conversion, and I can't recall the last time I had to go out of my way to "debug" something for IE6 or use a hack (besides the PNG issue).

Well, maybe the kind of sites you develop don't have to adhere so strictly to the dominant browser, in this case, Internet Explorer. I develop sites that appeal to the LCD, not to the 15-20% of users out there.......Certainly. I don't do design much anymore either, but as I said before, I do a lot of converting PSD to HTML/CSS, about 15-20/week on average. It usually takes 1.5-2 hours for a conversion, and I can't recall the last time I had to go out of my way to "debug" something for IE6 or use a hack (besides the PNG issue).


As I said before a different approach to KNOWN browser problems...
This conversation is totally off topic now and rather pointless to keep up with...

firefox is great but I still use IE 6

From the sites I monitor 70% is firefox, and roughly 25% is IE(6) and then the rest.

I typically create my pages for Firefox (my favorite browser) then I 'modify' them to work properly in IE etc.

*shrug* It's not fun but it works.

Certainly. I don't do design much anymore either, but as I said before, I do a lot of converting PSD to HTML/CSS, about 15-20/week on average. It usually takes 1.5-2 hours for a conversion, and I can't recall the last time I had to go out of my way to "debug" something for IE6 or use a hack (besides the PNG issue).
This is in fact true, for most of the times. Usually when an IE6 bug appears I forgot to add like a display: inline to padded floated elements. IE6 usually just gets messed up with messed up HTML/CSS, not because it sucks so much. There are ofcourse some things that might be a bit better, like the peek-a-boo bug, double padding bug, annoying rendering of font sizes etc, but most of the times it all goes quite well.