IE Versions present different Text-Sizes

jcohen

Joined: 2004-12-26
Posts: 20
Posted: Tue, 2005-08-09 19:54

I'm having trouble figuring out the CSS for the classic and matrix themes. My text size looks just fine on Firefox and IE 6.x, but under IE 5.5, it is bigger than it should be. If I go into the View menu in IE and select "Text-size->Smaller" it looks perfect. Seems like a browser version difference with how the text-size is interpretted. I tried changing several things in the CSS file for the theme, but nothing seems to work well. I'm not sure how the CSS is handling the IE stuff differently, but did notice an IE class (I think) being used. Any ideas?

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Tue, 2005-08-09 21:12

theme.css -> font-size or so.

 
jcohen

Joined: 2004-12-26
Posts: 20
Posted: Wed, 2005-08-10 05:57

Thanks - I see that, but how do I set it different for IE 5 v IE 6? I could probably reset everything using pt instead of em, but rather not. It appears that I want to set the default font size when in a different version of IE, but not sure which style is the parent.

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Wed, 2005-08-10 07:59

jcohen, the best thing would be if you could find a solution that works in IE 5.5. and IE 6, we'd appreciate that!
else: google for browser version detection / browser version specific CSS hacks.

 
jcohen

Joined: 2004-12-26
Posts: 20
Posted: Wed, 2005-08-10 14:20

Will do - this one is anoying me. Will let all know what I find.

 
jcohen

Joined: 2004-12-26
Posts: 20
Posted: Thu, 2005-08-11 04:24

OK, tracked this one down and indeed this is a bug within IE 5.x - it sets the initial size incorrectly, so since most/all font sizes are using the em unit, titles and other text are unusually large.

Can't take full credit, I found the workaround here: http://www.alistapart.com/articles/sizematters/

Just add to all of the theme.css files the following text:

/* Hack fix for IE5.x font-size not being medium as defined in CSS */
#gallery div, #gallery p, #gallery th, #gallery li, #gallery dd, #gallery td, #gallery tr, #gallery a {
/* more specific to override imported rule */
font-size: xx-small;
/* false value for WinIE4/5 */
voice-family: "\"}\"";
/* trick WinIE4/5 into thinking rule is over */
voice-family: inherit;
/* recover from trick */
font-size: x-small
/* intended value for better browsers */
}

This actually doesn't address a Netscape 4.x issue (see link) but that's so old I didn't think it was worth it.

I'm not sure how to actually get this in the base code - this is my first contribution. If someone could add as appropriate....

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Tue, 2005-08-16 15:09