Re: CSS positioning help - Mozilla

Discussion in 'HTML' started by David Graham, Jun 28, 2003.

  1. David Graham

    David Graham Guest

    "Lorne Cameron" <> wrote in message
    news:...
    > I've been trying to change my site's layout to CSS, but I've run into
    > some trouble. The layout is a header image, 760x115, then a menu image
    > on the left below that, 160x439, and then the main content in the
    > remaining space. Here's what I have just now (borders are in place so
    > that I can see what's happening):
    >
    >
    > <HTML>
    > <HEAD>
    > <TITLE>Test</TITLE>
    > </HEAD>
    >
    > <BODY>
    > <div style="border: solid red;">
    > <IMG SRC="images/header_large.gif" ALT="header.gif">
    > </div>
    >
    > <div style="position:absolute; top:0px; padding-left:0px;
    > padding-top:115px; height:439px; width:160px; border: solid green;">
    > <IMG SRC="images/menu.gif" ALT="menu.gif">
    > </div>
    >
    > <div style="position:absolute; top:0px; padding-left:160px;
    > padding-top:115px; height:100%; width:100%; text-align:center;
    > border:solid blue;">
    > TESTING
    > </div>
    > </BODY>
    > </HTML>
    >
    >
    > It looks great in IE6, but in Mozilla it seems as if the padding-left
    > and padding-top aren't taken into account when sizing the third DIV at
    > 100% (I want this DIV's dimensions to be 100% so that
    > vertical-align:middle and text-align:center will be correct relative to
    > the whole window), and so the DIV's height is actually (100% + 115px)
    > and width is (100% + 160px), so scrollbars are present. I've played
    > around with padding and margins and can't find a solution to get what
    > I'm looking for. Can anyone help me out?
    >
    > Thanks.
    > LC.



    ----- Original Message -----
    From: "Lorne Cameron" <>
    Newsgroups: alt.html
    Sent: Saturday, June 28, 2003 3:23 PM
    Subject: CSS positioning help - Mozilla


    > I've been trying to change my site's layout to CSS, but I've run into
    > some trouble. The layout is a header image, 760x115, then a menu image
    > on the left below that, 160x439, and then the main content in the
    > remaining space. Here's what I have just now (borders are in place so
    > that I can see what's happening):
    >
    >
    > <HTML>
    > <HEAD>
    > <TITLE>Test</TITLE>
    > </HEAD>
    >
    > <BODY>
    > <div style="border: solid red;">
    > <IMG SRC="images/header_large.gif" ALT="header.gif">
    > </div>
    >
    > <div style="position:absolute; top:0px; padding-left:0px;
    > padding-top:115px; height:439px; width:160px; border: solid green;">
    > <IMG SRC="images/menu.gif" ALT="menu.gif">
    > </div>
    >
    > <div style="position:absolute; top:0px; padding-left:160px;
    > padding-top:115px; height:100%; width:100%; text-align:center;
    > border:solid blue;">
    > TESTING
    > </div>
    > </BODY>
    > </HTML>
    >
    >
    > It looks great in IE6, but in Mozilla it seems as if the padding-left
    > and padding-top aren't taken into account when sizing the third DIV at
    > 100% (I want this DIV's dimensions to be 100% so that
    > vertical-align:middle and text-align:center will be correct relative to
    > the whole window), and so the DIV's height is actually (100% + 115px)
    > and width is (100% + 160px), so scrollbars are present. I've played
    > around with padding and margins and can't find a solution to get what
    > I'm looking for. Can anyone help me out?
    >
    > Thanks.
    > LC.

    Hi
    I'm no expert but this sounds to me like you have run into the broken box
    model thing. Basically, Netscape does it correctly and adds on the border
    width and padding width to the content width (reason for the 100% div being
    too wide/high) and IE in quirks mode does not (you have no DTD so your in
    quirks mode
    I would absolutely position the main div with a top: 115px; left: 160px
    so you don't need the padding, that way Netscape will look the same as the
    quirky IE. Mind you, you should not be using IE in quirk mode, better to
    write code for a standard compliant IE instead. There is a hack which you
    can use which basically, lets a broken IE see the wrong width and Netscape
    and IE6 (standard mode) see the correct width (which becomes the same size
    as the bigger incorrect width after padding and borders are added on.

    I have used the hack here
    #navigation,#navigationcp {
    width: 200px;
    z-index: 50;
    position: relative;
    top: 0px;
    left: 0px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 75px;
    margin-bottom: 0px;
    height: auto;
    background-color: #f74902;
    color: #000000;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 180px;
    }


    all browsers get a width of 200px. The incorrect browsers read the bit above
    the voice-family: "\"}\""; and put all the padding within the content width
    of 200px, so it doesn't get any bigger than 200px, the good browsers can
    read past the voice-family: "\"}\""; bit so get 180px but then they add the
    padding onto this which brings you back to 200px.

    HTH (I might have made some terrible errors here but its fun helping,
    couldn't help myself. Others will be along to put you right

    bye
    David
     
    David Graham, Jun 28, 2003
    #1
    1. Advertising

  2. David Graham wrote:
    > [SNIP]
    > I would absolutely position the main div with a top: 115px; left: 160px
    > so you don't need the padding



    IF you mean setting top:115px;left:160px; and ditching the
    height/width:100%; then yes, I've considered that (in fact, I think that
    was my original implementation), but that will lead to the main DIV
    being only as wide as is necessary to fit in the content, as opposed to
    the width of the remaining window space. Say the only content in the
    main DIV was a 200x200 pixel image - even when centered in the DIV, it
    would not be centered on the screen.

    So, as I see it my options now are:

    1) Set a constant pixel width for the main DIV. Problem: won't look
    good at very high/low resolutions - I'll need to find a compromise for a
    width to choose.

    2) Use javascript to find out window width then set main DIV width as
    (window_width - 160). Worth the hassle?

    3) ?? Is there simple solution with CSS that I don't know about? Any
    input would be much appreciated.

    LC.
     
    Lorne Cameron, Jun 28, 2003
    #2
    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. brucie
    Replies:
    8
    Views:
    2,043
    Wipkip
    Jun 29, 2003
  2. Woolly Mittens
    Replies:
    8
    Views:
    433
    Woolly Mittens
    Sep 22, 2003
  3. Ilya
    Replies:
    9
    Views:
    1,817
  4. Henri
    Replies:
    9
    Views:
    1,845
    Toby Inkster
    Feb 22, 2005
  5. sagejoshua
    Replies:
    2
    Views:
    490
    sagejoshua
    Oct 10, 2005
Loading...

Share This Page