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 ne**@celticbear .com:

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]

Thomas Mlynarczyk wrote:

Also sprach ne**@celticbear .com:

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

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]

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

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

[news]

kchayka wrote:

ne**@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
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]

In article <11************ *********@g47g2 000cwa.googlegr oups.com>,
ne**@celticbear .com wrote:

kchayka wrote:

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

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.c om/faq.pl?AnySizeD esign> 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

--
<http://web0.greatbasin .net/~leo/>

[boclair]

ne**@celticbear .com wrote:

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...float2col.html

Louise

[kchayka]

ne**@celticbear .com wrote:

kchayka wrote:

ne**@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.

[news]

kchayka wrote:

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]

> "ne**@celticbea r.com" <ne**@celticbea r.com> wrote:

news:11******** **************@ o13g2000cwo.goo glegroups.com.. ..

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*