Hi
Can anyone please advise how I get the vertical navigation on this site to:-
[LIST=1]
[]Span the whole width of the site i.e. div id=“content” and also the right-hand column (div id=“right”)
[]Standardise the width of the top menu items in a (Superfish) Suckerfish style menu (V 1.4.8) as each is sizing to the text and I would like all to be equal please.
[/LIST]Many thanks
Regards
Andrew
Will admit without downloading and digging in, add a <div id=“navcontainer”> before your ul tag. and </div> after </ul> I have not seen this problem, but I do the above idea.
Problem 1-WIthout doing some HTML restructure you are screwed. However, if you desire you could give manual widths to each <li> and at most cross browser you would get a pixel or two difference 
Problem 2-If you mean you want all the menu items the same width, then assign a width on the <li>
If you are asking for them to auto-expand to fit regardless of their content - you can’t using LI or other standard CSS methods that will work cross browser.
You either will have to fix the width of each one so it adds up to your total width (using a negative margin-right on the last one so IE doens’t make it ride down)
Or bite the bullet with the ultimate evil - and use a table. It’s an excellent example of something tables can do that normal elements cannot.
… and no, display:table-cell is not a good answer if you care about cross-browser support (or more specifically the lack therin).
Mine expand just fine without using a table. Now I am going to have to looking into why.
They expand just fine because no width is set. However if the words get too long then it will drop. Thus the only safe way is to have widths set (without messing with a restructure that’s all you can do)
I’m unsure which attributes to change and to what please.
Thnks
Sample:
<div id=“topnav”><ul>
<li><a class=“current” href=“index.html”>Home </a></li>
<li><a href=“xxx.htm”>xxx</a></li>
</ul></div>
notice the div ahead of the ul? and don’t forget the closing div
now for the css
#topnav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
font-weight: bold;
background-color:#fff;
}
#topnav ul li { display: inline;
}
#topnav ul li a
{
text-decoration: none;
line-height: 50px;
margin: 0;
color: #000;
font-weight: bolder;
}
#topnav ul li a.current {
}
#topnav ul li a:hover
{
color: #030;
}
The stuff you need to add is in red (note, you will have to mess with the width, I haven’t tried out a specific width at all, I might be wayyy off with the width lol
#topnav ul li { display: inline; [color=red]float:left; width:100px;[/color]
}
Just saw that techmichelle wasn’t the OP of this thread…but either way, you need to have the top <li> floated and then a width set. Quite easy :).
haven’t needed this float:left; width:100px; to have it go the full width. I like to center my links, what does the float:left do?
Well you had display:inline before and that doesn’t allow widths set, floating it makes it block level and thus allows a width.
You don’t seem to understand that considering how you have set the page up, you are going to have to pixel width the <li>'s to get them to line up. (Unless you restructure or you want to play games with fate and hope it goes across (which would be unstable considering a text resize=a drop)
Larger text with narrow screens does mess with the design, it creates a second column, okay more often 3 or 4, which I am okay with. My views have changed a bit after helping an older person or two who seem to need REALLY BIG text. Most designs fall apart at their size text, and there big concern is simply being able to read and get around on a site.
Thanks Folks.
Incredibly stupid question but the ul already has a class defined (sf-menu) so I’m unsure how to also apply div id=“topnav”.
That’s so vague. Assuming you are asking how to apply CSS to the topnav element, then it’s this
#topnav{}
In teh future don’t steal someone elses thread, but rather create your own