Hi,
I've been trying, but failing to work out what is causing Opera to
render my drop down menu incorrectly on my site.

http://www.lachy.id.au/

For some reason, there seems to be extra margin added below each list
item, that gets bigger for each subsequent item.  Can someone please
take a look and see if they can find my problem?  It works almost
perfectly in Firefox so you can see how it should look.  It degrades
quite a lot in IE, there's only one hack in there to make it at least
readable.

The style sheet is:
http://www.lachy.id.au/lib/style/basic/coolblue
(It does validate, with the exception of -moz-border-radius which I'm
just experimenting with)

Finally, if someone could let me know how good or bad it looks in
Safari, that would be good too.  But I'll fix those problems when I buy
my first Mac in a few weeks.

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to abuse@127.0.0.1
Thank you.

I don't have Opera installed (I'm a Firefox man) but your site looks good.
You're not wrong about it degrading horribly in IE :-)

Which town in central NSW are you from? I'm in Tamworth (and I don't like
country music, either ;-)

Frostillicus wrote:
> I don't have Opera installed (I'm a Firefox man) but your site looks good.

Thank you.

> You're not wrong about it degrading horribly in IE :-)

Yeah, I know.  That's why I call it Internet Exploder ☺

> Which town in central NSW are you from? I'm in Tamworth (and I don't like
> country music, either ;-)

Well, it's off topic, but ok, I'm originally from Parkes, but have since
moved to Sydney for work.

--
Lachlan Hunt ☺
http://www.lachy.id.au/

Please direct all spam to abuse@127.0.0.1
Thank you.

Lachlan Hunt wrote:

> Hi,
>    I've been trying, but failing to work out what is
>    causing Opera to
> render my drop down menu incorrectly on my site.
>
>    http://www.lachy.id.au/
>
> For some reason, there seems to be extra margin added below
> each list item, that gets bigger for each subsequent item.
> Can someone please take a look and see if they can find my
> problem?

Haven't looked at all the possibilities, but if you change:
#sitenav li { margin: 0; padding: 0; text-align: center;min-
height:100%;}
to:
#sitenav li { margin: 0; padding: 0; text-align: center;min-
height:40%;}
the problem seems to disappear (in my 'only the menu'-test).

Could well be that this has to do with one of the other
properties somewhere in the code though.

> It works almost perfectly in Firefox so you can
> see how it should look.  It degrades quite a lot in IE,
> there's only one hack in there to make it at least
> readable.

In my IE6.0 WinXP, I get a 406 : Not accepted. My own local
copy does work however...
Could enhance it a tiny bit more by centering the page though
:-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:

> Lachlan Hunt wrote: 
>
>
> Haven't looked at all the possibilities, but if you change:
> #sitenav li { ... min-height:100%;}
> to:
> #sitenav li { ... min-height:40%;}
> the problem seems to disappear (in my 'only the menu'-test).

Thank you, that was essentially the problem.  I ended up just taking it
out, and setting the height to 2em instead.  The menu now works
perfectly well in Opera, though I can't work out how to get the text for
each menu item to be vertically centered within it's block without
adding supurflous <span>s to the mark up.

The method I was using that works in Firefox:

#sitenav li a { ... padding: .4em 0; line-height: 1.2em; }

which should add to 2em, thus vertically centering within a box that is
2em high, was being miscalculated by Opera due to what looks like a
rounding error, leaving a 1px gap between each menu item.

Oh well, unless someone can suggest another method, I'll just live with
it.  I tried display: table; vertical-align: middle; but it caused other
problems.

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to abuse@127.0.0.1
Thank you.

Lachlan Hunt wrote:

> Els wrote:
> 
>
> Thank you, that was essentially the problem.  I ended up
> just taking it out, and setting the height to 2em instead.
> The menu now works perfectly well in Opera, though I can't
> work out how to get the text for each menu item to be
> vertically centered within it's block without adding
> supurflous <span>s to the mark up.

Setting the line-height to the same as the height I think.

> The method I was using that works in Firefox:
>
> #sitenav li a { ... padding: .4em 0; line-height: 1.2em; }
>
> which should add to 2em, thus vertically centering within a
> box that is 2em high,

Ah, you did that already :-)

> was being miscalculated by Opera due
> to what looks like a rounding error, leaving a 1px gap
> between each menu item.

And what if you anticipate that error and put the line-height
to 2.1em? Or take the .4em padding out? If the line-height is
equal to the height, padding should be obsolete, I think?

What I don't get, actually, is what you are seeing in Opera.
I've just taken out the min-height:40% that I had in it, and
afaics the menu items are all vertically centered in their
respective little boxes:

http://locusmeus.com/temp/lachlan.html

(Opera 7.51)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Els wrote:
> ... If the line-height is
> equal to the height, padding should be obsolete, I think?

I didn't realise that was how line-height worked — it's one of those
properties that has always confused me.  I made the change, the padding
is gone and line-height is now 2em and it works perfectly.

> What I don't get, actually, is what you are seeing in Opera.
> I've just taken out the min-height:40% that I had in it, and
> afaics the menu items are all vertically centered in their
> respective little boxes:
>
> http://locusmeus.com/temp/lachlan.html

I thought I tried that, but it seemed to cause another strange bug
firefox.  I guess I must have inadvertently made a syntax error or
something.  I don't know what was causing the 1px gap in Opera, I
haven't been able to replicate it since.

Thanks again, it now works exactly the way I intended.  I even figured
out how to fix the overlapping borders in Opera.  So, except for the
unavoidable rounding error between the edges of the sidebar and menu,
it's all pixel-perfect in both Opera and Firefox...  Safari's my next
problem, but that will have to wait until I get around to buying my
first Mac.

One thing I don't understand is what caused IE to change the way it was
rendering the menu?  I had to update the IE hack so it didn't cover up
any content, but I guess it's a slight improvement for it anyway.  If
you want to see what I mean, remove the width from the * html hack at
the end of the file. However, I think it's just one of those
unexplainable mysteries of the universe like nearly every other bug in IE.

--
Lachlan Hunt
http://www.lachy.id.au/

Please direct all spam to abuse@127.0.0.1
Thank you.

Lachlan Hunt wrote:

> One thing I don't understand is what caused IE to change
> the way it was rendering the menu?  I had to update the IE
> hack so it didn't cover up any content, but I guess it's a
> slight improvement for it anyway.  If you want to see what
> I mean, remove the width from the * html hack at the end of
> the file. However, I think it's just one of those
> unexplainable mysteries of the universe like nearly every
> other bug in IE.

What I still don't get, is that I still get a 406 in IE...
Your server and my IE are in war or something? The local copy
"works" in IE. (on Apache 2.0.49.0 under WinXP)

--
Els                     http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Christina Aquilera - Get Mine, Get Yours

On Sat, 21 Aug 2004, Els wrote:

> Lachlan Hunt wrote:
> 

(IE moves in wondrous ways...)

> What I still don't get, is that I still get a 406 in IE...

Are you talking about http://www.lachy.id.au/  ?

> Your server and my IE are in war or something?

That server is saying:

| Vary: negotiate,accept

which indicates (at least if all is working to plan) that the answer
is to be sought in the Accept: header that you are presenting.  (I.e
that any Accept-charset, Accept-language ... which might be presented
are not germane to the issue).

If I provoke a 406 from that server, its response headers include
this:

Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
Alternates: {"index.html" 1 {type text/html} {language en-au}
},
{"index.xhtml" 1 {type application/xhtml+xml} {language en-au
}}

which kind-of confirms that language isn't the issue, since
the only language variants available are all en-au.  (This seems
to be working OK - that server is still returning the en-au variant
even if I tell it that I only accept Afrikaans.[1])

I think we need to know what Accept: header your IE is presenting
(can you find out?).

I know that mine presents this, without any interference on my part
(beyond having installed MS Office, I mean):

HTTP_ACCEPT = application/vnd.ms-excel, application/msword,
application/vnd.ms-powerpoint, image/gif, image/x-xbitmap, image/jpeg,
image/pjpeg, */*

which means that under the provisions of the wildcard (*/*) it is
willing to receive text/html -or- any of the various XHTML
content-types, even though IE has little idea what to do with those
when it gets them (some would say much the same about its reaction to
text/html, but I digress).

But that header can be doctored (I'm told, by those with a willingness
to go tinkering with the registry...).  Possibly it also gets adjusted
by one or other "fix" from galactic HQ, I don't know.

cheers

[1] No special reason for choosing Afrikaans, except that it's right
at the top of the menu ;-)

Alan J. Flavell wrote:

> On Sat, 21 Aug 2004, Els wrote:
> 
>
> (IE moves in wondrous ways...)
> 
>
> Are you talking about http://www.lachy.id.au/  ?

Yes.
 
>
> That server is saying:
>
>| Vary: negotiate,accept
>
> which indicates (at least if all is working to plan) that
> the answer is to be sought in the Accept: header that you
> are presenting.  (I.e that any Accept-charset,
> Accept-language ... which might be presented are not
> germane to the issue).

And how would I change that?

> If I provoke a 406 from that server, its response headers
> include this:
>
> Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
> Alternates: {"index.html" 1 {type text/html} {language
> en-au}}, {"index.xhtml" 1 {type application/xhtml+xml}
> {language en-au}}
>
> which kind-of confirms that language isn't the issue, since
> the only language variants available are all en-au.  (This
> seems to be working OK - that server is still returning the
> en-au variant even if I tell it that I only accept
> Afrikaans.[1])
>
> I think we need to know what Accept: header your IE is
> presenting (can you find out?).

How?

> I know that mine presents this, without any interference on
> my part (beyond having installed MS Office, I mean):
>
> HTTP_ACCEPT = application/vnd.ms-excel, application/msword,
> application/vnd.ms-powerpoint, image/gif, image/x-xbitmap,
> image/jpeg, image/pjpeg, */*
>
> which means that under the provisions of the wildcard (*/*)
> it is willing to receive text/html -or- any of the various
> XHTML content-types, even though IE has little idea what to
> do with those when it gets them (some would say much the
> same about its reaction to text/html, but I digress).

But this is the very first time I ever had a 406 from anywhere
in the world...

> But that header can be doctored (I'm told, by those with a
> willingness to go tinkering with the registry...).
> Possibly it also gets adjusted by one or other "fix" from
> galactic HQ, I don't know.
>
> cheers
>
> [1] No special reason for choosing Afrikaans, except that
> it's right at the top of the menu ;-)

Plus I'd understand it ;-)

--
Els                     http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Diana Ross & Supremes - Motown Hits  medley