CSS in IE is a headache!

Hi all,

I am creating a new template and trying to make it XHTML and CSS compliance. I got my template to compliance using Firefox 1.07 but when I tried it in IE the center column got a blank page.

Here is a link to my site: http://www.chanh.blogdns.com/modx/

Any suggestion or tips on how to fix this to work in IE is appreciated!

Thanks

I’d start by stripping out all the 1 cell tables. They’re just not needed!

Then, I’d get rid of the position: relative styles and z-index declarations whenever possible, as they can cause funny things to happen in IE. At most you should only need them on your .navAlpha/Beta Columns and the .content center part.

Try that and see if it makes any difference. (No win IE here at the moment...)

Kill the 100% width on the table (line 323 in my editor). That will be a good start. It fixed it for me in IE. I suspected this almost instantly as IE botches width with alarming regularity. Especially 100%. It SHOULD base the 100% width on the size of the parent element, but usually it makes it 100% of the page, which is lame. To make matters worse, when it messes up, it usually hides it, making trouble shooting hard... ah life with IE.

My mantra on working with IE and CSS is simplify, simplify, simplify. I refuse to use box model hacks, opera hacks, mac hacks, etc. It takes me longer for sure, but I usually find a way around. The result is cleaner code - which makes my life easier.

I’m not having Win IE here either IE is a headache in general.

These pages helped me out last time:
http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0
http://www.positioniseverything.net

And for layers: my experience is that the position attribute gets different default values for IE and FF if not specified. Funny things do happen Explicitly adding position:static|absolute|relative for ALL elements could help when layers behave differently in IE and FF.

I couldn’t agree more with the simplify phrase above... Though I find the Holly hack simple and clean. (There’s a comment parser-bug in IE that allows you to write CSS for IE only)

and when all else fails, you can add some conditional styles at the end of the head of your template, using the IE-specific [if IE] tags. Since this is Cascading style sheets, these syles will override your previously linked or imported stylesheets.



The problem with the various hacks taking advantage of bugs in the various browsers is that often the bugs get fixed, but the bad implementation of the css doesn’t, leaving your css broken to no purpose.

Quote from: theo at Oct 12, 2005, 02:41 PM

...I couldn’t agree more with the simplify phrase above... Though I find the Holly hack simple and clean. (There’s a comment parser-bug in IE that allows you to write CSS for IE only)

Yeah, I’ll admit it. I’m a bit neurotic that way. I just feel like somehow IE has won if I have to insert a hack to accommodate it. Hey, I never claimed to be normal!

Quote from: jaredc at Oct 12, 2005, 02:51 PM

I just feel like somehow IE has won if I have to insert a hack to accommodate it.

LOL I so feel the same thing...

It’s funny, you know, when I look at my early CSS sites, what a bloatload of stuff! The more I get used to using the document flow and dealing with padding, the more streamlined sites magically become!

However, I’m far from afraid of the occassional CSS hack to whip IE into submission... particularly if it leads to a more-purely-semantic XHTML structure.

Quote from: rthrash at Oct 12, 2005, 03:08 PM

...I’m far from afraid of the occassional CSS hack to whip IE into submission... particularly if it leads to a more-purely-semantic XHTML structure.

Good point. I’ll keep that in mind next time I’m tempted to spend 10 hours trying to avoid a 10 minute hack! ... that is unless I’m getting paid those 10 hours

Most of my templates are so basic the head takes up half the text! And even so, IE manages to trip me up, especially since I have to go downstairs, fire up the PC, switch the KVM switch, and fight with a really crappy mouse and keyboard. And it’s only win98 at that. I’ll be in big trouble when IE 7 comes out.