Posted by kchayka on 10/15/05 05:21

news@celticbear.com wrote:

> kchayka wrote:
>> news@celticbear.com wrote:
>> >
>> > My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
>>
>> Hmmm... perhaps you should have tried zooming text up a notch or two
>
> You mean, increase the browser's view of the font size?
> Uhm, I'm just talking about the "normal" or medium, standard browser
> display settings.

Your "normal" and mine are not necessarily the same.

> I can't imagine being able to control exactly how the
> browser looks once someone starts playing with display settings

FYI, it's not "playing with display settings", but changing the browser
preferences to what works best for the individual user. I happen to need
a larger text size than the average person. Your page does not adjust
well to that.

> on the client side, no?
> Can I?

No, you cannot control the visitor's browser. You can, however, test
your pages in various window and text sizes and see how the layout
adapts. That is very easy to do and should be a normal part of testing.
If the layout does not adjust gracefully, then it's a design flaw.

> In any case, I still can't see anything "wrong" with the CSS. Neither
> can the W3C validators, so I think I'm OK with trying to make sure
> normal IE view comes as close as possible to normal Firefox.

Validated code only means there aren't any syntax errors that might be
the cause of rendering issues. There may still be logic errors in the
code and/or browser bugs to contend with.

In your particular case, the cause of IE's weirdness is likely its
broken overflow behavior. Contrary to specs, IE's default behavior
automatically expands an element to fit the content, regardless of any
specified dimensions. Thus, the left column is erroneously widened
(perhaps for the sitemeter), which pushes the right column down due to
insufficient horizontal space for the specified #content width. Other
browsers will simply constrain the dimensions and just let any overflow
spill out.

As for getting around IE's brokenness, you might set overflow:hidden on
the left column, but only as a last resort as it might have very
undesireable results in other browsing environments. Instead, try not
floating #content or setting its width at all. Just set margin-left to
at least the width of the left column and it should take up whatever
remaining horizontal space there is.

And here's a tip: Don't set both fixed height and width for text
elements, especially not in px units. One of those dimensions should be
left to automatically adjust as needed, to allow for varying text sizes
and line-wrapping in different places.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Back to original message]