Currently having problems with a couple of Wordpress designs I created. They both work perfectly in Firefox, Opera and IE7.0, however get messed up in IE6.0 I've tried all the usual tweaks but can't resolve the issue. I'm not new to CSS or web design but these two were among my first "table-less" designs. You can see them on http://www.skinwizards.com (use the drop-down menu to switch themes) Rep will be given to anyone who can help me on this. Cheers, Mike
I have found the same issue. IE6 doesn't honor the code the way that WC3 had approved it, but IE7 does. I haven't found a solution. Outside of stating "best viewed in IE7, Firefox, or Opera", I'm not sure what would fix it. I'm thinking it has to do with being fixed width. What do you think?
Yes, IE 6 has parsing bugs. The best way to deal with it is to use 2 stylesheets. Here's how: <link href="http://website.com/css/styles.css" rel="stylesheet" type="text/css"> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="http://website.com/css/ie6.css"><![endif]--> Code (markup): The first stylesheet, styles.css, is for compliant browsers. Use this to author the page and get the code to validate. Once it's working fine then copy and rename it ie6.css. Check the page in IE 6 and revise the IE6 stylesheet as needed to get it working fine. Most problems are usually caused by floats, borders and margins.
Uhm, Gube - conditionals and secondary stylesheets are (IMHO) the WORST way of handling what can usually be inlined with 'easy selectors' The 'real' problem though is you don't have BOTH your columns floating. I'd put the sidebar after the content, and float them both left... and then double check your width math. Though at 893px total inside a 900px container you SHOULD be ok - you COULD be getting bit by the double margin bug... at which point the display:inline hack on the float might clear that up. (literally, add display:inline; to #sidebar - floats are inherently block but for some reason this kills IE's double margin on float bug) Especially since you are stating a lot of widths you shouldn't have to - like that of the footer and #content since you've GOT a perfectly good container (#wrapper) around them.
Check your width of containers. reduce margin or padding on left and right side, or you can simplily change the width of Content-main div to 545px and it should be fine.
Yeah I think i'm going to have to install a standalone version of IE6.0 and, tinker around - thanks to all who gave their input =)