Problems with CSS block position and IE

[news]

I'm having a heck of a time, and I'm hoping someone can take a quick
look and see if they can recognize what might be the problem and point
me the right direction.

My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
and Opera, but in IE6, the main body block positions itself below the
left menu bar.

I've W3C validated the XML Schema, HTML, and CSS and fixed a couple of
errors and all three now give me a "valid" indicator.

I've used the Developer Tools extension in Firefox to look at the block
info, and saw a redundant element I took out. Otherwise, I can't find
where the problem lies.

I've changed font, margin, padding, and width all over the stylesheet,
and can't seem to effect any improvement.

Anyway, I'm new to CSS, so I'm hoping someone can take a quick look and
know right off "Ah, you appear to have a problem with the catalytic
converter! Check that." Just a good clue, a direction, is all I need,
if possible.

Thanks for any feedback!
Liam

 

[Thomas Mlynarczyk]

Also sprach (e-mail address removed):

My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
and Opera, but in IE6, the main body block positions itself below the
left menu bar.

I did a quick test with IE5.0 (the problem appears there as well). I'm not
sure what's really going on, but changing the "margin" to "padding" in
#content and #sidebar did the trick:

#content {
/* margin: 0 10px 0 0; */
padding: 0 10px 0 0;
}

#sidebar {
/* margin: 0 0 0 10px; */
padding: 0 0 0 10px;
}

Greetings,
Thomas

 

[news]

Also sprach (e-mail address removed):


I did a quick test with IE5.0 (the problem appears there as well). I'm not
sure what's really going on, but changing the "margin" to "padding" in
#content and #sidebar did the trick:

#content {
/* margin: 0 10px 0 0; */
padding: 0 10px 0 0;
}

#sidebar {
/* margin: 0 0 0 10px; */
padding: 0 0 0 10px;
}

Greetings,
Thomas

Thanks for the reply!
I tried making that change, and it's still broken in IE6.
But, I'd never thought of a margin/padding problem. I'll go through and
replace all of them in the whole sheet and see if that makes a
difference.
Thanks!
Liam

 

[kchayka]

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
before coming to that conclusion. Or were you expecting a horizontal
scrollbar and some overlapping text?

 

[news]

Hmmm... perhaps you should have tried zooming text up a notch or two
before coming to that conclusion. Or were you expecting a horizontal
scrollbar and some overlapping text?

Wha? I don't get what you mean.
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. I can't imagine being able to control exactly how the
browser looks once someone starts playing with display settings on the
client side, no?
Can I?
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.

 

[Leonard Blaisdell]

You mean, increase the browser's view of the font size?

Yep. People who visit your page can be uncomfortable with the font you
present and try to increase it's size. Your page should deal with that
gracefully. Your 'posted on' text creeps up into the heading everywhere
when the font size is increased. Probably a simple fix.

Uhm, I'm just talking about the "normal" or medium, standard browser
display settings. I can't imagine being able to control exactly how the
browser looks once someone starts playing with display settings on the
client side, no?

<http://www.allmyfaqs.com/faq.pl?AnySizeDesign> might help your
understanding. Don't get me wrong. It isn't awful. But there is no
normal on the web. And medium disregards everything on both sides.

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.

Just make it readable to non medium people. I wouldn't worry overmuch
about it looking as close as possible in different browsers. On the
other hand, it shouldn't be green in one with the menu on the left and
red in another with the menu on top
It's really not bad, but the text is pretty small to my old eyes. I
would increase font size when visiting it. And that presents problems.

leo

 

[boclair]

My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
and Opera, but in IE6, the main body block positions itself below the
left menu bar.

IE doesn't handle boxes in the correct manner. This creates a problems
such as you see when side by side boxes are given fixed widths that can
exceed the width of the viewport.

You might consider something more fluid, for example by adapting a
layout such as that published by Lauri Raitilla at
http://www.student.oulu.fi/~laurirai/www/css/examples/float2col.html

Louise

 

[kchayka]

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.

 

[news]

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.

Fairnuff. Guess that makes sense. If there are good ways for me to make
the font increase graceful, I shall look into it. I guess I just never
really considered it before.

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.

Thanks for the info! Unfortunately I don't have time tonight to play
and see, but by the sounds of it, this is very likely the direction I
need to go and that's what I needed.
Thanks for your time and reply!
Liam

 

[BootNic]

I'm having a heck of a time, and I'm hoping someone can take a quick
look and see if they can recognize what might be the problem and point
me the right direction.

My blog page: http://www.celticbear.com/weblog/ looks fine in Firefox
and Opera, but in IE6, the main body block positions itself below the
left menu bar.

I've W3C validated the XML Schema, HTML, and CSS and fixed a couple of
errors and all three now give me a "valid" indicator.

I've used the Developer Tools extension in Firefox to look at the
block info, and saw a redundant element I took out. Otherwise, I
can't find where the problem lies.

I've changed font, margin, padding, and width all over the stylesheet,
and can't seem to effect any improvement.

Anyway, I'm new to CSS, so I'm hoping someone can take a quick look
and know right off "Ah, you appear to have a problem with the
catalytic converter! Check that." Just a good clue, a direction, is
all I need, if possible.

I think you may find that your problem is in the blockquote style.
Don't set the padding on top or bottom and I think you will resolve
your current problem.

blockquote {
background: #efe4ca;
color: #4f4636;
border-left: 6px solid #7f7157;
padding-left:10px;
padding-right: 5px;
}

If you must have the padding on top or bottom of the blockquote
change them to a div and set your style to mimic the blockquote.


--
BootNic Saturday, October 15, 2005 4:10 AM

Laughter sets the spirit free to move through even the most tragic of circumstances. It helps us
shake our heads clear, get our feet back under us, restoring our sense of balance and purpose. Humor
is integral to our peace of mind and to our ability to go beyond survival.
*Captain Gerald Coffee POW in Vietnam for seven years*

 

[Alan J. Flavell]

If you must have the padding on top or bottom of the blockquote
change them to a div and set your style to mimic the blockquote.

What is *that* supposed to achieve?

If blockquote is the correct HTML markup (I haven't been following
this thread closely enough, so I'll assume that it is), then changing
it to div would be wrong, no matter what the visual result.

 

[Alan J. Flavell]

Uhm, I'm just talking about the "normal" or medium, standard browser
display settings.

How boring...

I can't imagine being able to control exactly how the browser looks

That's the truth of the web. So why not adjust your attitude to the
reality? "Control" is something that you don't get. You get to make
proposals, which will be cascaded with the user settings. The harder
that you try to achieve this unachievable "control" of which you
spoke, the worse the consequences are going to be when it clashes with
the user settings, and thus: the more likely that the user is going to
need to completely override your proposals. So the harder you try,
the harder you fail.

once someone starts playing with display settings on the client
side, no?

There's something very telling about your use of the term "playing"
for users who are doing nothing more than applying standard features
of their browsing environment, and for their own perfectly good
reasons. You're designing a web page, not a glossy paper brochure.

Let's suppose, for the sake of argument, that (say) 80% of users have
the screen "resolution" which you assume to be normal, and 80% of
users haven't changed the browser window size from its installation
default, and 80% of users haven't changed the default text size from
its installation default.

80% x 80% x 80% is around one-half. Continue to scale that with the
various other assumptions that you're making, and soon you'll be down
to one-third, i.e twice as many users fail at least one of your
design assumptions. It really *does* make sense to design flexibly.

By making flexible proposals, you optimise the chances for usable
results. You can do this without significantly compromising the
visual result for those who are in the mainstream browsing situation
that you had in mind, so it's a win/win strategy.

In any case, I still can't see anything "wrong" with the CSS.

But that's not the point. Syntactically correct CSS (and HTML) should
obviously be a good idea, and gains points for technical accuracy, but
doesn't in itself produce artistic merit. To take just one example:
from the CSS /syntax/ side, pt units are technically correct, but
you'd find widespread agreement around here, and in the WAI
guidelines, that they are inappropriate for use in a general web
situation.

best

 

[news]

Thanks all, for your help!
Some great advice, and even the stuff that didn't solve this exact
problem is great info I'm going to start incorporating.
The actual cause was that silly hit counter under the menu, being
undefined and pushing into the main body block.
Took it out, all is well.
Thanks again for the feedback!