Hey All. I was working on some global CSS code for a client's site today and found an interesting little IE "quirk" I thought I'd throw your way.
The client site was table based, used javascript to navigate the entire site by sending variables to PHP, had meta tags embedded in the body tags and so on. The real problem (aside from unfriendly URLs, visbility to search engines and the nightmare of a CSS redesign) was that he wanted the site to look exactly the same way it looks now...but be accessible and CSS based. Yeah...exactly. All this time getting away from tables and here I am using CSS to emulate what would be a bad design even from a table based layout POV. Anyway, we ran across an issue with font sizes. After my conversation with David, Felix and a few others on this site, I knew enough to include scalability. I had no control over the initial font size which was presented to the user. It's too small IMHO, but it's what he wanted, so I compromised by building in scalability. The unwanted side effect was the IEMac and IEWin treat font sizes differently and he operates in a half-Mac, half-Windows environment, so the look was quite inconsistent. Enter IE expressions. While playing with expressions to reset the base font size to 75% for IEWin only, I found this interesting little bug(?): We all know that IEWin doesn't support min/max height/width...except that it does...sort of. If you set the CSS rules in the style block/sheet like this: min-height: 200px; maxHeight: 400px; /* IE Syntax, not a typo */ minWidth: 200px; /* IE Syntax, not a typo */ maxWidth: 400px; /* IE Syntax, not a typo */ You can then use expressions to call up that value. Expressions finds min-height with the proper syntax, but not the others (go figure). My tests indicated that other browsers ignored the special IE spelling, but I also used conditional comments to hide it anyway (since I need CCs to hide the expression). Obviously, this is a kludgy fix/hack since it requires conditional comments, a LOOOONG line for each CSS expression and the retyping of 3 of your min/max values into a separate area for IE, but it doesn't require any javascript outside the expression and with the * selector you only need to include the expression once. Wrap it in CCs and it'll validate as well. I put a sample page in the sandbox section of my website: http://macnimble.com/sandbox/ieMinMax.html I wanted a different solution than the one offered on http://www.svendtofte.com (and others which were similar), because with those, you have to apply the lengthy expression to every element individually. Feel free to poke it and prod it. I'd love to know what you guys think of it. -Bill |================================| | Bill Brown | | Webmaster, MacNimble.com | | http://www.macnimble.com | | mailto:[EMAIL PROTECTED] | | Phone: 215-237-2037 | |================================| ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
