[Super Mario]

I have been working for one whole month on my first website. It's really simply CSS layout with two row header, content, sidebar and footer. I am really happy with the progress. It is 100% validated XHTML and CSS. It loads perfect in Safari and Firefox.....and then came Internet Explorer.

The damn browser doesn't just show a couple of bugs. IE displays a total mess!!!!!!! I mean a real big mess!!!!!!! How on earth is anyone using this POS browser? It can't figure out an easy and popular CSS layout. If anyone can please help me getting my layout to work in IE I will call them My Lord for the rest of my natural life.

[moodymonster]

don't take it personally, IE hates everyone

[Super Mario]

I will beat IE. I will beat IE!

[Love Calm Quiet]

Hmmm...
"Can't beat it with a stick."
We all feel your pain. But then being standards-compliant would not be as high a priority as world domination, would it.
FWIW:
A fine book on CSS, Charles Wyke-Smith's "Stylin' with CSS" introduces designers early (p. 4) to "IDWIMIE"... It Doesn't Work in Microsoft Internet Explorer.
His book does have great presentations of how to work around the %#@%@# if you want to be able to use all the great things that CSS have to offer. So does Rachel Andrew's volume.

Just get a couple books like that (& Eric Meyer's for ideas); then buy a MS-Voodoo doll and extra hat pins...
(and offer a "praise be" for the likes of FireFox)

[skalie]

Had to think of this thread today while investigating using CSS to put drop shadows behind images, I quote...

in bold defiance of common sense, Explorer decided to......

source

[Super Mario]

I applied Eric's Javascript hack to make IE6 understand compliant CSS. It works now but auto margins didn't work so I set the left margins to 15% to center my CSS layout on 1024x768 displays.

[CaptainHaddock]

Are you referring to Dean Edwards's "IE 7" javascript?

Anyway, I usually get IE to center things by setting text-align:center on the body tag, as much as I hate to do that, since I'm already using auto margins for the modern browsers.

[Super Mario]

Originally Posted by CaptainHaddock

Are you referring to Dean Edwards's "IE 7" javascript?

Anyway, I usually get IE to center things by setting text-align:center on the body tag, as much as I hate to do that, since I'm already using auto margins for the modern browsers.

Yes that script. I had to rename it in the browser to IE6 not IE7 because IE6 would not see the .js files. The problem with the script is it's not perfect like my auto margins not working and it clashes with an image rollover javascript in IE. Now I have to use CSS to make my navbar instead of java rollover. Have you seen any good CSS menu or navbar tutorials?

[LiquidGuy]

Code:
<!--[if IE]>
    <style type="text/css">
        html {
            display: none !important;
        }
    </style>
<![endif]-->

Super Mario, what exactly is IE not doing for you? You may be able to avoid Dean's IE7 script altogether.

And you really shouldn't use JS for menus to begin with. Good deal on switching to CSS menus. Have a look at Listamatic and Listamatic 2 for nav examples.

[SirCastor]

Originally Posted by moodymonster

don't take it personally, IE hates everyone

Seconded

[tthmaz]

IE has some big problem dealing with css, especailly when it comes to deal positiong and "table-like layouts". That's y you can still see many big sites using traditional html code suh as <table> for the layout and using css to polish things up.

[LiquidGuy]

That's y you can still see many big sites using deprecated, outdated, and invalid html code suh as <table>

Fixed.

[Super Mario]

Originally Posted by LiquidGuy

Code:
<!--[if IE]>
    <style type="text/css">
        html {
            display: none !important;
        }
    </style>
<![endif]-->

Is that a fix I can try instead of the javascript?

Super Mario, what exactly is IE not doing for you? You may be able to avoid Dean's IE7 script altogether.

It doesn't understand margin: auto so the layout goes to the left. The layout's background color isn't recognised instead the whole page is the body's background color. Sidebar gets shoved below the content box. Dean's Javascript worked but I had to set a left margin to 15% to center the layout.

And you really shouldn't use JS for menus to begin with. Good deal on switching to CSS menus. Have a look at Listamatic and Listamatic 2 for nav examples.

Thanks man, I'm going to do that today.

[LiquidGuy]

It doesn't understand margin: auto so the layout goes to the left.

Ah. Relatively simple fix. You'll need to wrap your content in a wrapper div (if you haven't already done so, otherwise, add the code to that):

Code:
body {
/* center #wrapper for IE */
text-align: center;
}

#wrapper {
/* Now reset the font alignment */
text-align: left;
margin: 0 auto;
}

As for the others, it's a little hard to explain. Maybe you can post a link to an example?

[Super Mario]

Originally Posted by LiquidGuy

Ah. Relatively simple fix. You'll need to wrap your content in a wrapper div (if you haven't already done so, otherwise, add the code to that):

Code:
body {
/* center #wrapper for IE */
text-align: center;
}

#wrapper {
/* Now reset the font alignment */
text-align: left;
margin: 0 auto;
}

As for the others, it's a little hard to explain. Maybe you can post a link to an example?

That centered it but the sidebar and background color were still out of wack.

I borrowed the code from one of the CSS menus on Listamatic. It's a typical list menu with the fonts changing color when the cursor hovers over it. It worked in all browsers fine until I inserted it into my layout. Now it works in IE but not Firefox and Safari. The font doesn't change color on hover! I have triple checked the code, can't figure it out because it's the same as it was before insertion - all I done is change the colors. How did IE pass this test but not the best browsers?

[Super Mario]

Originally Posted by Super Mario

That centered it but the sidebar and background color were still out of wack.

I borrowed the code from one of the CSS menus on Listamatic. It's a typical list menu with the fonts changing color when the cursor hovers over it. It worked in all browsers fine until I inserted it into my layout. Now it works in IE but not Firefox and Safari. The font doesn't change color on hover! I have triple checked the code, can't figure it out because it's the same as it was before insertion - all I done is change the colors. How did IE pass this test but not the best browsers?

It's fine now. Firefox didn't like the hex value I gave the hover state so I had to type 'color: purple;' instead. Everything working now with a mix of the IE javascript hack, text-align on the body and no hex values. I'm happy and learning fast. If all goes well I will one day upgrade from Text Wrangler to Dreamweaver!

[skalie]

Originally Posted by Super Mario

It's fine now. Firefox didn't like the hex value I gave the hover state so I had to type 'color: purple;' instead.

Could have been a typo maybe. Missing an " can make Firefox ignore, when IE doesn't.

Just yesterday I had Firefox listening to 'align="middle"', and IE ignoring it, 'align="center"' seemed to please both browsers. ( may have been valign, as it goes )

[megasad]

Originally Posted by LiquidGuy

Originally Posted by tthmaz

That's y you can still see many big sites using deprecated, outdated, and invalid html code suh as <table>

Fixed.

I'm not asking this to be wankery, honest, but if tables are, "deprecated, outdated, and invalid," what are you supposed to use when you want to present information in a tabular manner? For example, on the about page of my website, I have text about previous versions next to screenshots of said versions. This could be done in CSS how? And why would it be better to use CSS instead of tables when a table seems the obvious choice?

[Super Mario]

Originally Posted by megasad

I'm not asking this to be wankery, honest, but if tables are, "deprecated, outdated, and invalid," what are you supposed to use when you want to present information in a tabular manner? For example, on the about page of my website, I have text about previous versions next to screenshots of said versions. This could be done in CSS how? And why would it be better to use CSS instead of tables when a table seems the obvious choice?

Criticism of tables only applies to sites that don't need them or use them very heavily making the html bulky. Your site is lightweight and the tables look great. I love your site's simple elegance clean freshness.

[SirCastor]

Tables are not deprecated HTML. They aren't the best solution for Layout IMO, but they are certainly valid, modern code for webpages. But they should be used to provide content, not appearance to a website.

Best sites I can offer on proper code:

http://www.w3schools.com

[LiquidGuy]

Tables are not a solution for layout, period. They're a workaround for it.

I mis-stated the table deprecation issue. I was replying to the comment that table layouts were considered "traditional". Never should they be considered that.

Yes, they're perfect to use for tabular data. That is their purpose, after all.

[skalie]

Originally Posted by LiquidGuy

Tables are not a solution for layout, period. They're a workaround for it.

IE for windows is not compatible with the css standards.

IE for windows is by far the most used browser out there.

Table layouts work for IE for windows and are pretty much browser and platform compatible.

Call using tables for layout a workaround? I call it a pre-emptive headache cure.

[LiquidGuy]

Call using tables for layout a workaround? I call it a pre-emptive headache cure.

Sure, call it what you'd like. You're still using a workaround for a more semantic way to layout web pages.

IE for windows is not compatible with the css standards.

I'm not even sure it covers the CSS 1 spec. It's terrible. However, it does cover quite a bit of it. Some of what it doesn't understand can be covered with simple hacks. Whatever it can't do is not a problem due to CSS's graceful degradation & progressive enhancement.

IE for windows is by far the most used browser out there.

I did not know that. Thank you for pointing out this obscure fact.

Proper, semantic websites are accessible, search engine friendly, backwards & forwards compatible, and cross-browser compatible.

[Super Mario]

I know I can find the answer if I search somewhat but want to ask just you guys if you have tried IE7 and what was the experience like with CSS compliancy?

[LiquidGuy]

IE7 is still in early beta. Reports are that there'll be another beta release during MIX 06 that has much better CSS2 support. Source:
http://www.stuffandnonsense.co.uk/ar...6_release.html

[megasad]

Originally Posted by Super Mario

Criticism of tables only applies to sites that don't need them or use them very heavily making the html bulky. Your site is lightweight and the tables look great. I love your site's simple elegance clean freshness.

Thank you for the praise! My old site design had tables nested hideously deep, but today I just finished my compromise design (using a basic table to define header, content, navigation and footer, instead of divs and pure css).

Originally Posted by LiquidGuy

...it does cover quite a bit of it. Some of what it doesn't understand can be covered with simple hacks. Whatever it can't do is not a problem due to CSS's graceful degradation & progressive enhancement.

For the last week I had a pure divs + css layout online, but the reason I've gone back to tables is that Internet Explorer 5.0 on Windows does not degrade gracefully. Much the opposite; using css to place the divs meant that everything overlapped itself and that you could read neither content or navigation and it looked a complete mess into the bargain.

With regards which is the best to use, I agree with LiquidGuy as to which should be used and with skalie as to the headaches.

[Super Mario]

What do your web stats say about how many people are using IE5? It can't be much can it be?

[skalie]

It's Internet Explorer 5 for the Mac that makes things really interesting.

[megasad]

Originally Posted by Super Mario

What do your web stats say about how many people are using IE5? It can't be much can it be?

At most it's only 3% a month and if the site degraded gracefully I'd have no problem if they saw something completely different from what I intended (ie - navigation "bar" beneath content instead of to the right). However, because you could read nothing it seemed to defy the point of using CSS so exclusively.

Originally Posted by skalie

It's Internet Explorer 5 for the Mac that makes things really interesting.

Actually, my CSS layout worked perfectly in that browser with but one error; you could not scroll the page. Which is a pretty big error, but at least you could read what was at the top...

Ooh, and I also just worked out how to make the bullet points in my navigation menu be there using CSS instead of actually in the page's XHTML code. Click on my signature to see. It doesn't work in IE, either Windows or Mac, but this time it does degrade gracefully; the menu items are still indented as I want, just the lower five options don't have the bullets.

[Love Calm Quiet]

Originally Posted by Super Mario

Have you seen any good CSS menu or navbar tutorials?

It's not a tutorial, so you may just want to sit down with it in a B&N store, but Charles Wyke-Smith's "Stylin' with CSS" is a nice way to get into this. See Ch. 7.

Also "Eric Meyer on CSS".

Both are beautiful, conceptually elegant, andworth sitting down with for a while, tho pricey to acquire