473,322 Members | 1,566 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

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 3939
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: | last post by:
To return a minimal price of a bottle of vodka stored in field "price" I can call MIN function . However this price ignores the size of the bottle. Bottle types and sizes are stored in a...
0
by: Khue Pham | last post by:
Hi All, I'm building an embedded system and in need of bringing mySQL into my embedded controller. Here is what I need: + A minimal mySQL database configuration that supports: -> API for C...
1
by: José Joye | last post by:
I know, this kind of question has already been asked. However, I could not find an answer related to the minimal privilege required to be able to create a new event Source in the appplication event...
9
by: Rune | last post by:
Is it best to use double quotes and let PHP expand variables inside strings, or is it faster to do the string manipulation yourself manually? Which is quicker? 1) $insert = 'To Be';...
8
by: Victor B. Berdin | last post by:
Hi everyone, I'm trying to make PostgreSQL 7.4 to work on a minimal Linux (2.4.22/libc-2.3.1) environment comprised of selected libraries and the latest busybox. So far, the binaries: "initdb",...
3
by: Fede | last post by:
Hi, is it possible to create a minimal DTD that can contain any not declared tag or text? With "minimal" I mean with the declaration of the root (for example "myRoot") and the declaration of...
10
by: BuddhaBuddy | last post by:
Platform is DB2/NT 7.2.9 The table was created like this: CREATE TABLE MYTEST ( MYTESTOID bigint not null primary key, FK_OTHEROID bigint not null references other, FK_ANOTHEROID bigint not...
6
by: jojobar | last post by:
Hello, I look at the asp.net 2.0 web parts tutorial on the asp.net web site. I tried to run it under firefox browser but it did not run. If I want to use this feature in a commercial product...
0
by: Daniel P. | last post by:
http://danutp.blogspot.com/ Web Services - sharing data between client and server Dealing a lot with web services a friend of mine (Ehsan Samani) and I ran into another issue: when we move...
5
by: Romulo NF | last post by:
Greetings, I´m back here to show the new version of the drag & drop table columns (original script ). I´ve found some issues with the old script, specially when trying to use 2 tables with...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.