Prevent Breaking of <UL> Horizontal Menu

HTML & CSS
1

Doess anyone have any idea on how to fix the code below? This is a horizontal menu using unordered list. I want that whenever I resize the browser to the smallest possible size, the menu will still align in horizontal and never go to the next line or have a line break.

CSS:

/* Center Column - Tab Menu */
#tablist 				{ background-color:#EEEEEE; float:left; width:100%; font-size:10px; text-align:center; }
#tablist ul 			{ background-color:#EEEEEE; margin:0px; padding:0px; list-style:none; }
#tablist li  			{ display:inline; margin:0px; padding:0px; }
#tablist a 				{ color:#FFFFFF; font-weight:bold; float:left; background:url("images_ef/misc/images_ef/centertab_left.gif") top left no-repeat; margin:0px; padding:0px 0px 0px 8px; text-decoration:none; }
#tablist a span 		{ color:#FFFFFF; font-weight:bold; float:left; display:block; background:url("images_ef/misc/images_ef/centertab_right.gif") top right no-repeat; padding:6px 9px 5px 0px; }
/* Commented Backslash Hack hides rule from IE5-Mac \\*/
#tablist a span 		{ float:none; }
/* End IE5-Mac hack */
#tablist a:hover span 	{ color:#004080; }
#tablist a:hover 		{ background-position:0% -35px; }
#tablist a:hover span 	{ background-position:100% -35px; }
#tablist a.current 		{ color:#004080; background-position:0% -35px; }
#tablist a.current span { color:#004080; background-position:100% -35px; }
.tabcontent				{ display:none; }

HTML:

<div id="tablist">
	<ul>
		<li><a href="http://www.forumskin.com" onmouseover="expandcontent('sc1', this)"><span>Anabolic Steroids<br />&nbsp;</span></a></li>
		<li><a href="http://www.forumskin.com" onmouseover="expandcontent('sc2', this)"><span>Weight Lifting<br />&nbsp;</span></a></li>
		<li><a href="http://www.forumskin.com" onmouseover="expandcontent('sc3', this)"><span>Chat &amp; <br />Conversations</span></a></li>
		<li><a href="http://www.forumskin.com" onmouseover="expandcontent('sc4', this)"><span>Member Pics<br />&nbsp;</span></a></li>
		<li><a href="http://www.forumskin.com" onmouseover="expandcontent('sc5', this)"><span>&#83;&#101;&#120;<br />&nbsp;</span></a></li>
		<li><a href="http://www.forumskin.com" onmouseover="expandcontent('sc6', this)"><span>Free Bodybuilding<br />Magazine</span></a></li>
	</ul>
</div>

I have tried to enclose those HTML in a TD with NOWRAP attribute. It’s OK in IE, the menu doesn’t break when I resize the browser but still problematic in Firefox. I have also tried to have enclose it it fixed table with but got no good result.

Please advice. Thanks.

2

Set a width (or min-width) on your UL. I’d recommend using em as the unit, to avoid list wrapping if the text size is increased.

3

Hi,

You could do something like this (probably won’t work in all browsers but the major ones seem ok with it.)


/* Center Column - Tab Menu */
#tablist 	{ background-color:#EEEEEE; float:left; width:100%; font-size:10px; text-align:center; }
#tablist ul    { background-color:#EEEEEE; margin:0px; padding:0px; list-style:none;[b]white-space:nowrap[/b] }
#tablist li	 { display:inline; margin:0px; padding:0px; }
#tablist a 	{ color:#FFFFFF; font-weight:bold; [b]display:table-cell;[/b] background:url("images_ef/misc/images_ef/centertab_left.gif") top left no-repeat; margin:0px; padding:0px 0px 0px 8px; text-decoration:none; }
[b]#tablist a {display:inline-block}
[/b]#tablist a span   { color:#FFFFFF; font-weight:bold; float:left; display:block; background:url("images_ef/misc/images_ef/centertab_right.gif") top right no-repeat; padding:6px 9px 5px 0px; }
/* Commented Backslash Hack hides rule from IE5-Mac \\*/
#tablist a span   { float:none; }
/* End IE5-Mac hack */
#tablist a:hover span  { color:#004080; }
#tablist a:hover   { background-position:0% -35px; }
#tablist a:hover span  { background-position:100% -35px; }
#tablist a.current   { color:#004080; background-position:0% -35px; }
#tablist a.current span { color:#004080; background-position:100% -35px; }
.tabcontent	{ display:none; }

Its easier if you can get away without floating.

some other examples.
http://www.pmob.co.uk/temp/hozinlinemenu.htm
http://www.pmob.co.uk/temp/hozinlinelist3.htm
http://www.pmob.co.uk/temp/horizontal-inline-list2.htm

4

Paul, I got a little problem in Firefox. It’s OK in IE but there’s a spacing in Firefox. Please see attached images.

5

HI,

I can see a little gap at the bottom in firefox if that’s what you mean, but without a link to the page it will be hard to suggest anything.

You may (asa last resort )have to hack it if there is no valid reason for the spacing and all margins/padding etc have been controlled.

If you have a link or some code I can try out then I will take a look :wink:

6

Here’s the link http://www.elitefitness.com/noncompare/

Thanks for all your help :slight_smile:

7

Hi,

Ad display:table-cell to the list also but you will need to re-set it back to inline for ie.


#tablist li	 { margin:0px; padding:0px; list-style-position:inside; [b]display:table-cell[/b];}
[b]* html #tablist li {display:inline}
[/b]

I’ve used the star selector hack but you would be better off using conditional comments because ie7 will need the display:inline also but doesn’t understand * html.

8

:cheer: thanks a lot Paul, you’re really a guru. :lympics: - winner

9