468,289 Members | 1,787 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,289 developers. It's quick & easy.

Minimal CSS tab bar with drop-down menus

I am trying to figure out what is the minimal simplest CSS I can
have to accomplish a row of tabs, with one or more tabs having a
drop-down menu when you hover over it -- AND the whole tab+menu
markup must consist of only nested unordered lists.

I don't care if the hover-dropdown part fails to works in IE -- if
not, the tabs are still clickable links that load a page having the
submenu choices on it anyway. I *do* care that the tabs appear
consistent accross all browsers without hacks.

Here's my attempt, which took an embarrasing number of hours to
figure out by trying out different things while studying the CSS2
specs (and after finding many unsatisfactory examples on the web):

http://sunshine.rahul.net/~unicorn/menutest.html

All CSS and HTML is in the page source. The page explains my specs and
asks questions.

I'm trying to figure out the minimal definition required so I can
understand CSS (I consider myself a newbie at CSS).

-A
May 10 '06 #1
14 3669
On Wed, 10 May 2006 22:16:58 +0000 (UTC) axlq <ax**@spamcop.net> wrote:

| I am trying to figure out what is the minimal simplest CSS I can
| have to accomplish a row of tabs, with one or more tabs having a
| drop-down menu when you hover over it -- AND the whole tab+menu
| markup must consist of only nested unordered lists.
|
| I don't care if the hover-dropdown part fails to works in IE -- if
| not, the tabs are still clickable links that load a page having the
| submenu choices on it anyway. I *do* care that the tabs appear
| consistent accross all browsers without hacks.
|
| Here's my attempt, which took an embarrasing number of hours to
| figure out by trying out different things while studying the CSS2
| specs (and after finding many unsatisfactory examples on the web):

I bet this is a common experience.
| http://sunshine.rahul.net/~unicorn/menutest.html
|
| All CSS and HTML is in the page source. The page explains my specs and
| asks questions.

The tab looks OK to me as there is no border under the one for that page,
e.g. the first tab. The 2nd tab with the drop down menu looks to me as
if it is to the left a bit too far. Otherwise it looks OK.

Here's how my Firefox 1.5.0.3 on Linux renders it. The 2nd PNG has the
2nd tab activated for drop down.

http://phil.ipal.org/usenet/ciwas/20...menutest-1.png
http://phil.ipal.org/usenet/ciwas/20...menutest-2.png
| I'm trying to figure out the minimal definition required so I can
| understand CSS (I consider myself a newbie at CSS).

You're not alone.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 11 '06 #2
In article <e3*********@news4.newsguy.com>, <ph**************@ipal.net> wrote:
On Wed, 10 May 2006 22:16:58 +0000 (UTC) axlq <ax**@spamcop.net> wrote:
| Here's my attempt, which took an embarrasing number of hours to
| figure out by trying out different things while studying the CSS2
| specs (and after finding many unsatisfactory examples on the web):

I bet this is a common experience.
:) It's common for me, that's for sure!
| http://sunshine.rahul.net/~unicorn/menutest.html

The tab looks OK to me as there is no border under the one for that page,
e.g. the first tab. The 2nd tab with the drop down menu looks to me as
if it is to the left a bit too far. Otherwise it looks OK.
The drop-down part always appears to the left a bit in both Firefox
and Opera (and also IE if I change the CSS to force the submenu to
show up). I don't know why. I'm not specifying the position at
all; I'm just letting the position fall where it wants (the default
should be right under the parent element, which is the 2nd tab in
this case). I'm OK with the positioning though.
Here's how my Firefox 1.5.0.3 on Linux renders it. The 2nd PNG has the
2nd tab activated for drop down.

http://phil.ipal.org/usenet/ciwas/20...menutest-1.png
http://phil.ipal.org/usenet/ciwas/20...menutest-2.png


That's odd. Your Firefox renders it properly. MY firefox raises
the tabs 1 pixel too high, so the border under the first tab doesn't
get erased, and there are two borders under the other tabs:

http://sunshine.rahul.net/~unicorn/menutest-firefox.png

I'm using Firefox 1.5.0.3 with the out-of-the-box default settings.
Did you do something to yours to make it work correctly?

-A
May 11 '06 #3
On Thu, 11 May 2006 12:39:15 +0000 (UTC) axlq <ax**@spamcop.net> wrote:
| In article <e3*********@news4.newsguy.com>, <ph**************@ipal.net> wrote:
|>On Wed, 10 May 2006 22:16:58 +0000 (UTC) axlq <ax**@spamcop.net> wrote:
|>| Here's my attempt, which took an embarrasing number of hours to
|>| figure out by trying out different things while studying the CSS2
|>| specs (and after finding many unsatisfactory examples on the web):
|>
|>I bet this is a common experience.
|
| :) It's common for me, that's for sure!

Seems a lot of people are running into lots of things like this.
They describe what they do want, and some answers they get are
"stop wanting that".
|>| http://sunshine.rahul.net/~unicorn/menutest.html
|>
|>The tab looks OK to me as there is no border under the one for that page,
|>e.g. the first tab. The 2nd tab with the drop down menu looks to me as
|>if it is to the left a bit too far. Otherwise it looks OK.
|
| The drop-down part always appears to the left a bit in both Firefox
| and Opera (and also IE if I change the CSS to force the submenu to
| show up). I don't know why. I'm not specifying the position at
| all; I'm just letting the position fall where it wants (the default
| should be right under the parent element, which is the 2nd tab in
| this case). I'm OK with the positioning though.

I wonder what it would do if the tab with a drop down was all the way
to the left edge.
|>Here's how my Firefox 1.5.0.3 on Linux renders it. The 2nd PNG has the
|>2nd tab activated for drop down.
|>
|>http://phil.ipal.org/usenet/ciwas/20...menutest-1.png
|>http://phil.ipal.org/usenet/ciwas/20...menutest-2.png
|
| That's odd. Your Firefox renders it properly. MY firefox raises
| the tabs 1 pixel too high, so the border under the first tab doesn't
| get erased, and there are two borders under the other tabs:
|
| http://sunshine.rahul.net/~unicorn/menutest-firefox.png
|
| I'm using Firefox 1.5.0.3 with the out-of-the-box default settings.
| Did you do something to yours to make it work correctly?

The user-agent for mine tells part of the story:

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8) Gecko/20051130 Ubuntu/1.4.99+1.5rc3.dfsg-1ubuntu3 Firefox/1.5

It's actually running on Slackware 10.2 and kernel 2.6.16. Sometimes I
wonder if the underlying graphical toolkits Firefox uses (e.g. GTK here)
have any impact on display bugs.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 11 '06 #4
In article <e3*********@news1.newsguy.com>, <ph**************@ipal.net> wrote:
Seems a lot of people are running into lots of things like this.
They describe what they do want, and some answers they get are
"stop wanting that".
Heh. I just posted such a reply to you in the thread about rounded
corners. Sorry.
| The drop-down part always appears to the left a bit in both Firefox
| and Opera (and also IE if I change the CSS to force the submenu to
| show up). I don't know why. I'm not specifying the position at
| all; I'm just letting the position fall where it wants (the default
| should be right under the parent element, which is the 2nd tab in
| this case). I'm OK with the positioning though.

I wonder what it would do if the tab with a drop down was all the way
to the left edge.
Good thing you asked; it revealed a problem (not related to left
edge). I just added submenus to all the other tabs, and discovered
my approach doesn't work. ALL submenus appear in the same place!

Grrr.... not what I expected from reading the CSS spec, which says if
you don't specify a position with position:absolute, then the position
goes wherever it would normally fall.

I don't know what to do about it. Somebody, help!
| That's odd. Your Firefox renders it properly. MY firefox raises
| the tabs 1 pixel too high, so the border under the first tab doesn't
| get erased, and there are two borders under the other tabs

The user-agent for mine tells part of the story:


Hm. Maybe the bug is in the underlying graphics packages in Windows.

-Alex
May 11 '06 #5
On Thu, 11 May 2006 22:04:36 +0000 (UTC) axlq <ax**@spamcop.net> wrote:
| In article <e3*********@news1.newsguy.com>, <ph**************@ipal.net> wrote:
|>Seems a lot of people are running into lots of things like this.
|>They describe what they do want, and some answers they get are
|>"stop wanting that".
|
| Heh. I just posted such a reply to you in the thread about rounded
| corners. Sorry.

if there's no way at all to accomplish it, I guess I do have to stop
wanting that. But if I can get it with a hack, I will. And if that
hack degrades at least gradefully on non-compliant browsers, that is
usually OK. I can get rounded corners with massive tables and it works
even on IE. Or I can get rounded corners with CSS using a four levels
of background layering that doesn't impact the square corners underneath.
There are some other methods which I have not thoroughly studied, yet.
|
|>| The drop-down part always appears to the left a bit in both Firefox
|>| and Opera (and also IE if I change the CSS to force the submenu to
|>| show up). I don't know why. I'm not specifying the position at
|>| all; I'm just letting the position fall where it wants (the default
|>| should be right under the parent element, which is the 2nd tab in
|>| this case). I'm OK with the positioning though.
|>
|>I wonder what it would do if the tab with a drop down was all the way
|>to the left edge.
|
| Good thing you asked; it revealed a problem (not related to left
| edge). I just added submenus to all the other tabs, and discovered
| my approach doesn't work. ALL submenus appear in the same place!
|
| Grrr.... not what I expected from reading the CSS spec, which says if
| you don't specify a position with position:absolute, then the position
| goes wherever it would normally fall.

Ouch. Sounds liek a new Q for a new thread.
| I don't know what to do about it. Somebody, help!
|
|>| That's odd. Your Firefox renders it properly. MY firefox raises
|>| the tabs 1 pixel too high, so the border under the first tab doesn't
|>| get erased, and there are two borders under the other tabs
|>
|>The user-agent for mine tells part of the story:
|
| Hm. Maybe the bug is in the underlying graphics packages in Windows.

Not impossible.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 12 '06 #6
I figured it out, mostly!

http://sunshine.rahul.net/~unicorn/menutest.html
| That's odd. Your Firefox renders it properly. MY firefox raises
| the tabs 1 pixel too high, so the border under the first tab doesn't
| get erased, and there are two borders under the other tabs:


I figured out that you get a different result between
margin: 0;
and
margin: 0 0 0 0;

Using the latter version caused all the browsers I tested to behave
consistently. I thought the spec said somewhere that if you specify
one zero, it's the same as doing it 4 times (for top left bottom
right). I guess not.

I also got the drop-down submenus, FINALLY, to appear in a position
relative to the tabs, insted of in one position all the time. The
trick was to enclose the submenus inside another div inside the tab
list item, and use relative positioning to the div.

Trouble is, the relative positioning controls the position from the
right edge of the tab. I know not why.

Another problem is the hovering. Moving the mouse from tab2 to tab3
doesn't cause the tab3 submenu to drop down. You have to remove the
mouse from the tab completely for it to work. Oddly when moving the
mouse from tab3 to tab2, it works fine.

-Alex
May 15 '06 #7
ax**@spamcop.net (axlq) wrote:
I figured out that you get a different result between
margin: 0;
and
margin: 0 0 0 0;


No you don't.

--
Spartanicus
May 15 '06 #8
Deciding to do something for the good of humanity, axlq
<ax**@spamcop.net> declared in
comp.infosystems.www.authoring.stylesheets:
I figured out that you get a different result between
margin: 0;
and
margin: 0 0 0 0;
On which browser(s)?
I thought the spec said somewhere that if you specify
one zero, it's the same as doing it 4 times (for top left bottom
right).


That's correct (though it's top right bottom left). Any browser that
treats it differently is in error.

"If there is only one value, it applies to all sides."
http://www.w3.org/TR/CSS21/box.html#propdef-margin

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html
May 15 '06 #9
In article <1x***************@markparnell.com.au>,
Mark Parnell <we*******@clarkecomputers.com.au> wrote:
Deciding to do something for the good of humanity, axlq
<ax**@spamcop.net> declared in
comp.infosystems.www.authoring.stylesheets:
I figured out that you get a different result between
margin: 0;
and
margin: 0 0 0 0;


On which browser(s)?


Firefox. Maybe it was padding rather than margin.
I thought the spec said somewhere that if you specify
one zero, it's the same as doing it 4 times (for top left bottom
right).


That's correct (though it's top right bottom left). Any browser that
treats it differently is in error.


Well, the page rendered properly after I made that change.

-A
May 16 '06 #10
In article <pf********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:
ax**@spamcop.net (axlq) wrote:
I figured out that you get a different result between
margin: 0;
and
margin: 0 0 0 0;


No you don't.


And you know this how...?
Yes I do. At least on Firefox for Windows.

-A
May 16 '06 #11
Deciding to do something for the good of humanity, axlq
<ax**@spamcop.net> declared in
comp.infosystems.www.authoring.stylesheets:
Firefox. Maybe it was padding rather than margin.
No offence, but I find that unlikely. Can you upload a test case?
Well, the page rendered properly after I made that change.


Perhaps you changed something else as well?

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html
May 16 '06 #12
In article <17****************@markparnell.com.au>,
Mark Parnell <we*******@clarkecomputers.com.au> wrote:
Deciding to do something for the good of humanity, axlq
<ax**@spamcop.net> declared in
comp.infosystems.www.authoring.stylesheets:
Firefox. Maybe it was padding rather than margin.


No offence, but I find that unlikely. Can you upload a test case?
Well, the page rendered properly after I made that change.


Perhaps you changed something else as well?


Turns out I did. It wasn't the margin, it was the font size.

Apparently font-size: 1em causes it to render badly, where
font-size: 1.1em works fine.

http://sunshine.rahul.net/~unicorn/menutest.html (working, 1.1em)
http://sunshine.rahul.net/~unicorn/menutest2.html (bad, 1em)

-A
May 16 '06 #13
In article <e4**********@blue.rahul.net>, axlq <ax**@spamcop.net> wrote:
In article <pf********************************@news.spartanic us.utvinternet.ie>,
Spartanicus <in*****@invalid.invalid> wrote:
ax**@spamcop.net (axlq) wrote:
I figured out that you get a different result between
margin: 0;
and
margin: 0 0 0 0;


No you don't.


And you know this how...?
Yes I do. At least on Firefox for Windows.


I retract my previous remark. You are correct, it wasn't the margin
setting. It was the font size. 1em messed it up, whereas 1.1em
aligned the bottom border perfectly. Why this is, I don't know.

-A
May 16 '06 #14
Deciding to do something for the good of humanity, axlq
<ax**@spamcop.net> declared in
comp.infosystems.www.authoring.stylesheets:
Apparently font-size: 1em causes it to render badly, where
font-size: 1.1em works fine.


Until you change the font size in the browser. :-)

Add position: relative; top:1px; to .navlist ul instead.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html
May 16 '06 #15

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Khue Pham | last post: by
9 posts views Thread by Rune | last post: by
8 posts views Thread by Victor B. Berdin | last post: by
3 posts views Thread by Fede | last post: by
6 posts views Thread by jojobar | last post: by
reply views Thread by Daniel P. | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.