Browser differences

Discussion in 'HTML' started by Chris Leonard, Sep 25, 2003.

  1. Aaarrghhhhhhhh

    I designed what I felt was an aesthetically nice set of pages, I honed them
    down to what I felt was near perfection from a pleasing design point of
    view - good old IE5.5, looks wonderful.

    Then I showed one of my mates at work and almost fell off my chair, in IE6.0
    it looks awful! How can this be !!! why do the ribbons no longer look
    correct - the left hand ribbon is infact the page background, the "main"
    ribbon is a div set to 100% height so it "should" reach the bottom of any
    page and effectively block out the background. this works nicely in IE5.5
    but it's an ugly mess in IE6.0 which is like an "L"

    Can anyone shed some light on where I'm going wrong please, I'm new to this
    CSS stuff and I thought I'd made quite a good job - seems I've not really!
    Better not give up the day job yet eh!

    TIA

    Chris

    http://www.theleonardfamily.co.uk/cssmenu/menuintro.htm
     
    Chris Leonard, Sep 25, 2003
    #1
    1. Advertising

  2. Chris Leonard

    Adrienne Guest

    Gazing into my crystal ball I observed "Chris Leonard"
    <> writing in
    news:bkvosp$qek$:

    > Aaarrghhhhhhhh
    >
    > I designed what I felt was an aesthetically nice set of pages, I honed
    > them down to what I felt was near perfection from a pleasing design
    > point of view - good old IE5.5, looks wonderful.
    >
    > Then I showed one of my mates at work and almost fell off my chair, in
    > IE6.0 it looks awful! How can this be !!! why do the ribbons no longer
    > look correct - the left hand ribbon is infact the page background, the
    > "main" ribbon is a div set to 100% height so it "should" reach the
    > bottom of any page and effectively block out the background. this works
    > nicely in IE5.5 but it's an ugly mess in IE6.0 which is like an "L"
    >
    > Can anyone shed some light on where I'm going wrong please, I'm new to
    > this CSS stuff and I thought I'd made quite a good job - seems I've not
    > really! Better not give up the day job yet eh!
    >
    > TIA
    >
    > Chris
    >
    > http://www.theleonardfamily.co.uk/cssmenu/menuintro.htm
    >
    >
    >


    IE6 is a never ending source of hair pulling for me as well (remember when
    it was NS4?). What I've done is explitedly define a height in pixels, say
    700px for divs that _should_be 100%. There are probably better ways to do
    this... anyone?

    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.arbpen.com
     
    Adrienne, Sep 25, 2003
    #2
    1. Advertising

  3. =?iso-8859-1?Q?brucie?=, Sep 26, 2003
    #3
  4. Chris Leonard

    rf Guest

    "Chris Leonard" <> wrote in message
    news:bkvosp$qek$...
    > Aaarrghhhhhhhh
    >
    > I designed what I felt was an aesthetically nice set of pages, I honed

    them
    > down to what I felt was near perfection from a pleasing design point of
    > view - good old IE5.5, looks wonderful.
    >
    > Then I showed one of my mates at work and almost fell off my chair, in

    IE6.0
    > it looks awful! How can this be !!! why do the ribbons no longer look
    > correct - the left hand ribbon is infact the page background, the "main"
    > ribbon is a div set to 100% height so it "should" reach the bottom of any
    > page and effectively block out the background. this works nicely in IE5.5
    > but it's an ugly mess in IE6.0 which is like an "L"
    >
    > Can anyone shed some light on where I'm going wrong please, I'm new to

    this
    > CSS stuff and I thought I'd made quite a good job - seems I've not really!
    > Better not give up the day job yet eh!


    > http://www.theleonardfamily.co.uk/cssmenu/menuintro.htm


    Your design is relying on certain bugs to be found in IE5.x. IE6 does not
    have these bugs (unless you run it in quirks mode). Neither do any of the
    other browsers.

    Specifically IE5.x stuffs up the width of an element by including the
    margins etc. IE6 does not.

    <grin>
    Several major problems with your design:
    </grin>

    Absolutely positioned elements. This is fine for the nav bar and the top div
    but not for that one with the form. You don't know how big the top div is so
    you don't know where to position the form div. In my case when I make my
    font larger the top div's text runs underneath the form.

    You specify width's of things in %. This means, as I change my canvas width
    things get narowwer. At certain combinations of canvas width and font size
    the nav bar text gets disappeared.

    This is a standard two column layout. This has been done and discussed so
    many times before that there is almost a "standard" way of doing it.

    You have a nav bar, in a ul. Float the ul to the left and give it a width
    (pixels are indicated here as you wish it to fit into a brown background).
    Don't wrap it in lots of divs, apply the style directly to the ul element.

    The rest of the content lives in a div with a left margin set so the left of
    the content aligns vertically to the right of the nav bar. If you don't do
    this the content will flow underneath the nav bar.

    You will have to jump through all sorts of hoops to get that brown column
    down the left side of the page. Height works quite differently once you
    remove IE5.x from the equation :)

    The general consensus is that you should simulate the brown column with a
    two coloured background applied to the body and just let the other elements
    end where they want to.

    Easier to visualise all of this with a picture:

    http://users.bigpond.net.au/rf/test/chris/

    The KISS principle has been firmly applied. Season to taste.

    Cheers
    Richard.
     
    rf, Sep 26, 2003
    #4
  5. Richard.

    Thanks very much. I appreciate your taking the time out to do what you did,
    it's a great help. My wife adds her thanks as well ....... she says she
    likes me with all my hair and pulling it out was not the answer!

    Chris
     
    Chris Leonard, Sep 26, 2003
    #5
    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. Peter Bradley
    Replies:
    2
    Views:
    343
    Kevin Spencer
    Jul 16, 2003
  2. Yama

    Browser Differences

    Yama, Nov 10, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    364
    Kevin Spencer
    Nov 10, 2005
  3. SStory

    Browser Differences

    SStory, Mar 28, 2006, in forum: ASP .Net
    Replies:
    7
    Views:
    488
    SStory
    Mar 29, 2006
  4. Home_Job_opportunity
    Replies:
    0
    Views:
    526
    Home_Job_opportunity
    Jan 8, 2009
  5. Home_Job_opportunity
    Replies:
    0
    Views:
    611
    Home_Job_opportunity
    Jan 14, 2009
Loading...

Share This Page