CSS Menu - comments and suggestions please

[Thomas Mlynarczyk]

Hi,

Could some kind person using Mac or Linux (or others) please take a look at

http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html

and tell me if the page renders as it should (screenshot provided on the
page)? Never mind the colors, this is just to test the functionality. The
page validates (HTML & CSS), and seems to "work" as expected on Windows
(IE5+, OP5+, NN5+, Mozilla & Firefox). I know the styles won't work on IE4
or NN4 (later they will be served just the plain HTML). But I have no idea
what non-Windows browses will do with these styles. Especially the
horizontal menu seems problematic as I had to use a hack to serve Opera5
different rules (apart from the usual "extras" for IE) and so I'm not sure
how other browsers might react to that. I wonder if there is a simpler, more
straight forward, way of doing the horizontal menu.

My goal was menus that use no extra markup whatsoever (besides the
<ul><li><a>) and give the designer the ability to freely use all visual
properties (margin, border, padding, background) for all the elements
involved and achieving the same rendering in "all" browsers.

Greetings,
Thomas

[Philip Ronan]

Thomas Mlynarczyk wrote:

Could some kind person using Mac or Linux (or others) please take a look at

http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html

and tell me if the page renders as it should (screenshot provided on the
page)?

Looks rather bad in IE 5.1 on a Mac:

http://vzone.virgin.net/phil.ronan/junk/mlynarczyk.png

--
phil [dot] ronan @ virgin [dot] net
http://vzone.virgin.net/phil.ronan/

[Nik Thomas]

Thomas Mlynarczyk.exe failed a Turing test with

http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html

and tell me if the page renders as it should (screenshot provided on
the page)? Never mind the colors, this is just to test the
functionality. The page validates (HTML & CSS), and seems to "work"
as expected on Windows (IE5+, OP5+, NN5+, Mozilla & Firefox).

Are you aware that on IE5.5/Win the grey container with Items 1 to 6 in
stretches to about 95% of screen width?

Nik

--
I wish to be dissociated from your interpretation of my opinions

Few men think, but all have opinions.

[Thomas Mlynarczyk]

Also sprach Nik Thomas:

http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html

Are you aware that on IE5.5/Win the grey container with Items 1 to 6
in stretches to about 95% of screen width?

Yes, it is set to width: 100%; and there are the body's default margins
making it appear to be about 95% I suppose. The screenshot was clipped,
that's why it doesn't show the "extra width" of the grey container.

[Thomas Mlynarczyk]

Also sprach Philip Ronan:

http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html

Looks rather bad in IE 5.1 on a Mac:
http://vzone.virgin.net/phil.ronan/junk/mlynarczyk.png

Ouch! I was afraid of that. Theoretically it should be possible to fix it,
but without having MacIE at my disposal it will be a bit difficult. Does
removing the "* html ..." rules help?

Thanks for the screenshot. I will read up a bit on MacIE issues and try to
modify the styles.

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Thomas Mlynarczyk wrote:

Also sprach Philip Ronan:

http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html

Looks rather bad in IE 5.1 on a Mac:
http://vzone.virgin.net/phil.ronan/junk/mlynarczyk.png

Ouch! I was afraid of that. Theoretically it should be possible to fix it,
but without having MacIE at my disposal it will be a bit difficult. Does
removing the "* html ..." rules help?

Thanks for the screenshot. I will read up a bit on MacIE issues and try to
modify the styles.

Biggest problem is most likely that MacIE don't shrink wrap floats. And
unlike old operas, there is no way to make it, AFAIK. Setting max-width
don't work either on Mac-ie, IIRC...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

[Christoph Paeper]

*Lauri Raittila* <la***@raittila.cjb.net>:

Biggest problem is most likely that MacIE don't shrink wrap floats. And
unlike old operas, there is no way to make it, AFAIK.

Wasn't "display: inline-block" with a MacIE specific selector ("*>html"
....) the ha^Wsolution? I never had the chance nor need to try that, though.

--
Useless Facts #5:
In the English language 'dreamt' is the only word that ends in the letters 'mt',
'I am.' is the shortest complete sentence and the longest one-syllable words are
'screeched', 'stretched' and 'strengths'.

[Thomas Mlynarczyk]

Also sprach Christoph Paeper:

Biggest problem is most likely that MacIE don't shrink wrap floats.
That would explain the "full width" of the vertical menu from the screenshot
Philip provided.
And unlike old operas, there is no way to make it, AFAIK.

Wasn't "display: inline-block" with a MacIE specific selector
("*>html" ...) the ha^Wsolution? I never had the chance nor need to
try that, though.

In the vertical menu, I use the floating only to fix a bug where IE5 shows
spaces and gaps between the list items. So, maybe I can simply hide those
fixes from MacIE using

/* Fix IE Win \*/
* html #vmenu li a,
* html #vmenu ul { height: 1px; }
* html #vmenu li { float: left; display: inline; }
/* End Fix */

But I'm not sure if MacIE still needs the height for the <a> to fix the
click area bug.

[Thomas Mlynarczyk]

Also sprach Philip Ronan:

Looks rather bad in IE 5.1 on a Mac:
http://vzone.virgin.net/phil.ronan/junk/mlynarczyk.png

I have modified the styles hiding some possibly offending rules from MacIE
(I hope - haven't tried it before). The new version is here:

http://www.mlynarczyk-webdesign.de/tmp/menu/menu2.html

Does this change anything on MacIE?

[Philip Ronan]

Thomas Mlynarczyk wrote:

Also sprach Philip Ronan:

Looks rather bad in IE 5.1 on a Mac:
http://vzone.virgin.net/phil.ronan/junk/mlynarczyk.png

I have modified the styles hiding some possibly offending rules from MacIE
(I hope - haven't tried it before). The new version is here:

http://www.mlynarczyk-webdesign.de/tmp/menu/menu2.html

Does this change anything on MacIE?

Not really.
http://vzone.virgin.net/phil.ronan/junk/mlynarczyk2.png

--
phil [dot] ronan @ virgin [dot] net
http://vzone.virgin.net/phil.ronan/

[Thomas Mlynarczyk]

Also sprach Philip Ronan:

[First fix]

Does this change anything on MacIE?

Not really.
http://vzone.virgin.net/phil.ronan/junk/mlynarczyk2.png

But there's already some significant improvement. Only problem: the menu
width. Now I've hidden *all* IE specific rules from Mac - how does it look?

http://www.mlynarczyk-webdesign.de/tmp/menu/menu3.html

[Philip Ronan]

Thomas Mlynarczyk wrote:

Also sprach Philip Ronan:

[First fix]

Does this change anything on MacIE?

Not really.
http://vzone.virgin.net/phil.ronan/junk/mlynarczyk2.png

But there's already some significant improvement. Only problem: the menu
width. Now I've hidden *all* IE specific rules from Mac - how does it look?

http://www.mlynarczyk-webdesign.de/tmp/menu/menu3.html

Just as bad, if not worse.

I'm not sure what you're doing wrong, but perhaps you could try adapting my
menu at <http://www.japanesetranslator.co.uk/>. (Actually, please let me
know if you have any problems with it!)

Phil

--
phil [dot] ronan @ virgin [dot] net
http://vzone.virgin.net/phil.ronan/

[David Button]

In article <cp*************@news.t-online.com>, Thomas Mlynarczyk
<bl*************@hotmail.com> wrote:

Also sprach Philip Ronan:

[First fix]

Does this change anything on MacIE?

Not really.
http://vzone.virgin.net/phil.ronan/junk/mlynarczyk2.png

But there's already some significant improvement. Only problem: the menu
width. Now I've hidden *all* IE specific rules from Mac - how does it look?

http://www.mlynarczyk-webdesign.de/tmp/menu/menu3.html

Tweaked your CSS a bit. Results can be seen here:
http://www.outthere.plus.com/menutest/menu3.html

Summary of changes:
Enclosed the 2 horiz & vert <ul> menus in <div>s containing plain CSS
styled lists.
Removed most display:xxx & float:xxx rules.
Removed some of the hacks - I often find these more trouble than
they're worth.

Mostly I've just commented out your original CSS rules so you can see
where changes were made.

For additional info I've added a section in the page with links to
screenshots of the modified page in various Mac OSX browsers. There's
still a bit of glitch with Mac IE on the red borders of the horiz menu
items, but it's something I'd be prepared to ignore.

I'm not keen on how you've done those double borders on the <li> and
enclosed <a> elements anyway. Personally, I'd drop the borders from the
inner <a> elements and just leave the borders on the outer <li>s.
Ultimately though, it's up to you to decide to handle them. You can
tweak the spacing via the margin & padding properties if you need to.

I'll leave it up to you to test this on the various Windows browsers (I
don't have a PC), but I've done the commonest Mac ones for you.

--
Dave

[Thomas Mlynarczyk]

Also sprach Philip Ronan:

http://www.mlynarczyk-webdesign.de/tmp/menu/menu3.html Just as bad, if not worse.

Not even the width of the vertical menu correct now? :-((( How come? I have
specified an explicit width on the outer <ul> and "inside" there's nothing
that, to my knowledge, could possibly override it.
I'm not sure what you're doing wrong, but perhaps you could try
adapting my menu at <http://www.japanesetranslator.co.uk/.
Thanks for the link - I have "re-done" the horizontal menu, resigning on
using the extra <li> borders - I will put another test page online later. It
seems there is no real cross-browser way of having both the <li> and <a>
behave as intended.
(Actually, please let me know if you have any problems with it!)

None at all :-)

[Thomas Mlynarczyk]

Also sprach David Button:

Tweaked your CSS a bit. Results can be seen here:
http://www.outthere.plus.com/menutest/menu3.html
Thanks a lot, David! :-)
Summary of changes:
Enclosed the 2 horiz & vert <ul> menus in <div>s containing plain CSS
styled lists.
Is that really necessary? I mean, judging from the styling of the divs,
there's nothing, that, to my knowledge, couldn't be done as well in the <ul>
tags. From the screenshot provided by Philip I can see that the vertical
menu looked already almost okay, except for the width, and I don't
understand why IEMac seems to ignore my explicit width specification in the
outer <ul> (it is reset to "auto" for the inner <ul>s). Is the surrounding
div required to fix that? It would be more elegant if one could do without
the extra divs.
Removed most display:xxx & float:xxx rules.
Removed some of the hacks - I often find these more trouble than
they're worth.
Yes, it seems, one cannot make the horizontal menu behave on all browsers
making full use of both the <li> and <a> elements. So I guess I can use only
the <a> elements for the "real" styling. :-(
For additional info I've added a section in the page with links to
screenshots of the modified page in various Mac OSX browsers. There's
still a bit of glitch with Mac IE on the red borders of the horiz menu
items, but it's something I'd be prepared to ignore.
Thanks a lot :-)
I'm not keen on how you've done those double borders on the <li> and
enclosed <a> elements anyway. Personally, I'd drop the borders from
the inner <a> elements and just leave the borders on the outer <li>s.
Well, as I had pointed out, this is not supposed to be good looking, but
just to make sure that, using this "base" for styling, I can freely set
backgrounds, margins, paddings and borders on *all* elements and it will
behave as expected on "all" browsers, so I don't have to re-invent the wheel
every time. With this test menu I want to find out which bugs or
inconsistencies there are between different browsers and find a way to fix
them "once and for all". Thus, later, I can concentrate on the real styling
for design without having to worry about different browsers.
I'll leave it up to you to test this on the various Windows browsers
(I don't have a PC), but I've done the commonest Mac ones for you.

Thanks again. I guess I should really consider getting myself a Mac. (Hey,
Santa Claus, are you reading this?)

[David Button]

In article <cq*************@news.t-online.com>, Thomas Mlynarczyk
<bl*************@hotmail.com> wrote:

Also sprach David Button:

Tweaked your CSS a bit. Results can be seen here:
http://www.outthere.plus.com/menutest/menu3.html

Thanks a lot, David! :-)

Summary of changes:
Enclosed the 2 horiz & vert <ul> menus in <div>s containing plain CSS
styled lists.

Is that really necessary? I mean, judging from the styling of the divs,
there's nothing, that, to my knowledge, couldn't be done as well in the <ul>
tags. From the screenshot provided by Philip I can see that the vertical
menu looked already almost okay, except for the width, and I don't
understand why IEMac seems to ignore my explicit width specification in the
outer <ul> (it is reset to "auto" for the inner <ul>s). Is the surrounding
div required to fix that? It would be more elegant if one could do without
the extra divs.

Not sure it's strictly necessary - it's just a method I've used
previously to produce similar CSS menu structures that have worked
pretty well in most browsers, Mac & Win. In Mac IE with your original
page there was some weird overlapping between the horiz & vert menus -
enclosing each menu in a <div> helped to seperate them and prevent
this.

Removed most display:xxx & float:xxx rules.
Removed some of the hacks - I often find these more trouble than
they're worth.

Yes, it seems, one cannot make the horizontal menu behave on all browsers
making full use of both the <li> and <a> elements. So I guess I can use only
the <a> elements for the "real" styling. :-(

Looks that way if you want it exactly the same in all browsers.

For additional info I've added a section in the page with links to
screenshots of the modified page in various Mac OSX browsers. There's
still a bit of glitch with Mac IE on the red borders of the horiz menu
items, but it's something I'd be prepared to ignore.

Thanks a lot :-)

I'm not keen on how you've done those double borders on the <li> and
enclosed <a> elements anyway. Personally, I'd drop the borders from
the inner <a> elements and just leave the borders on the outer <li>s.

Well, as I had pointed out, this is not supposed to be good looking, but
just to make sure that, using this "base" for styling, I can freely set
backgrounds, margins, paddings and borders on *all* elements and it will
behave as expected on "all" browsers, so I don't have to re-invent the wheel
every time. With this test menu I want to find out which bugs or
inconsistencies there are between different browsers and find a way to fix
them "once and for all". Thus, later, I can concentrate on the real styling
for design without having to worry about different browsers.

Ah yes, I'd forgotten/overlooked that this was just an experimental
test. For what it's worth, I wouldn't worry too much about Mac IE as
it's a 'dead' browser now that MS have announced there won't be any
further development of it. There are probably still some Mac IE users
around, most probably on OS8/9, but that too is a 'dead' OS as Apple
are no longer developing it. Most MacOSX users will probably be using
Safari or Firefox as their browser, both of which are fairly well
behaved when it comes to CSS standards.

If you don't have a Mac for testing, I'd recommend you build/test using
Firefox for PC, and you can be fairly confident that whatever works
there will work much the same in Mac OSX Safari/Firefox/Camino
browsers.

I'll leave it up to you to test this on the various Windows browsers
(I don't have a PC), but I've done the commonest Mac ones for you.

Thanks again. I guess I should really consider getting myself a Mac. (Hey,
Santa Claus, are you reading this?)

Still believe in Santa Claus then? :)

[Thomas Mlynarczyk]

Also sprach David Button:

pretty well in most browsers, Mac & Win. In Mac IE with your original
page there was some weird overlapping between the horiz & vert menus -
enclosing each menu in a <div> helped to seperate them and prevent
this.
So the width of the vertical menu was okay after all? Or maybe the
horizontal one somehow "spoiled" the vertical one's width?
Ah yes, I'd forgotten/overlooked that this was just an experimental
test. For what it's worth, I wouldn't worry too much about Mac IE as
it's a 'dead' browser now that MS have announced there won't be any
further development of it. There are probably still some Mac IE users
around, most probably on OS8/9, but that too is a 'dead' OS as Apple
are no longer developing it. Most MacOSX users will probably be using
Safari or Firefox as their browser, both of which are fairly well
behaved when it comes to CSS standards.
Does @media screen { /* blah */ } hide from IE Mac? If I can't manage with
this browser, I should feed it plain HTML, so the page will at least be
usable, which might not be the case if it does weird things with the styles.
If you don't have a Mac for testing, I'd recommend you build/test
using Firefox for PC, and you can be fairly confident that whatever
works there will work much the same in Mac OSX Safari/Firefox/Camino
browsers.
I usually test (on Windows XP) IE 5.0 / 5.5 / 6.0, OP 5 / 6 / 7, NN 6 / 7,
Mozilla 1 and Firefox 1. Plus validated HTML 4.01 Strict (with URL in
doctype to force IE into standards mode) plus validated CSS plus plain HTML
testing with IE4 and NN4 plus Lynx plus Opera's small screen rendering mode
plus without images plus an occasional screenshot from iCapture (Safari).
But it seems this still does not "guarantee Mac IE"...
Still believe in Santa Claus then? :)

If it will make him give me a Mac for Xmas, yes! :-)

[David Button]

In article <cq*************@news.t-online.com>, Thomas Mlynarczyk
<bl*************@hotmail.com> wrote:

Also sprach David Button:

pretty well in most browsers, Mac & Win. In Mac IE with your original
page there was some weird overlapping between the horiz & vert menus -
enclosing each menu in a <div> helped to seperate them and prevent
this.

So the width of the vertical menu was okay after all? Or maybe the
horizontal one somehow "spoiled" the vertical one's width?

Pretty much. After fixing the horiz menu, the vert one behaved mostly
as you wanted/expected it to. Further mods on the vert menu were mainly
to fix the indents on the nested lists which weren't quite as you
wanted in Mac IE.

Ah yes, I'd forgotten/overlooked that this was just an experimental
test. For what it's worth, I wouldn't worry too much about Mac IE as
it's a 'dead' browser now that MS have announced there won't be any
further development of it. There are probably still some Mac IE users
around, most probably on OS8/9, but that too is a 'dead' OS as Apple
are no longer developing it. Most MacOSX users will probably be using
Safari or Firefox as their browser, both of which are fairly well
behaved when it comes to CSS standards.

Does @media screen { /* blah */ } hide from IE Mac? If I can't manage with
this browser, I should feed it plain HTML, so the page will at least be
usable, which might not be the case if it does weird things with the styles.

I believe it does. There's also an @import hack that makes imported
styles only visible to Mac IE, and a CSS comment hack that applies
affected styles in Mac IE only. Here's a few links re Mac IE CSS
bugs/quirks/hacks:
http://www.macedition.com/cb/ie5macbugs/
http://www.oreillynet.com/pub/a/java...5/css_pitfalls.
html?page=1
http://w3development.de/css/hide_css_from_browsers/
http://css-discuss.incutio.com/?page=CssHack
http://www.l-c-n.com/IE5tests/

If you don't have a Mac for testing, I'd recommend you build/test
using Firefox for PC, and you can be fairly confident that whatever
works there will work much the same in Mac OSX Safari/Firefox/Camino
browsers.

I usually test (on Windows XP) IE 5.0 / 5.5 / 6.0, OP 5 / 6 / 7, NN 6 / 7,
Mozilla 1 and Firefox 1. Plus validated HTML 4.01 Strict (with URL in
doctype to force IE into standards mode) plus validated CSS plus plain HTML
testing with IE4 and NN4 plus Lynx plus Opera's small screen rendering mode
plus without images plus an occasional screenshot from iCapture (Safari).
But it seems this still does not "guarantee Mac IE"...

You seem to have it pretty well covered there on the non-Mac side. Mac
IE certainly does have it's own unique bugs/quirks which often require
their own unique fixes/hacks - see links above.

Personally, I'm in the 'keep it (CSS) simple' camp.
http://digital-web.com/articles/keep_css_simple/
I've sorta given up on trying to make, or expecting, my CSS layouts to
be pixel perfect in ALL browsers, and as long as they work to a
reasonable degree then I'm prepared to ignore any minor rendering
differences. (That does depend a bit on what the actual differences are
between browsers, how much they annoy me, and whether I'm prepared to
jump through hoops to fix them).

Still believe in Santa Claus then? :)

If it will make him give me a Mac for Xmas, yes! :-)

Hope that Dual G5 will fit down your chimney. :)

[Thomas Mlynarczyk]

Also sprach David Button:

So the width of the vertical menu was okay after all? Or maybe the
horizontal one somehow "spoiled" the vertical one's width?
Pretty much. After fixing the horiz menu, the vert one behaved mostly
as you wanted/expected it to. Further mods on the vert menu were
mainly to fix the indents on the nested lists which weren't quite as
you wanted in Mac IE.

Well, it doesn't really matter if submenus are indented by 10px or by 12px -
as long as it is a) as usable as the intended rendering and b) would receive
exactly the same "beauty contest rating". Thus, if I used the vertical menu
as of my last version alone on a page, it should be okay?

Does @media screen { /* blah */ } hide from IE Mac? If I can't
manage with this browser, I should feed it plain HTML, so the page
will at least be usable, which might not be the case if it does
weird things with the styles. I believe it does.
I'm still looking for the optimal way of handling stylesheets. For the
moment I use <link media> with an additional @media in the stylesheets. This
seems to hide them from NN4 (with IE4 I'm not sure - I must retest) and also
allows me to combine e.g. screen, print and projection media in one css file
in which I first have a @media section for all three and then two extra
@media sections to make the necessary modifications for print and
projection. Similarly, I combine handheld and tv (they both get the same
styles) and lastly, I can have a third one for aural.
There's also an @import hack that makes imported
styles only visible to Mac IE, and a CSS comment hack that applies
I prefer having a "clean HTML" file, i.e. without any styles or script
*embedded*.
affected styles in Mac IE only. Here's a few links re Mac IE CSS
bugs/quirks/hacks:
http://www.macedition.com/cb/ie5macbugs/
http://www.oreillynet.com/pub/a/java...5/css_pitfalls.
html?page=1
http://w3development.de/css/hide_css_from_browsers/
http://css-discuss.incutio.com/?page=CssHack
http://www.l-c-n.com/IE5tests/
Thanks for the links.
Personally, I'm in the 'keep it (CSS) simple' camp.
http://digital-web.com/articles/keep_css_simple/

I agree. But the /*/*/ ... /* */ hack would fall in the dead browser
category, wouldn't it? So would the /* \*/ hack as Mac IE is no longer being
developed. The "* html" hack is actually not hiding anything, but rather
making IE see things. Of course, one does not know what IE7 will do, but as
IE is the most used browser... besides, I consider it unlikely that M$ would
"remove" this hack. Then, of course, things like "div { float: left;
display: inline; margin-left: 10px }" (the inline display preventing IE from
doubling the left margin) can be considered harmless too as they don't
violate the standards (float makes the element block by default and anything
but "none" for display is to be ignored).

Still believe in Santa Claus then? :)

If it will make him give me a Mac for Xmas, yes! :-)

Hope that Dual G5 will fit down your chimney. :)

No need to worry. Here in Germany, Santa doesn't enter by the chimney.

[kchayka]

Thomas Mlynarczyk wrote:

http://www.mlynarczyk-webdesign.de/tmp/menu/menu3.html

It
seems there is no real cross-browser way of having both the <li> and <a>
behave as intended.

Sure there is:
<URL:http://accessat.c-net.us/test/menu-5.html>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[David Button]

In article <cq*************@news.t-online.com>, Thomas Mlynarczyk
<bl*************@hotmail.com> wrote:

Also sprach David Button:

Pretty much. After fixing the horiz menu, the vert one behaved mostly
as you wanted/expected it to. Further mods on the vert menu were
mainly to fix the indents on the nested lists which weren't quite as
you wanted in Mac IE.
Well, it doesn't really matter if submenus are indented by 10px or by 12px -
as long as it is a) as usable as the intended rendering and b) would receive
exactly the same "beauty contest rating". Thus, if I used the vertical menu
as of my last version alone on a page, it should be okay?

Yep, your previous version was mostly ok for the vert menus - it was
just the indenting that went a bit astray but not unusably so.

Personally, I'm in the 'keep it (CSS) simple' camp.
http://digital-web.com/articles/keep_css_simple/

I agree. But the /*/*/ ... /* */ hack would fall in the dead browser
category, wouldn't it? So would the /* \*/ hack as Mac IE is no longer being
developed. The "* html" hack is actually not hiding anything, but rather
making IE see things. Of course, one does not know what IE7 will do, but as
IE is the most used browser... besides, I consider it unlikely that M$ would
"remove" this hack. Then, of course, things like "div { float: left;
display: inline; margin-left: 10px }" (the inline display preventing IE from
doubling the left margin) can be considered harmless too as they don't
violate the standards (float makes the element block by default and anything
but "none" for display is to be ignored).

As per the linked article, Mac IE only hacks would be permissible as
it's in the 'dead' browser category. It's really up to you to decide if
you want to include other (Win) IE hacks.

kchayka's solution posted elsewhere in this thread worked very well in
Mac IE & Firefox - even better than my own solutions IMO. Didn't test
this in other Mac browsers.

[Thomas Mlynarczyk]

Also sprach kchayka:

Thomas Mlynarczyk wrote:

http://www.mlynarczyk-webdesign.de/tmp/menu/menu3.html

It
seems there is no real cross-browser way of having both the <li> and
<a> behave as intended.

Sure there is:
<URL:http://accessat.c-net.us/test/menu-5.html>

So this version works for IE Mac? Opera 5, however, makes the <a> elements
"full width". But that can be fixed by floating them for Opera 5. What I do
not really understand is this "be nice to MacIE" thing. As I understand, the
@media hides everything within it from MacIE - and that "be nice thing" can
fix that? How? By making MacIE think the @media "stops" right after it?

Thanks for your help. Using your suggestions, I have made another version of
my menus (http://www.mlynarczyk-webdesign.de/tmp/menu/menu4.html) -
hopefully they work now?

[Thomas Mlynarczyk]

Also sprach David Button:

As per the linked article, Mac IE only hacks would be permissible as
it's in the 'dead' browser category. It's really up to you to decide
if you want to include other (Win) IE hacks.
Well, with IEs "particularities" and the fact that it's the most used
browser, I guess I have no choice but to use some IE hacks. :-(
kchayka's solution posted elsewhere in this thread worked very well in
Mac IE & Firefox - even better than my own solutions IMO. Didn't test
this in other Mac browsers.

I tested it on several Win browsers and it seems to work, except for Opera
5, which makes the menu items (horizontal menu) stretch out over the full
width of the screen. Using kchayka's suggestions (especially concerning
MacIE), I have set up another version of my menus:
http://www.mlynarczyk-webdesign.de/tmp/menu/menu4.html
They work on all my Windows browsers, the HTML validates, only the CSS
doesn't because of the inline-block. For Opera 5 I had to resort to Fabrices
inversion.

[kchayka]

Thomas Mlynarczyk wrote:

Also sprach kchayka:

<URL:http://accessat.c-net.us/test/menu-5.html>
So this version works for IE Mac?

Works on Mac IE 5.2, but I didn't try earlier versions. I haven't found
any significant CSS differences since 5.0 anyway.
Opera 5, however
Opera 5 has been obsolete for a long time now. I don't test Opera
versions that old, it's not worth the trouble to find work arounds for
any issues that might come up. I imagine that any remaining OP5/4/3
users are already accustomed to running in user mode most or all of the
time anyway. The page renders acceptably in OP6, which is good enough
for me.
What I do
not really understand is this "be nice to MacIE" thing. As I understand, the
@media hides everything within it from MacIE - and that "be nice thing" can
fix that? How?
You are correct, MacIE doesn't support @media rules. The hack is a
variation of the Tantek box model hack. MacIE doesn't parse it correctly
and prematurely closes the @media rules. Thus it applies the rules that
follow the hack as if @media didn't exist.

BTW, I use @media rules a lot because it makes sense to do so. What's
nice on screen is often not so nice for print, etc.
Thanks for your help. Using your suggestions, I have made another version of
my menus (http://www.mlynarczyk-webdesign.de/tmp/menu/menu4.html) -
hopefully they work now?

I didn't look at your code, but the page renders comparably in MacIE5,
Safari 1.0 v85, and Windows mozilla.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[David Button]

In article <cq*************@news.t-online.com>, Thomas Mlynarczyk
<bl*************@hotmail.com> wrote:

Also sprach David Button:

As per the linked article, Mac IE only hacks would be permissible as
it's in the 'dead' browser category. It's really up to you to decide
if you want to include other (Win) IE hacks.

Well, with IEs "particularities" and the fact that it's the most used
browser, I guess I have no choice but to use some IE hacks. :-(

kchayka's solution posted elsewhere in this thread worked very well in
Mac IE & Firefox - even better than my own solutions IMO. Didn't test
this in other Mac browsers.

I tested it on several Win browsers and it seems to work, except for Opera
5, which makes the menu items (horizontal menu) stretch out over the full
width of the screen. Using kchayka's suggestions (especially concerning
MacIE), I have set up another version of my menus:
http://www.mlynarczyk-webdesign.de/tmp/menu/menu4.html
They work on all my Windows browsers, the HTML validates, only the CSS
doesn't because of the inline-block. For Opera 5 I had to resort to Fabrices
inversion.

This latest version seems to work fine in tested Mac OSX browsers -
same ones as used in previous screenshots.

The only slight difference is that Firefox, Safari, Camino, & Opera all
display the yellow background colour of the horiz <ul> menu across the
full width of the page, although the menu <li>/<a> items are aligned
from the left - Mac IE only displays the background colour to the
extent of the menu items. Could be worked round by making the horiz
menu background colour the same as the page background colour,
effectively hiding the menu background.

[Thomas Mlynarczyk]

Also sprach David Button:

This latest version seems to work fine in tested Mac OSX browsers -
same ones as used in previous screenshots.
:-)))
The only slight difference is that Firefox, Safari, Camino, & Opera
all display the yellow background colour of the horiz <ul> menu
across the full width of the page, although the menu <li>/<a> items
That's the way it's supposed to be. And the <ul> itself is not floated, so
it should indeed behave that way. Shouldn't it?
are aligned from the left - Mac IE only displays the background
colour to the extent of the menu items. Could be worked round by
Strange.
making the horiz menu background colour the same as the page
background colour, effectively hiding the menu background.

But if I want it to be visible? Wrapper div?

[Thomas Mlynarczyk]

Also sprach kchayka:

Opera 5 has been obsolete for a long time now. I don't test Opera
versions that old, it's not worth the trouble to find work arounds for
any issues that might come up. I imagine that any remaining OP5/4/3
users are already accustomed to running in user mode most or all of
the time anyway. The page renders acceptably in OP6, which is good
enough for me.
Hm, I guess you're right. So I could as well uninstall Opera 5 and consider
it as dead as I consider IE4 (Win)?
BTW, I use @media rules a lot because it makes sense to do so. What's
nice on screen is often not so nice for print, etc.
You are right. But I still have to find an optimal strategy for implementing
this.
I didn't look at your code, but the page renders comparably in MacIE5,
Safari 1.0 v85, and Windows mozilla.

:-)))