[WSG] Proper way to give height a horzontal UL Nav Bar
Hello all -
I've created a pretty basic horizontal nav bar using a UL and in-line LI's.
The only twist to this is that this design calls for a rather tall nav bar
with right-borders (on the LIs) which span the height of the UL.
To accomplish this, I've had to put the same amount of top and bottom
padding on BOTH the UL and the LI's - the same amount of padding on the LI's
so that the right borders would span the height of the UL. Looks to spec in
FF, NN, Opera and IE6.
So, what's the problem?
I'm just not comfortable with the way I've achieved this (same padding on
both ULs and LI's) I can't imagine this is the ***correct*** way to
accomplish this and would really appreciate anyone's guidance.
The basic CSS for this is shown below:
#navTop {
padding-left: 5px;
padding-top: 5px;
padding-bottom: 21px;
background-color: #00CC00;
font-weight: bold;
font-size: 0.70em;
}
#navTop li {
display: inline;
border-right: 1px solid white;
padding-top: 5px;
padding-bottom: 21px;
padding-right: 26px;
padding-left: 10px;
}
#navTop li.noPad {
padding-left: 0;
}
To see it live go here: http://www.x7m.us/_problems/test.htm
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Proper way to give height a horzontal UL Nav Bar
Cole Kuryakin wrote: I'm just not comfortable with the way I've achieved this (same padding on both ULs and LI's) I can't imagine this is the ***correct*** way to accomplish this and would really appreciate anyone's guidance. http://www.x7m.us/_problems/test.htm I don't know much about correct, so I would probably go for a simpler solution, like the following variant... http://www.gunlaug.no/tos/alien/test_07_3540.html http://www.gunlaug.no/tos/alien/test0001.css ...and then add whatever IE6 needs. regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Proper way to give height a horzontal UL Nav Bar
Georg - Wow, that's great! There's a number of things I'm going to have to study on this (particularly the li+li - I've never seen that before). What you've done is a lot cleaner; appreciate your assistance! FOLLOW ON: Of course, the drop-downs DON'T work in IE 6 - maybe because the active area in IE only spans the link word rather than the entire LI ... and maybe other reasons as well. Any suggestions on how to show the drop-downs in IE? Javascript? Behaviors? Additional follow-up appreciated if possible. Best regards, Cole -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: Saturday, March 10, 2007 11:48 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Proper way to give height a horzontal UL Nav Bar Cole Kuryakin wrote: I'm just not comfortable with the way I've achieved this (same padding on both ULs and LI's) I can't imagine this is the ***correct*** way to accomplish this and would really appreciate anyone's guidance. http://www.x7m.us/_problems/test.htm I don't know much about correct, so I would probably go for a simpler solution, like the following variant... http://www.gunlaug.no/tos/alien/test_07_3540.html http://www.gunlaug.no/tos/alien/test0001.css ...and then add whatever IE6 needs. regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Proper way to give height a horzontal UL Nav Bar
Cole Kuryakin wrote:
Georg -
Wow, that's great! There's a number of things I'm going to have to study on
this (particularly the li+li - I've never seen that before).
I used that '+' selector to add a top border to a li only when the li is
preceded by a li. Prevents adding border to the first li.
IE6 doesn't understand the '+' selector, so I suggest you style borders
on all li's for IE6 - using the '* html' hack, and then either add a
class to the first li - styling it to 'border none'.
You may also simply lift all li's with a 'margin-top: -1px' and hide the
part of the first li that ends up above the ul.
* html ul#navTop ul {overflow: hidden;} should do.
The reason for doing it this way is that it'll work just fine in all the
latest browsers, and workarounds for IE6 can be kept completely
separated from the regular good browser styling - making it easy to
read and maintain.
What you've done is a lot cleaner; appreciate your assistance!
You're welcome :-)
FOLLOW ON:
Of course, the drop-downs DON'T work in IE 6 - maybe because the active area
in IE only spans the link word rather than the entire LI ... and maybe other
reasons as well.
IE6 doesn't support :hover on anything but links.
Any suggestions on how to show the drop-downs in IE? Javascript? Behaviors?
Maybe this...
http://annevankesteren.nl/test/examples/css/htc/hover.htm
...or maybe IE expressions will do...
http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Proper way to give height a horzontal UL Nav Bar
Georg -
Have implemented an .htc hover file. All looks (and responds!) as per spec.
Thanks again so much for your guidance, as well as for the explanation below
of the li+li.
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Gunlaug Sørtun
Sent: Sunday, March 11, 2007 10:30 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Proper way to give height a horzontal UL Nav Bar
Cole Kuryakin wrote:
Georg -
Wow, that's great! There's a number of things I'm going to have to study
on
this (particularly the li+li - I've never seen that before).
I used that '+' selector to add a top border to a li only when the li is
preceded by a li. Prevents adding border to the first li.
IE6 doesn't understand the '+' selector, so I suggest you style borders
on all li's for IE6 - using the '* html' hack, and then either add a
class to the first li - styling it to 'border none'.
You may also simply lift all li's with a 'margin-top: -1px' and hide the
part of the first li that ends up above the ul.
* html ul#navTop ul {overflow: hidden;} should do.
The reason for doing it this way is that it'll work just fine in all the
latest browsers, and workarounds for IE6 can be kept completely
separated from the regular good browser styling - making it easy to
read and maintain.
What you've done is a lot cleaner; appreciate your assistance!
You're welcome :-)
FOLLOW ON:
Of course, the drop-downs DON'T work in IE 6 - maybe because the active
area
in IE only spans the link word rather than the entire LI ... and maybe
other
reasons as well.
IE6 doesn't support :hover on anything but links.
Any suggestions on how to show the drop-downs in IE? Javascript?
Behaviors?
Maybe this...
http://annevankesteren.nl/test/examples/css/htc/hover.htm
...or maybe IE expressions will do...
http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
