[thelist] WinXP, IE7 and CSS

Mark Groen evolt at markgroen.com
Sat Apr 7 15:06:54 CDT 2007

> On Thursday 05 April 2007 18:04, kasimir-k wrote:
> > kasimir-k scribeva in 06/04/2007 0:49:
> > > On XP Home
> > > IE7 http://kasimir-k.net/cmmc-ie7.png
> > > Firefox 2  http://kasimir-k.net/cmmc-ff2.png
> > >
> > > note on ie7: view -> text size -> medium
> > > the form doesn't look quite right
> >
> > Ah, it's the text size...
> > http://kasimir-k.net/cmmc-ie7-2.png with view -> text size -> smaller
> > and
> > http://kasimir-k.net/cmmc-ff2-2.png with one step increased text size
> >
> > Your background images probably not playing nice with your ems or
> > something.
> Very interesting... gives me something to go on for a Google search,
> hopefully I'll get another reply as to the fix, thanks!

Appears that Internet Explorer 6 and 7 has some oddness to watch for, and it 
may change how some people do their CSS layouts.

If the default text size is not default, View > Text Size > Smaller for 
example is set, both versions will apply a smaller value to *anything* that 
has been specified in ems, not just text and not uniformly. A div that is set 
24ems wide will be smaller than what you would expect it to be, and most 
likely your nice CSS layout will be messy.

For this project I've created a new style sheet that has the divs used for 
layout specified in pixels instead of ems. This breaks Firefox's zoom 
feature, in that a Ctrl + will only increase the text size instead of the 
whole page, as it would if everything was relative units. One can use 
conditional comments to feed an entirely different style sheet to Firefox, it 
does mean extra work keeping both brands happy if you want to see the same 
zoom page behaviour.

<tip type="css">
If you have an href that uses padding like a list item button in a menu, 
preceeding the padding declaration with the style: zoom:100%; should ensure 
the new zoom feature in Internet Explorer 7 works properly on your links.


More information about the thelist mailing list