When you load the following code in I.E it comes with the desired effect. But when it comes to Chrome it all overlaps.
My main browser is chrome and I never normally get any problems.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<link rel="stylesheet" type= "text/css" href="mystyle.css">
<title>What the Digerati Know</title>
</head>
<body>
<ul id=”button”>
<li><a href="index.html">Advatnages of Goats</a></li>
<li><a href="bof.html">Benefits Of Goats</a></li>
<li><a href="cmos.html">Common Methods of Goat Herding 1</a></li>
<li><a href="cmos.html">Common Methods of Goat Herding 2</a></li>
</ul>
<p>
TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
VTEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTX
TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
</p>
</body>
</html>
CSS Code
body
{
background-color:#B0B0B0;
text-align: center; /* For IE */
}
#button {
padding: 0;
margin: 0 auto;
width: 900px;
}
#button li {
display: inline;
}
#button li a {
font-family: Arial;
font-size:16px;
text-decoration: none;
float:left;
padding: 15px;
background-color: #2175bc;
color: #fff;
}
#button li a:hover {
background-color: #2586d7;
margin-top:2px;
padding-bottom:13px;
}
p
{
border-style: solid;
width: 800px;
margin: 0 auto;
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
margin-left:auto;
margin-right:auto;
}
You need to clear the element that follows the floated navigation or its background just slides underneath.
It’s not possible either to make multiple floated elements just happen to fit the total width of the parent using padding alone. Browsers render text at different sizes and a whole line of text can be as much as 20px longer/shorted depending on browser.
You either need to remove the padding and size each element to fit exactly with dimensions which will allow then to be zoomed a few times without breaking or make the last item non floated so it just fills the remaining space automatically without the need for padding. This latter method will still allow for a couple of text resizes but will break sooner than the first method.
To avoid the text wrapping as text size is increased you would need to use ems for the container so that the container expands with text size. Or alternatively use less links on the top so that they have more room to grow.