Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 10:22 PM
Peter Cartwright
Guest
 
Posts: n/a
Default Horizontal menu

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
  #2  
Old July 20th, 2005, 10:23 PM
Steve Pugh
Guest
 
Posts: n/a
Default Re: Horizontal menu

peterct07@yahoo.com (Peter Cartwright) wrote:
[color=blue]
>This works in IE6. A horizontal menu made from a table[/color]

Why a table? A menu is a list of links, so a <ul> element would make
more sense.
[color=blue]
>with the space
>created by a td class="gap". All tds are rendered as inline elements
>except for .gap. So links are equidistantly spaced.[/color]

A problem that was only caused by your choice of a table...
[color=blue]
>This is to get
>around the fact that IE5 doesn't recognise margin or padding-left etc.[/color]

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.
[color=blue]
>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.[/color]

What do you mean by "automatic"?
[color=blue]
>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[/color]

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 <steve@pugh.net> <http://steve.pugh.net/>
  #3  
Old July 20th, 2005, 10:23 PM
Trent L
Guest
 
Posts: n/a
Default Re: Horizontal menu

Steve Pugh wrote:[color=blue]
>
> Have a look at http://www.alistapart.com/articles/taminglists/ for
> some ideas.[/color]

Also check out Max Design:

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

Tons of techniques to choose from.

  #4  
Old July 20th, 2005, 10:23 PM
Peter Cartwright
Guest
 
Posts: n/a
Default Re: Horizontal menu

Trent L <spacerook@hotmail.com> wrote in message news:<g-adnRua7My725bdRVn-jw@comcast.com>...[color=blue]
> Steve Pugh wrote:[color=green]
> >
> > Have a look at http://www.alistapart.com/articles/taminglists/ for
> > some ideas.[/color]
>
> Also check out Max Design:
>
> http://css.maxdesign.com.au/index.htm
>
> Tons of techniques to choose from.[/color]

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?
  #5  
Old July 20th, 2005, 10:23 PM
Steve Pugh
Guest
 
Posts: n/a
Default Re: Horizontal menu

peterct07@yahoo.com (Peter Cartwright) wrote:
[color=blue]
>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?[/color]

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 <steve@pugh.net> <http://steve.pugh.net/>
  #6  
Old July 20th, 2005, 10:23 PM
Peter Cartwright
Guest
 
Posts: n/a
Default Re: Horizontal menu

Steve Pugh <steve@pugh.net> wrote in message news:<lkfn00lgl55054cvvhnabftdqb25jch60j@4ax.com>. ..[color=blue]
> peterct07@yahoo.com (Peter Cartwright) wrote:
>[color=green]
> >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?[/color]
>
> 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[/color]

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
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles