menu nowrap

[pradeepjain]

Hii guys i am using this menu for my site.

http://www.cssplay.co.uk/menus/final_drop.html


My problem is that when i have a text like "Contact us" for menu item it wraps around in IE but its fine in firefox .For primary item the link must not wrap and for secondary item if the link wraps its ok.I tried the css property white-space: no-wrap
like this

/* style the links for the top level */
#menubar a, #menubar a:visited {
display:block;
font-size:11px;
font-weight: bold;
text-decoration:none;
color:#fff;
height:15px;
background-color:#859fcf;
margin: 5px 3px 0 15px;
/*margin: 1px 3px 0 30px;*/
}
/* a hack so that IE5.5 faulty box model is corrected */
* html #menubar a, * html #menubar a:visited {
 width:20px;
 w\idth:20px;
 margin: 5px 3px 0px 15px;
white-space: no-wrap;
 }

but its taking for the second level link also ...i want the nowrap to work for the primary links only...


thanks,
Pradeep

[SAF22]

If I'm understanding you correctly..

This may not be the best method, and please correct me if I am wrong. However it may get you what you're looking for.

Instead of applying the style to the entire id in your stylesheet, perhaps add the style to your <li> (or possibly the <a href>) in the HTML? So you would have something like...

<ul>
<li style="white-space:no-wrap"><a href="contact.html">Contact Us</a></li>
     <ul>
     <li><a href="secondarylink.html">Link 1</a></li>
     <li><a href="secondarylink.html">Link2</a></li>
     </ul>
</li>
</ul>
 

Then remove the white-space property from your css. I'm not entirely sure if that property would fix your problem to begin with though.

Anyways, this is how I've handled individual elements in the past and it validates strict for me!

Maybe some more code, or a URL would be nice!

Hope it can help you at all!