Hi ! Following my previous post about text sizing I'm trying to make my code better so that my site shows up well on linux as the linux default fonts are wider than the windows ones...

At the moment I've got a menu (made up of 5 li's set to inline) with a fixed width (580px) centered on the page (margin : 0 auto;).

But:

Although on windows it shows up fine, on linux the font is not the same and is wider. And the two end "li"'s go to a new line, which means that my menu's backound is only behing the first four and the last two are out of line !!

I can see only two solutions :

1) Don't use text anymore and replace the text by images
This is not the solution I would like to take !

2) Manage to make the menu's width adapt to the contents

Sound's easy but it only works if I set the float to the left, and there fore the menu is no longer centered...
Does anyone know how I could get around this, in other words how do you make a div with an automatic width that adapts to the wording that it contains that is centered on the page?

When it is set to align left or aglin right, it's ok but when it is not set or set to auto, the DIV takes up the whole width of the page and I do not want this.

I have found a work around but I do not like it !
I've used a table to achieve what css does not apear to be able to do...

I would be very greatful if someone could show me how to do this in css !

Post a link or the code and we can better help.

Hi Here is the code of the section in question :



XHTML :

<div id="menubk"><div id="menucont">
<div id="menulft"></div>
<div id="menurht"></div>
<div id="menu">
<ul>
<li><a href="index.html">Menu 1</a> </li>
<li><a href="menu2.html">Menu 2</a></li>
<li><a href="menu3.html">Menu 3</a></li>
<li><a href="menu4.html">Menu 4</a></li>
<li><a href="menu5.html">Menu 5</a></li>
<li><a href="menu6.html">Menu 6</a></li>
</ul>
</div>
</div>
</div>


and the CSS :

#menubk {
background-image: url(images/back2.gif);
height: 30px;
width: 100%;
}
#menucont {
background-image: url(images/back3.gif);
background-repeat: repeat-x;
height: 30px;
margin: 0 auto;
line-height: 30px;
width: 580px;
text-align: center;
}
#menulft {
float: left;
height: 30px;
width: 10px;
background-image: url(images/left2.gif);
background-repeat: no-repeat;
}
#menurht {
float: right;
height: 30px;
width: 10px;
background-image: url(images/right2.gif);
background-repeat: no-repeat;
}
#menu a {
color: #000;
text-decoration: none;
}
#menu a:hover {
color: #666;
}
li {
display: inline;
}



What I want is the menu to automaticaly adjust the width to the text it contains so that if you choose to up the size of the text on your browser the menu stretches instead of going to a new line. I have managed this using a table but I want my page to be W3C and W3C says only use tables for tabular data ...
Maybe this is not possible with CSS though ...

Yes, you can certainly do it o.k. Firstly, try using a % instead of a fixed width for your menu items.

What I'd certainly do is look at :

http://css.maxdesign.com.au/listamatic/

Heaps of great CSS menus there.