January 01, 2008

Conditional statements in html code

HAPPY NEW YEAR!

2008 is here and I am confident it will be a very good year. My first post this year is no breaking news. Still good to know.

When creating web sites it always comes up browser specific issues where Internet explorer and Firefox don't render the code equally. So annoying... However using css and/or conditional statements in the html code it is possible to launch different html blocks depending on if the browser is Internet explorer or not.

The HTML will run if the browser is Internet explorer:
<!--[If IE]>
HTML
<![endif]-->

The HTML will run if the browser is NOT Internet explorer:
<!--[if !IE]>-->
HTML
<!--<![endif]-->


W3schools has an excellent css reference and this blog post explains and shows examples on conditional statements.



Technorati tags:
, , ,


5 comments:

Greven said...

Neat, it was actually 'news' to me!

But maybe it's even bigger news that we STILL in the year 2008 have to care about that crap at all... :/

Niklas Waller said...

I totally agree! Why can't we all just agree on some standards! I just found out that when I made it work (using this technique) on firefox and IE on Windows it does not look the same for Safari and Firefox on Mac.... So I guess to make it more foolproof some Javascript is needed to check for OS and browser to try to cover most possibilities. Still not foolproof and a lot of booring work.

However these conditional statements can be used succesfully many times though depending on what you do.

Phil said...

Hi Nick,

Thanks for the link! Conditional comments are the best way to fix discrepancies in standards support between IE and the rest, in my opinion.

Sorry to hear you are having problems with the Mac browsers though. I normally don't get a difference as both versions of Firefox and Safari are pretty good at support of the standards. In that case I would look into your current code before looking to JavaScript browser sniffing. If you need someone else to look over it and see what may be causing Safari to choke on something that Firefox for Windows doesn't, I'd be happy to!

Niklas Waller said...

Hi Phil,
You're welcome, it was a good post that helped me a great deal.

I appreciate your offer.
I am having troubles on a site with the length of input text fields and lengths of some table cells. The strange thing is that it actually differs between Safari and Firefox on Mac. I am able to control the difference on windows using the conditional comments but it's more difficult on mac for me since I don't have one ;-)

I will post a question on your blog later on when I have more time. I might also throw in a question on css positioning that is bothering me for floating divs if I don't find a solution.

/ Nick

Babor said...

Hi Nick,

Thanks for the code. I was looking for this type of code. I dont know the bug of the Conditional HTML for Browsers but seems it is working for me.