How can i stop last link on horizontal menu from float out

HTML & CSS
1

Hi i have the following webpage which has horizontal menu at the top (home, about us and so on) my problem is that if the users minimaze the page with ctrl - or maximise with ctrl+ the last links from the menu moves under the navigation bar.
how can i stop that from happening so that no matter if the users minimizes or maximimise the links words should shrink enough to always fit in the navigation bar here my page
website

here my menu codes

HTML

<div class="row6">  <!--START navigation button START -->      

   <ul id="topnav">
        <li><a href="index.php"><b>HOME</b></a></li>
        <li><a href="home2.html"> <b>ABOUT US</b></a></li>
        <li><a href="gallery.html"><b>GALLERY</b></a></li>
        <li><a href="market.php"><b>VIDEO MARKETING</b></a></li>
        <li><a href="#"><b>WEB <span style="color: #0F0; font-weight:900px;">TV</span> PRESENTERS.co.uk</b></a></li>
        <li><a href="#"><b>AWARDS</b></a></li>
        <li><a href="#"><b>INSTANT QUOTE</b></a></li>
        <li><a href="#"><b>EQUIPMENT</b></a></li>
        <li><a href="#"><b>STAFF</b></a></li>
        <li><a href="#"><b>CONTACT US</b></a></li>      
    </ul>
     <!-- END navigation button END -->
</div>

the CSS


ul#topnav {
width:800px;
	margin: 0; padding: 0;
	float: left;
	height:25px;
	list-style: none;
	background-image:url(images_menu_top/middle.gif);


}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-left: 1px solid #555;
	height:25px;
}
ul#topnav li a {
	padding: 5px 5px;
	display: block;
	color: black;
	text-decoration: none;
	font-size:14px;
}
ul#topnav li:hover {
	text-decoration:underline;

}
#topnav li ul {
	float: left;
	padding: 10px 0;
	position: absolute;
	left: 0; top:25px;
	display: none;
	width: 1000px;
	color: orange;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
#topnav li:hover ul { display: block; }
#topnav li ul a { display: inline; color:orange; }
#topnav li ul a:hover {text-decoration: underline;}
2

Hi,

The last two links in all my browsers are on the next line anyway at normal text size. I have to shrink the text quite a few times before it will fit on one line.

You should either design it so that text can wrap to another line and the background follows or reduce the number of links in that menu so that it can grow a bit withut dropping. Or design the width of the page and nav in ems and not pixels so that the width scales with text resize at the same rate.

Apart form the above there is nothing you can do otherwise to stop the text from enlarging and moving to the next line.

3

Ok thanks can i just ask to have a lok at this one can you tell me if the links are going under aswell the menu is at bottom
1st4film | High Definition INTERNET FILMS for Television and Sport inc. WEB TV Streaming NORTH OF ENGLAND

4

They seem to be ok on one line in that page at normal text size in Firefox and IE.

For narrow width layouts like that I would usually accept that the text is going to wrap when increased in size and maybe have the menu text centred and the background follow down to the next line.

The options are few as I mentioned above because you gave no real control over these things so you should always expect that things may not fit exactly as your picture dictates and make sutiable arrangements when text wraps or stretches.

These are the trials of a web developer :slight_smile:

5

thank you very much i’ll work on it