Problems with cross browser compatibility

[Sally Thompson]

I've recently been revamping my first web site and have moved my menu
to read down the left, using CSS. It all (HTML and CSS) validates,
and looks fine in MSIE6 and Opera 7.23. The menu uses a <ul> within a
div - <http://www.stonybrook-ludlow.co.uk/styles.css>

However, I am told that on a Mac using IE5, the menu items are huge
blocks, obviously oversized in width and height. Would it sort this
problem to give an explicit height to each <li>? I don't know what to
do about the width problem, since I have already given a specific
width to both the <ul> and the <li>. Can any one advise? And would
this problem be specific to the Mac, or is likely to be the same for
anyone on a PC using IE5? (I don't have access to a Mac.)

Secondly, on a Mac using Safari the menu looks fine but on a page
where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
the thumbnails do not read across the screen from left to right, but
down in a column. The extra stylesheet for this page is at
<http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
changed this style sheet from using {float: left; } to using a
container with {text-align: center; } to get the thumbs to overflow
into the centre when they do not fit exactly on a line. How can I
overcome this problem?

I know there are ways of hiding style sheets from certain browsers,
but I'm a bit of a beginner here so not quite sure whether that is
what I have to do.

All this and my strawberry jam didn't set - not a good day :-(

 

[SpaceGirl]

I've recently been revamping my first web site and have moved my menu
to read down the left, using CSS. It all (HTML and CSS) validates,
and looks fine in MSIE6 and Opera 7.23. The menu uses a <ul> within a
div - <http://www.stonybrook-ludlow.co.uk/styles.css>

However, I am told that on a Mac using IE5, the menu items are huge
blocks, obviously oversized in width and height. Would it sort this
problem to give an explicit height to each <li>? I don't know what to
do about the width problem, since I have already given a specific
width to both the <ul> and the <li>. Can any one advise? And would
this problem be specific to the Mac, or is likely to be the same for
anyone on a PC using IE5? (I don't have access to a Mac.)

Mac IE is just weird - if your site works in IE 6 and Mozilla 1.3, you will
be okay with almost all other browsers. It is *essential* you test in
Mozilla tho, as it renders very "standard" markup. IE does *not* render
pages correctly even on a PC. We tend to write for Mozilla and "fix for IE"
these days, as the market is slowly sliding away from IE...

Secondly, on a Mac using Safari the menu looks fine but on a page
where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
the thumbnails do not read across the screen from left to right, but
down in a column. The extra stylesheet for this page is at
<http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
changed this style sheet from using {float: left; } to using a
container with {text-align: center; } to get the thumbs to overflow
into the centre when they do not fit exactly on a line. How can I
overcome this problem?

I'll take a wee look at your CSS shortly (no Macs here either btw)

I know there are ways of hiding style sheets from certain browsers,
but I'm a bit of a beginner here so not quite sure whether that is
what I have to do.

All this and my strawberry jam didn't set - not a good day :-(

Awwww Well, un-set jam - makes a great filler layer in a trifle or spread
inside a sponge cake

Miranda
(missing her bed, and skipped breakfast, edinburgh!)

 

[Steve Pugh]

I've recently been revamping my first web site and have moved my menu
to read down the left, using CSS. It all (HTML and CSS) validates,
and looks fine in MSIE6 and Opera 7.23. The menu uses a <ul> within a
div - <http://www.stonybrook-ludlow.co.uk/styles.css>
http://jigsaw.w3.org/css-validator/...ludlow.co.uk/pond.html&warning=1&profile=css2

However, I am told that on a Mac using IE5, the menu items are huge
blocks, obviously oversized in width and height. Would it sort this
problem to give an explicit height to each <li>? I don't know what to
do about the width problem, since I have already given a specific
width to both the <ul> and the <li>. Can any one advise?

Hmm, in Mozilla the menu items are the correct width but are much too
tall.

This is due to the style
li a
{
[snip]
display: block; width:100%; height:100%;
}

The height: 100%; is being interpreted as 100% of the browser window.

I would delete the width:100%; and height:100%; as they don't appear
to be needed.

In addition I would change the selectors li and li a to
#navcontainer li and #navcontainer li a. Otherwise what happens when
you want to include a list in the content of a page?

And would
this problem be specific to the Mac, or is likely to be the same for
anyone on a PC using IE5? (I don't have access to a Mac.)

Mac IE5 and Win IE5 are totally different beasts.

You can sign up for a free 8 hour trial account on
http://www.browsercam.com/ to get screenshots of your page in many
different browsers.

Secondly, on a Mac using Safari the menu looks fine but on a page
where I have thumbnails <http://www.stonybrook-ludlow.co.uk/pond.html>
the thumbnails do not read across the screen from left to right, but
down in a column. The extra stylesheet for this page is at
<http://www.stonybrook-ludlow.co.uk/stylespond.css>. I've recently
changed this style sheet from using {float: left; } to using a
container with {text-align: center; } to get the thumbs to overflow
into the centre when they do not fit exactly on a line. How can I
overcome this problem?

Again Mozilla shows the same problem. Opera 7 and IE6 are only showing
what you want because your page triggers quirks mode wherein those two
browsers emulate the errors of IE5.

The problem here is that your images are wrapped in <p> elements and
<p> is a block element, and hence appears on a new line. Setting
displau: inline on the parent <div class="thumb"> really shouldn't
change that (IE is getting it wrong).

What you really want is display: inline-block; but only Opera and
Safari support that at present. Tricky, let me have lunch and I'll see
if I can find a solution.

Steve

 

[Sally Thompson]

Mac IE is just weird - if your site works in IE 6 and Mozilla 1.3, you will
be okay with almost all other browsers. It is *essential* you test in
Mozilla tho, as it renders very "standard" markup. IE does *not* render
pages correctly even on a PC. We tend to write for Mozilla and "fix for IE"
these days, as the market is slowly sliding away from IE...

OK, SpaceGirl, I have been meaning to download Mozilla for a while -
will do so.

I'll take a wee look at your CSS shortly (no Macs here either btw)

Will be interested in your comments.

 

[Sally Thompson]

http://jigsaw.w3.org/css-validator/...ludlow.co.uk/pond.html&warning=1&profile=css2

Whoops! Well, it did validate at one time but I've obviously changed
something. However - I don't quite understand the error message which
says:

Invalid number : font too few values for the property normal 100% :
normal 100%

Can I not write { font: normal 100%; } in my CSS then? What should I
write instead?

However, I am told that on a Mac using IE5, the menu items are huge
blocks, obviously oversized in width and height. Would it sort this
problem to give an explicit height to each <li>? I don't know what to
do about the width problem, since I have already given a specific
width to both the <ul> and the <li>. Can any one advise?

Hmm, in Mozilla the menu items are the correct width but are much too
tall.

This is due to the style
li a
{
[snip]
display: block; width:100%; height:100%;
}

The height: 100%; is being interpreted as 100% of the browser window.

I would delete the width:100%; and height:100%; as they don't appear
to be needed.

I will try this

In addition I would change the selectors li and li a to
#navcontainer li and #navcontainer li a. Otherwise what happens when
you want to include a list in the content of a page?

And I will change this too

Mac IE5 and Win IE5 are totally different beasts.

You can sign up for a free 8 hour trial account on
http://www.browsercam.com/ to get screenshots of your page in many
different browsers.

Thanks - hadn't realised that I could get a free trial.

Again Mozilla shows the same problem. Opera 7 and IE6 are only showing
what you want because your page triggers quirks mode wherein those two
browsers emulate the errors of IE5.

The problem here is that your images are wrapped in <p> elements and
<p> is a block element, and hence appears on a new line. Setting
displau: inline on the parent <div class="thumb"> really shouldn't
change that (IE is getting it wrong).

What you really want is display: inline-block; but only Opera and
Safari support that at present. Tricky, let me have lunch and I'll see
if I can find a solution.

Thanks, Steve - would be grateful for any input.

 

[Steve Pugh]

Whoops! Well, it did validate at one time but I've obviously changed
something. However - I don't quite understand the error message which
says:

Invalid number : font too few values for the property normal 100% :
normal 100%

Can I not write { font: normal 100%; } in my CSS then? What should I
write instead?

When you use the font shorthand you have several options, but if you
specify the font-size you must also specify the font-family.

The spec reads:
Value: [ [ <'font-style'> || <'font-variant'> ||
<'font-weight'> ]? <'font-size'> [ / <'line-height'> ]?
<'font-family'> ] | caption | icon | menu | message-box |
small-caption | status-bar | inherit

Which means
Either:
None or more of font-style, font-variant, font-weight
plus font-size
plus optionally / line-height
plus font-family
Or:
one of caption, icon, menu, message-box, small-caption, status-bar,
inherit

Thanks, Steve - would be grateful for any input.

Well, I've had my lunch and I'm about to have my dinner, but I still
can't think of a way to do what you want in Mozilla.

Win IE5, IE6 (quirks mode), Opera 7 (quirks mode) - display: inline;
"works"
Opera 7 (standards mode), Safari, Mac IE5 (question mark on the last
two) - display: inline-block works.
Mozilla, IE6 (standards mode) - neither works. Best you could hope for
would be to degrade to left floated blocks.

Now, let's assume that you'll stick with quirks mode as that gives you
a working solution in Win IE6 and hence covers the largest group of
users.

So we do this:
div.thumb { display: inline; }
div[class="thumb"] {float: left;}

Win IE doesn't understand the second line so only sees the code as it
is at present. Better browsers understand the second line and left
float the divs which automatically sets them back to display: block;
(which we want as display: inline; means that the height and width
will be ignored).

The only problem is that Opera and Safari which can display the blocks
centered will now float them to the left. It is very difficult to
apply different styles in the latest versions of Mozilla, Opera and
Safari without resorting to nastiness such as javascript browser
sniffing.

Steve

 

[Toby A Inkster]

IE does *not* render pages correctly even on a PC.

not "even", but "especially".

 

[SpaceGirl]

The only problem is that Opera and Safari which can display the blocks
centered will now float them to the left. It is very difficult to
apply different styles in the latest versions of Mozilla, Opera and
Safari without resorting to nastiness such as javascript browser
sniffing.

Steve

You could make an educated guess using a server side script to read the HTTP
header - I wrote a little script that looks in the header and pulls out the
browser string and will alter *some* stylesheets depending on what it find.
Now, some browsers do lie about what they are, but it's "mostly accurate".

 

[Sally Thompson]

Hmm, in Mozilla the menu items are the correct width but are much too
tall.

<snip>
Steve, thanks so much for your advice on this. I have made the
changes you suggested here and below.

Again Mozilla shows the same problem. Opera 7 and IE6 are only showing
what you want because your page triggers quirks mode wherein those two
browsers emulate the errors of IE5.

The problem here is that your images are wrapped in <p> elements and
<p> is a block element, and hence appears on a new line. Setting
displau: inline on the parent <div class="thumb"> really shouldn't
change that (IE is getting it wrong).

In fact, the need for the <p> (the captions under each thumbnail) has
now reduced with the revised layout, so I have removed them
altogether. I have now also downloaded Mozilla (thanks, SpaceGirl)
and the pages look fine in that now. Thanks again to you both, and
also, I should say, to Els, whose good advice I have also taken on
board.