Horizontal menu

[Peter Cartwright]

This works in IE6. A horizontal menu made from a table with the space
created by a td class="gap". All tds are rendered as inline elements
except for .gap. So links are equidistantly spaced. This is to get
around the fact that IE5 doesn't recognise margin or padding-left etc.
It also has the virtue of easily transforming itself to a state
suitable for background images(tabs). That is remove the inline
display and give the tds suitable dimensions. As far as I know this is
the only way to do an automatic menu.

To get onto the question, does it work in IE5? There's a screenshot of
how it should appear. Many thanks.

http://www.sitetype.com/index.php?page=48

[Steve Pugh]

pe*******@yahoo.com (Peter Cartwright) wrote:

This works in IE6. A horizontal menu made from a table
Why a table? A menu is a list of links, so a <ul> element would make
more sense.
with the space
created by a td class="gap". All tds are rendered as inline elements
except for .gap. So links are equidistantly spaced.
A problem that was only caused by your choice of a table...
This is to get
around the fact that IE5 doesn't recognise margin or padding-left etc.
Table cells don't have margins. But IE5 does recognise padding-left
for table cells. It was probably setting them to display: inline; that
caused the problems. IIRC, IE5 didn't like padding on any inline
element.
It also has the virtue of easily transforming itself to a state
suitable for background images(tabs). That is remove the inline
display and give the tds suitable dimensions. As far as I know this is
the only way to do an automatic menu.
What do you mean by "automatic"?
To get onto the question, does it work in IE5? There's a screenshot of
how it should appear. Many thanks.

http://www.sitetype.com/index.php?page=48

It appears the same in IE 5.01 as in IE6.

However, in Opera 7.23 and Mozilla 1.5 (and I bet quite a few other
browsers as well) the three links appear as a vertical stack. Whoops.

Have a look at http://www.alistapart.com/articles/taminglists/ for
some ideas.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Trent L]

Steve Pugh wrote:

Have a look at http://www.alistapart.com/articles/taminglists/ for
some ideas.

Also check out Max Design:

http://css.maxdesign.com.au/index.htm

Tons of techniques to choose from.

[Peter Cartwright]

Trent L <sp*******@hotmail.com> wrote in message news:<g-********************@comcast.com>...

Steve Pugh wrote:

Have a look at http://www.alistapart.com/articles/taminglists/ for
some ideas.

Also check out Max Design:

http://css.maxdesign.com.au/index.htm

Tons of techniques to choose from.

Interesting stuff, trouble is it deepens the confusion. All the time
I've used CSS I haven't tried setting a width to inline elements.
Because the W3C reference says width only applies to block and
replaced elements. Now that I've tried it - I find I can. Can someone
explain the discrepancy?

[Steve Pugh]

pe*******@yahoo.com (Peter Cartwright) wrote:

Interesting stuff, trouble is it deepens the confusion. All the time
I've used CSS I haven't tried setting a width to inline elements.
Because the W3C reference says width only applies to block and
replaced elements. Now that I've tried it - I find I can. Can someone
explain the discrepancy?

Which browsers are using your width style? And are you triggering
standards or quirks mode via your doctype?

Internet Explorer in quirks mode will do lots of things that it
shouldn't and hence is not a good guide to whether your code is
working as it should.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Peter Cartwright]

Steve Pugh <st***@pugh.net> wrote in message news:<lk********************************@4ax.com>. ..

pe*******@yahoo.com (Peter Cartwright) wrote:

Interesting stuff, trouble is it deepens the confusion. All the time
I've used CSS I haven't tried setting a width to inline elements.
Because the W3C reference says width only applies to block and
replaced elements. Now that I've tried it - I find I can. Can someone
explain the discrepancy?

Which browsers are using your width style? And are you triggering
standards or quirks mode via your doctype?

Internet Explorer in quirks mode will do lots of things that it
shouldn't and hence is not a good guide to whether your code is
working as it should.

Steve

Yes that was it.

I had a closer look at the list menus but they won't work in this
case. That is a menu element that can either take the width of its
contents or have a fixed width - in other words a td. In any case the
list items aren't contained by the ul in Opera. And in IE there's an
unwanted margin-top (or whatever it is) on the li. See

http://website.lineone.net/~peterct07/list_version.htm
Using a table I think I've found a solution or several. I don't think
the padding-left or margin-left on anchors will work in IE5, which is
what I was referring to in an earlier post. But I've put up some
examples in case I'm wrong on that. Probably the inelegant example,
giving a float:left and width to a div sitting alongside the anchor,
is the best bet. I'd be surprised if it doesn't work, but can you tell
me what you find in IE5?

Incidentally Opera looks like it gets the first two examples wildly
wrong.

http://website.lineone.net/~peterct07/table_version.htm