«

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


--
Sally in Shropshire, UK
bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
Reply To address is spam trap

"Sally Thompson" <> wrote in message
news:...
>
> 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

> --
> Sally in Shropshire, UK
> bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
> Reply To address is spam trap

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

(Sally Thompson) wrote:

>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/v...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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

On Thu, 17 Jun 2004 11:57:17 +0100, "SpaceGirl"
<> wrote:

>
>"Sally Thompson" <> wrote in message
>news:...
>>
<snip>
>>
>> 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...

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

>> 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)

Will be interested in your comments.

--
Sally in Shropshire, UK
bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
Reply To address is spam trap

On Thu, 17 Jun 2004 12:22:22 +0100, Steve Pugh <> wrote:

> (Sally Thompson) wrote:
>
>>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/v...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

>>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.

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

>>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.

Thanks, Steve - would be grateful for any input.

--
Sally in Shropshire, UK
bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
Reply To address is spam trap

(Sally Thompson) wrote:
>On Thu, 17 Jun 2004 12:22:22 +0100, Steve Pugh <> wrote:
>> (Sally Thompson) wrote:
>>
>>>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/v...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?

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

>>>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.
>
>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

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <> <http://steve.pugh.net/>

SpaceGirl wrote:

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

not "even", but "especially".

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

<snip a really good reply>

> 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".

On Thu, 17 Jun 2004 12:22:22 +0100, Steve Pugh <> wrote:

> (Sally Thompson) wrote:
>
>>I've recently been revamping my first web site
<snip>
>>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.
<snip>
Steve, thanks so much for your advice on this. I have made the
changes you suggested here and below.

>>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.
<snip>

>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.


--
Sally in Shropshire, UK
bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
Reply To address is spam trap