Page is a not externally linkable
Paul_o_b - 2:21 pm on Jun 25, 2012 (gmt 0)
Hi,
If you are relying on text-content-width + padding to equal the width of a parent element then you are out of luck because browsers all render text at various different widths. On a long line the difference can be quite substantial.
The only way to make browsers all the same would be to give a width to each menu item and remove the padding and center the text within each item with text-align:center.
Of course for a dynamic menu or a menu that changes on every page that would be a nightmare to maintain so you are better off just having the menu short or indeed accommodate for wrapping. After all what happens when a user has a larger font-size than the one you built the page with?
Alternatively, for IE8+ support you could use the display:table-cell properties
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.menu {
display:table;
width:800px;
margin:20px auto;
padding:0;
list-style:none;
}
.menu li {
display:table-cell;
border:1px solid #000;
text-align:center;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words or more</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words</a></li>
<li><a href="#">testing</a></li>
</ul>
<ul class="menu">
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing 2 words</a></li>
</ul>
</body>
</html>