Browser differences

[Chris Leonard]

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

 

[Adrienne]

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?

 

[=?iso-8859-1?Q?brucie?=]

good old IE5.5, looks wonderful.[...] in IE6.0
it looks awful! How can this be !!!

major changes were made to IE6 to bring it into compliance with the
w3c recommendations.

http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp

 

[rf]

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.

 

[Chris Leonard]

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