position, float, and conditional comments

[benneh]

Hi all!

I have two unrelated questions that's been stuck in my head, but I'd like to get others opinions on them. Probably no right or wrong answers here, so I'd like to build up a discussion.

First question: I use conditional comments - only to separate IE6. I read on forums many css purists avoid them at all cost, claiming if you use either CC or hacks, you're coding it wrong.
Should we technically use them? Do they make sense from a semantic point of view? Should we avoid it if possible?

Secondly: If you were to create a 3 column fluid layout, with the two side columns having fixed width, would you use float on the two side columns? Or would you use position:absolute?

Lets hear your methodology!

 

[angelwatt]

I'll give my opinion.

Question 1:
I personally avoid using conditional comments at all cost. Partly because I don't worry about supporting IE. Though if I had a customer who was using IE mainly and needed that support I would feel comfortable using them if it was the only way. Though I'd also examine why I "really" needed them because maybe there's a better way of doing the page.

Conditional comments effect on semantics is negligible. At least with the conditional comments I've seen it only effects CSS, which is all presentation, not content. Semantics in most cases only refers to the markup, not the presentation.

Question 2:
I try to avoid using an absolute position in favor of more fluid designs using floats. Though that isn't to say fluid designs can't be done with absolute positions. I've pretty much stopped using px measurements altogether in exchange for em (except for things like images of course).

 

[Photomax]

There are a number of techniques used to make IE (mainly version 6) play nice like conditional comments, filters, * hacks, and separate style sheets for different browsers.

Generally speaking the learned elders in the Modern Standards world say you should avoid these fixes whenever possible. Sometimes its not possible and hey, they get the job done. Most of these fixes are well known.

So, what's the harm in using them? Well its messy and code purists like to keep things neat. So do professionals. If you are handing over a design project its an accomplishment to hand over a product that is made from clean XHTML that validates as "strict"' and CSS that also validates without any filters or hacks. By avoiding these you can argue that there will be less chance of other browser conflicts if the site changes down the road. Sometimes focusing on the slimy puke that is IE6 you can inadvertently introduce issues for other browsers. Keep in mind that most sites will change. Avoiding a tangled mess of these fixes helps ensure the design will hold up.

Some guys will create a layout, build the CSS, and test for IE6 and find that a hack is required. With a shrug of "oh well" they add the code and move on. A better designer would actually take the time to examine the markup and CSS to see if there is another path that can be used that will satisfy the browser problem without using the hack. Often times there is. Most of the margin and float issues that IE has can be avoided by adding the padding, margin, position:absolute etc to the content and not the container elements.

An excellent book that covers all of this is "CSS Mastery: Advanced Web Design Solutions" by Andy Budd.

Cheers,

Max

 

[MarkPB15]

I use a conditional comment to make a separate style sheet for ie6 and ie 5. Basically you use conditions to say a style sheet is only recognized by ie 6 and earlier. This mean I can keep all my ie 6 specific styles in one place. This gives me the ability to build the best site for browsers that are standards compliant while still giving people with inferior browsers a good experience.

I've never had validation problem with these comments and it keeps my style sheets very nice and clean. I mean we have separate stylesheets for different types of media so I don't see the harm in it and I believe eric meyer even promotes this technique.

As for absolute positioning, I rarely use it. There are times when it makes sense but when it comes to columns, floating is almost always a better choice.

 

[benneh]

Question 2:
I try to avoid using an absolute position in favor of more fluid designs using floats. Though that isn't to say fluid designs can't be done with absolute positions. I've pretty much stopped using px measurements altogether in exchange for em (except for things like images of course).

If I use floats to build, I find I have to correctly order my structure in a way to make it look right. E.g. left column, right column, THEN center column...

<div id="leftColumn"> this floats left </div>
<div id="rightColumn"> this floats right </div>
<div id="centerColumn"> this has no float, but has to come after #rightColumn</div>

Does the order of HTML affect web screen readers for visually impaird users?

 

[Makosuke]

Conditional Comments:

I side with MarkPB15 when it's a site with a nonspecific audience and functionality for the client is more important than perfect code.

You've got a layout that looks nice, but it isn't going to work in IE6. This leaves you with three (well, four) options:

1) Goof around with the code without explicitly using any hacks, such that it ends up looking ok in IE6.

I strongly dislike this, because I can take what is a very efficient, logical, nice stylesheet and end up with it being far uglier for no reason other than to try and make IE6 happy without "cheating."

2) Use some basic in-stylesheet hacks (such as * whatever) to hammer IE6 into shape.

So long as you comment them well and keep them isolated, this is sometimes the most efficient method.

3) Use a conditional comment to feed the patches to IE6 via a different stylesheet.

On one hand, this keeps your main stylesheet clean. On the other, it sticks junk into the header of your pages (which theoretically can be removed in a few years when IE6 is down to ~1% marketshare).

or
4) Screw IE6.


At least with the way I do styleheets, it usually works out that the biggest IE6 issues are just the lack of min- and max-width, and the 3px bug.

As much as I'd like to do 4, that's not a realistic option at this point for most sites. So, I basically do 2 if it's a matter of fixing a couple of 3px jog issues or scabbing in a * html to add a fixed width for IE6, and 3 if there's enough crap that I have to do that I don't want to gum up my decent stylesheet with it (or, as was recently the case, I wanted to show it to IE6 but NOT IE5 Mac, and didn't want to bother with any of those crazy comment hacks).

Particularly if I'm going to be using a script to add proper png-alpha support to IE6, in which case I want a conditional comment anyway, I might as well shove its hacks into a separate stylesheet--so long as I don't forget I've done that, I have my one true stylesheet for everything else (including IE7) that way.


On the columns: I'm curious about other folks' solution to this as well. Using position: absolute seems kinda crazy, but I've also run into the issue that I need to put both columns above the main content unless I want to float it, too (which I don't if I can help it), which as pointed out can make less sense semantically.

That is, if I view the page in a browser with no CSS support (or NS4, which won't see my stylesheets thanks to a media setting), I might not want my righthand column to end up between the left and the body.

I'm sure there are logical solutions to this, but never really dug into it...

 

[angelwatt]

If I use floats to build, I find I have to correctly order my structure in a way to make it look right. E.g. left column, right column, THEN center column...

<div id="leftColumn"> this floats left </div>
<div id="rightColumn"> this floats right </div>
<div id="centerColumn"> this has no float, but has to come after #rightColumn</div>

Does the order of HTML affect web screen readers for visually impaird users?

Order does matter since screen readers will read the same order as the raw HTML. I usually go for Header, Navigation, Content, Footer. I don't have sider bars, but if I did I'd likely have them before the content. To let screen readers bypass them quickly though I'd provide 'skip' links (hidden with CSS) so they can more quickly get to the content. Generally having skip links to go straight to the content, bypass just a navigation, or just a side bar, or back to navigation (if you're at the bottom). This article has some very good solutions for doing visually hidden 'skip' links as well as some other commonly needed and helpful accessibility solutions.

Some people try to make the content come before the navigation to help screen readers, but there are some many that have navigation first it just ends up confusing screen reader users because it's so uncommon.