I need a fix for a horizontal navbar that Netscape doesn't display the same as in IE, it doesn't show the width of each link, they are all bunched together in the middle of the page,
Big Night Out (<!-- m --><a class="postlink" href="http://www.bignightout.org/band.asp">http://www.bignightout.org/band.asp</a><!-- m -->) is where this problem can be viewed and here is the CSS, I read somewhere's about a detect and import that detects if the user's browser is Netscape and if so imports a style sheet to that makes the navbar display the same as in IE but I didn't bookmark it and I can't find it again so I need some help.
<div id="navigation" align="center">
#navigation ul { list-style-type: none;margin: 0px; padding: 0px }
#navigation ul li { display: inline }
#navigation ul li a { text-decoration: none;
padding: 3px 3px 3px 3px;
background-color: #000000;
color: #FFFF00;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 9pt;
letter-spacing: 2px;
width: 20%}
#navigation ul li a:hover {
background-color: #FFFF00;
color: #0000FF}#navigation ul li { display: inline } Inline elements cannot have width except in programs that don't understand HTML.Originally posted by ray326
Inline elements cannot have width except in programs that don't understand HTML.
Will floating them as block elements work?Originally posted by tonyh
Will floating them as block elements work? That's usually what's done. Check out List-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->) for more ideas.Originally posted by ray326
That's usually what's done. Check out List-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->) for more ideas.
That's a neat tool. But, again the display is inline. What if you required widths? For example using background images and a hover to swap them out?
Is there a similar tool for creating accessible multi-level menus? It would be kinda cool if there was one, implementing either the Suckerfish or Vladdy's menus.
Also, I noticed #current in the CSS, what is this?That's a neat tool. But, again the display is inline. What if you required widths? For example using background images and a hover to swap them out? Hmm. It's been a long time since I looked at that output. For starters just change "display: inline;" to "float:right;" and set your width.
I don't know of a similar tool for multilevel menus but there is an accessible multilevel menu system that's been mentioned here before. Hopefully someone will pop in with a name.
I didn't see a #current def in the one I generated but I suspect that might be used to define the style for the menu item associated with the current page.Originally posted by ray326
Hmm. It's been a long time since I looked at that output. For starters just change "display: inline;" to "float:right;" and set your width.
"display: block;" isn't required? If a "float: left;" is already present is the right necessary?
What if the horizontal menu required different widths for each link? Again I know that by setting a float one can use margins and padding to generate varying widths calculated on font size by the browser. However, if a width is required, images as text (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=52314">http://www.webdeveloper.com/forum/showt ... adid=52314</a><!-- m -->) for example, how can a width be defined for each <li> or <a>? Would it have to be inline (not refering to display) CSS or a seperate class for each width?
As an aside, does line-height work the same as height? If a static height is required, as well as width, which is the better?
I used Style 8 for my example:
<div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">a</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">b</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">c</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">d</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">e</a></li>
</ul>
</div>
<!-- snip from CSS including #current -->
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}
But I don't understand how #current is being applied to the <ul> as I've seen something similar in ALA's Sliding Doors. Except in Sliding Doors the class is applied in the html page itself, I see no such class applied at list-o-matic."display: block;" isn't required? If a "float: left;" is already present is the right necessary? Right. Float would make it a block, but it (<li>) was already a block by default.
What if the horizontal menu required different widths for each link? I thought we were doing this exercise because you wanted fixed widths. If not then inline will do the job better.
As an aside, does line-height work the same as height? Line-height applies to inline elements, height applies to blocks.
I see no such class applied at list-o-matic. Neither do I. I think they assume you'll add an id="current" to the list item containing the link to the current page.Originally posted by ray326
Right. Float would make it a block, but it (<li>) was already a block by default.
Alright, so if <li> is block by default, is <a> inside the <li> default as well, or does it remain inline?
I thought we were doing this exercise because you wanted fixed widths. If not then inline will do the job better.
I think I understand, if we are just lining up images horizontally inline and floats are the only thing required. What about divs or spans with a specified height/width?
Line-height applies to inline elements, height applies to blocks.
Gotcha.
Neither do I. I think they assume you'll add an id="current" to the list item containing the link to the current page.
Does this mean that we would need to alter the menu on each page for the appropriate link? Wouldn't that throw a monkey wrench into using server side includes for menus?<a> is inline. Think of block == <div>. A <div> is a block element with no symantic meaning. The other block elements like <ul>, <li>, <h1>, <p>, etc, have meaning.
A <span> is the inline equivalent of a <div>. The other inline elements like <em>, <strong>, <abbr>, <acronym>, <address>, etc, have meaning.
So if you want your <a> to be a block you can style it that way and quite often you will to get it to fill its containing <li>.
Does this mean that we would need to alter the menu on each page for the appropriate link? Wouldn't that throw a monkey wrench into using server side includes for menus? Yes it would but you can find snazzy work arounds if you look around the web. In fact I think there's something about that on ALA.
Big Night Out (<!-- m --><a class="postlink" href="http://www.bignightout.org/band.asp">http://www.bignightout.org/band.asp</a><!-- m -->) is where this problem can be viewed and here is the CSS, I read somewhere's about a detect and import that detects if the user's browser is Netscape and if so imports a style sheet to that makes the navbar display the same as in IE but I didn't bookmark it and I can't find it again so I need some help.
<div id="navigation" align="center">
#navigation ul { list-style-type: none;margin: 0px; padding: 0px }
#navigation ul li { display: inline }
#navigation ul li a { text-decoration: none;
padding: 3px 3px 3px 3px;
background-color: #000000;
color: #FFFF00;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 9pt;
letter-spacing: 2px;
width: 20%}
#navigation ul li a:hover {
background-color: #FFFF00;
color: #0000FF}#navigation ul li { display: inline } Inline elements cannot have width except in programs that don't understand HTML.Originally posted by ray326
Inline elements cannot have width except in programs that don't understand HTML.
Will floating them as block elements work?Originally posted by tonyh
Will floating them as block elements work? That's usually what's done. Check out List-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->) for more ideas.Originally posted by ray326
That's usually what's done. Check out List-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->) for more ideas.
That's a neat tool. But, again the display is inline. What if you required widths? For example using background images and a hover to swap them out?
Is there a similar tool for creating accessible multi-level menus? It would be kinda cool if there was one, implementing either the Suckerfish or Vladdy's menus.
Also, I noticed #current in the CSS, what is this?That's a neat tool. But, again the display is inline. What if you required widths? For example using background images and a hover to swap them out? Hmm. It's been a long time since I looked at that output. For starters just change "display: inline;" to "float:right;" and set your width.
I don't know of a similar tool for multilevel menus but there is an accessible multilevel menu system that's been mentioned here before. Hopefully someone will pop in with a name.
I didn't see a #current def in the one I generated but I suspect that might be used to define the style for the menu item associated with the current page.Originally posted by ray326
Hmm. It's been a long time since I looked at that output. For starters just change "display: inline;" to "float:right;" and set your width.
"display: block;" isn't required? If a "float: left;" is already present is the right necessary?
What if the horizontal menu required different widths for each link? Again I know that by setting a float one can use margins and padding to generate varying widths calculated on font size by the browser. However, if a width is required, images as text (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=52314">http://www.webdeveloper.com/forum/showt ... adid=52314</a><!-- m -->) for example, how can a width be defined for each <li> or <a>? Would it have to be inline (not refering to display) CSS or a seperate class for each width?
As an aside, does line-height work the same as height? If a static height is required, as well as width, which is the better?
I used Style 8 for my example:
<div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">a</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">b</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">c</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">d</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">e</a></li>
</ul>
</div>
<!-- snip from CSS including #current -->
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}
But I don't understand how #current is being applied to the <ul> as I've seen something similar in ALA's Sliding Doors. Except in Sliding Doors the class is applied in the html page itself, I see no such class applied at list-o-matic."display: block;" isn't required? If a "float: left;" is already present is the right necessary? Right. Float would make it a block, but it (<li>) was already a block by default.
What if the horizontal menu required different widths for each link? I thought we were doing this exercise because you wanted fixed widths. If not then inline will do the job better.
As an aside, does line-height work the same as height? Line-height applies to inline elements, height applies to blocks.
I see no such class applied at list-o-matic. Neither do I. I think they assume you'll add an id="current" to the list item containing the link to the current page.Originally posted by ray326
Right. Float would make it a block, but it (<li>) was already a block by default.
Alright, so if <li> is block by default, is <a> inside the <li> default as well, or does it remain inline?
I thought we were doing this exercise because you wanted fixed widths. If not then inline will do the job better.
I think I understand, if we are just lining up images horizontally inline and floats are the only thing required. What about divs or spans with a specified height/width?
Line-height applies to inline elements, height applies to blocks.
Gotcha.
Neither do I. I think they assume you'll add an id="current" to the list item containing the link to the current page.
Does this mean that we would need to alter the menu on each page for the appropriate link? Wouldn't that throw a monkey wrench into using server side includes for menus?<a> is inline. Think of block == <div>. A <div> is a block element with no symantic meaning. The other block elements like <ul>, <li>, <h1>, <p>, etc, have meaning.
A <span> is the inline equivalent of a <div>. The other inline elements like <em>, <strong>, <abbr>, <acronym>, <address>, etc, have meaning.
So if you want your <a> to be a block you can style it that way and quite often you will to get it to fill its containing <li>.
Does this mean that we would need to alter the menu on each page for the appropriate link? Wouldn't that throw a monkey wrench into using server side includes for menus? Yes it would but you can find snazzy work arounds if you look around the web. In fact I think there's something about that on ALA.