Differences between browsers (surprise), a float issue?

Discussion in 'HTML' started by Ari Heino, Apr 19, 2009.

  1. Ari Heino

    Ari Heino Guest

    The site: http://users.utu.fi/athein/tvpk/
    Screenshots: http://users.utu.fi/athein/tvpk/screenshots/

    The idea: header on top, then sidebar (width 16em, floated left) and
    content on the right (left margin 17em to give sidebar its space).
    Footer on the bottom ('clear: both' to make it go beneath everything
    else). Widths, paddings, borders and margins are all measured in ems to
    make the design fluid.

    Note: the temporary 1px border around the sidebar is there just for
    clarity. Removing it won't make a difference.

    Markup is html strict and everything has been validated.

    Problems and their "fixes":
    - FF 3: No problems, shows the pages as intended.
    - IE 7: additional empty space between the footer and the sidebar
    (height 1em?). "Fix": negative top margin for footer.
    - Safari 4: content div too narrow, should take all available space.
    "Fix": negative right margin for content div.
    - Opera 9.64: content div too narrow, should take all available space.
    "Fix": 1em left margin for content div.

    Can you tell me something about these problems? Are these all some kind
    of float-related problems? Is there a universal fix for the design?
    Have I implemented the two-column layout incorrectly?
    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Apr 19, 2009
    #1
    1. Advertising

  2. Ari Heino

    Ari Heino Guest

    Ari Heino, Apr 19, 2009
    #2
    1. Advertising

  3. Ari Heino

    Ari Heino Guest

    Ben C kirjoitti seuraavasti:
    > The reason for the Opera problem (which looks like also the Safari
    > problem) is overflow: auto on #content.


    Thanks! I began to suspect that part, too.

    > But why do you need overflow: auto on content?


    I was a bit extreme with my testing: If the window was _very_ narrow,
    the long words and images started to spill over. BTW: for some reason,
    FF at least didn't show scroll bars at it should, right?
    But you're right, in most cases it's not needed

    > As for IE, good luck!


    I think some conditional css for IE will solve the problem. I wonder how
    IE8 handles the IE7's documented float + clear bug?

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Apr 19, 2009
    #3
    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. bd
    Replies:
    0
    Views:
    632
  2. sintral
    Replies:
    9
    Views:
    4,339
    Ben Bacarisse
    Dec 7, 2008
  3. Home_Job_opportunity
    Replies:
    0
    Views:
    502
    Home_Job_opportunity
    Jan 8, 2009
  4. Home_Job_opportunity
    Replies:
    0
    Views:
    588
    Home_Job_opportunity
    Jan 14, 2009
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,552
    James Kanze
    Oct 8, 2009
Loading...

Share This Page