Nav Bar Problem

[SirChick]

Ok i have a nav bar which has "Locked" features and it shows the word "Locked" when it is locked.

 

Now say they unlock it and the word changes to the feature which is either shorter or longer than the word "Locked" all the other nav bar links move with it which i do not want to happened.. i need to be "fixed" in position as such...

 

How can i stop this from happening.. i know alot of CSS coders say they get this problem also so.. perhaps theres a pro out there who can suggest something..(ps it would need to work on cross browsers)

 

 

Hope you can help..

 

[SirChick]

I might have a better way to explain what i mean here:

 

If i remove "locked" link from the nav bar then the links after it move left rather than stay where they are its like this:

 

 

My House    |    Locked  |  Log Out

Becomes:

My House | Log Out |

 

 

 

This is what i actually want it to do how ever:

 

Becomes:

My Houses  |                |  Log Out

 

 

 

My CSS is this:

 

#wrapper {
width: 700px;
margin: 0 auto;
}
#navbar {
border: 1px solid #ccc;
margin: 0px 5px 0px 5px;
padding: 4px;
background-color: #A3A38F;
}
#header {
margin: 5px 5px 5px 5px;
}

 

HTML

<div id="topheader">
<ul>
	<li><a href="#">My House</a></li>
	<li><a href="#">My Phone</a></li>
	<li><a href="#">City</a></li>
	<li><a href="#">Newspaper</a></li>
	<li><a href="#">Locked</a></li>
	<li><a href="#">Laptop</a></li>
	<li><a href="#">Stats</a></li>
	<li><a href="#">Locked</a></li>
	<li><a href="#">Log Out</a></li>
</ul>
   </div>

 

Please let me know if theres anything else in script you need to see to help you

[TheFilmGod]

put locked at the end?

 

Use php to parse the html that adds a "space", so it would work. - and make sure the css nav bar is display: block, with a fixed width. Inline won't work.