Help !! My site is decimated in IE..

[kettikco]

Hi Everyone,

I've been a long time lurker here (ever since i got my first iBook back in 2005) and (re)registered here to post this question here. Lately i've been spending my free time creating a travel site for my personal use (lately i've started believing that it could be used by other people as well, but anyway). I'am a complete newbie when it comes to web development. I started from scratch learning a little bit of CSS, Javascript, Rails etc to put together the site piece by piece. And i've been pretty happy with the results on how the site turned out in the space of just 3 months. I've been developing it on my macbook and the only browsers that i used to test my site are Firefox(3) and Safari.

So you can imagine my shock when i opened my site at work today using IE6 and saw the layout completely decimated by the browser. Later i tried opening it Firefox(2) and it was no better. I did a bit of searching on the net and realized that the problem maybe due to my heavy use of inline-blocks for my layout.

You can check out the mess for yourself here.. www.kettik.com

Now my question to everyone here is, how do i overcome it ? Is there any alternative to using inline-block or maybe there is some workaround to make it work.

I'd appreciate all the help i can get... thanks.

 

[italiano40]

you would need to recreate the site using only CSS from IE6, because firefox uses alot of new CSS code
or
write it in leave it and write it in CSS for IE 6 and then use javascript to see what browser it is being used and load the right css file

 

[angelwatt]

Yea, inline-block is a great CSS feature, but unfortunately is only supported by the new browsers. You'll generally have to use floating techniques to get the same effect, which will take a little more effort to get right. I don't currently have time to look at your code to give you specific advice, but if I have time later I'll see I can offer anything more concrete.

 

[plinden]

There comes a time when you have to stop supporting older browsers - it seems that FF 2 has < 5% of the browser share and dropping so that's the point where I would say forget about it. (If it was <5% and rising, I'd say support it).

IE 7 has about twice the share of IE 6, so you should target IE7, but you will still need to take a look at what you can do for IE 6. Using javascript to determine the browser is NOT the way to go. Use something like this:

<!--[if gte IE 7]>
<link href="http://yours.com/ie7styles.css" type="text/css" rel="stylesheet">
<![endif]-->

<!--[if lt IE 7]>
<link href="http://yours.com/ie6styles.css" type="text/css" rel="stylesheet">
<![endif]-->

<![if !IE]>
<link href="http://yours.com/betterstyles.css" type="text/css" rel="stylesheet">
<![endif]>

The last conditional statement isn't valid HTML and will fail any validation check but won't affect displaying the page, and is usually the only way to get non-IE-specific, non-javascript check in the code.

 

[SrWebDeveloper]

Yea, inline-block is a great CSS feature, but unfortunately is only supported by the new browsers. You'll generally have to use floating techniques to get the same effect...

I just wanted to emphasize graphically how true that statement is, please everyone take a close look at this excellent web site which makes clear the problem at hand:

http://www.quirksmode.org/css/display.html

The moral of this story is, at this moment in time, only use the "inline", "block", or "none" selector for display. This is one of those things we all learn about after the fact, this happens to all of us at one time or another! You might find it best to work with angelwatt on editing your CSS in a single stylesheet. I think you should stay away from IE conditional, Javascript alternate stylesheet selection and so on. These only complicates things when its not truly necessary (i.e. a bug workaround, not an issue of tag support which this is) --- plus it's just as much work/time writing the 2nd style sheet as it is to edit the original, one could argue!!

-jim

 

[angelwatt]

Oi, there's a lot of code there. Guess I should have looked at it sooner. It would take me a good while to figure out the structure and rework all of the CSS. I'd probably start from near scratch just to understand it. It's not a quick simple fix unfortunately. There's multiple levels of div tags (divitis) and massive CSS files. It's more than I want to get into.

As an example for some changes, for the navigation (destinations, articles, etc) selector ".navbarMenu li" rather than use display: inline-block, you can use just display: inline and it'll provide the same effect.

Some links you may want to look at.
http://www.dynamicdrive.com/style/layouts/
http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/
http://www.alistapart.com/articles/journey (a touch old)
http://www.csszengarden.com/ (inspiration)
http://www.positioniseverything.net/

 

[angelwatt]

There comes a time when you have to stop supporting older browsers - it seems that FF 2 has < 5% of the browser share and dropping so that's the point where I would say forget about it. (If it was <5% and rising, I'd say support it).

IE 7 has about twice the share of IE 6, so you should target IE7, but you will still need to take a look at what you can do for IE 6.

It all depends on the stats you look at. This page still shows FF2 having more usage than FF3 (as of Nov. 2008). It shows FF2 with much more than 5%. Don't consider any stats listing as concrete though, every web site will have different stats. The thing is, you still have to accommodate IE6 and FF2. If the design looks a little off in some browsers, that's fine, but if some features or content is not accessible in a browser, then you have an issue. You should always aim to provide the content of the page to all browsers, and just have the nicer looks and interactions for the newer/modern browsers. It's progressive enhancements.

 

[kettikco]

Hey everyone... Thanks for your replies. Its good for me to know the different alternatives that are available to me. I don't think i'am gonna go the conditional css way, instead i'll like to do like what angelwatt suggested. Replace the inline-block with display:block and display:inline and see how it goes.

My trouble was that the very first block positioning i did was using inline-block, so i kinda picked it up from there and used it for all the layouts in my site. Without knowing its 'backward' compatibility issues.

@angelwatt: special thanks to you for taking the time off to look at my code. And also thanks for all the links.. i'm going through them now and there's lots of useful info in there.

 

[kettikco]

@SrWebDeveloper: I just scrolled down the quirksmode page and realized that there's tons of info on how to use the display element in css. Thanks for the link..

 

[SrWebDeveloper]

Enjoy.