Problems with CSS block position and IE

Discussion in 'HTML' started by news@celticbear.com, Oct 14, 2005.

  1. Guest

    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
    , Oct 14, 2005
    #1
    1. Advertising

  2. Also sprach :

    > 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
    Thomas Mlynarczyk, Oct 14, 2005
    #2
    1. Advertising

  3. Guest

    Thomas Mlynarczyk wrote:
    > Also sprach :
    >
    > > 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
    , Oct 14, 2005
    #3
  4. kchayka Guest

    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.
    kchayka, Oct 15, 2005
    #4
  5. Guest

    kchayka wrote:
    > 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.
    , Oct 15, 2005
    #5
  6. In article <>,
    wrote:

    > kchayka wrote:
    > > 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.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

    --
    <http://web0.greatbasin.net/~leo/>
    Leonard Blaisdell, Oct 15, 2005
    #6
  7. boclair Guest

    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/www/css/examples/float2col.html

    Louise
    boclair, Oct 15, 2005
    #7
  8. kchayka Guest

    wrote:

    > kchayka wrote:
    >> 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.
    kchayka, Oct 15, 2005
    #8
  9. Guest

    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
    , Oct 15, 2005
    #9
  10. BootNic Guest

    > "" <> wrote:
    > 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.



    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*
    BootNic, Oct 15, 2005
    #10
  11. On Sat, 15 Oct 2005, BootNic wrote:

    > 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, Oct 15, 2005
    #11
  12. On Sat, 14 Oct 2005, wrote:

    > 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
    Alan J. Flavell, Oct 15, 2005
    #12
  13. Guest

    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!
    , Oct 15, 2005
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    651
    Luqman
    Feb 7, 2006
  2. morrell
    Replies:
    1
    Views:
    938
    roy axenov
    Oct 10, 2006
  3. Steve V
    Replies:
    6
    Views:
    234
    Steve V
    Apr 20, 2005
  4. Wolfgang Nádasi-Donner
    Replies:
    0
    Views:
    114
    Wolfgang Nádasi-Donner
    May 31, 2007
  5. κÖлª
    Replies:
    2
    Views:
    116
    Thomas 'PointedEars' Lahn
    Jan 3, 2008
Loading...

Share This Page