Google Chrome Merged Objects.

**Lucas11** · Mar 20, 2012 14:21

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.

Code:

<!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

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;
}

Anyone who can help it would be grateful.

**Paul O'B** · Mar 20, 2012 16:21

Hi,

Its broken in all but IE7 as far as I can see

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.

Code:

<!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">
<link rel="stylesheet" type= "text/css" href="mystyle.css">
<title>What the Digerati Know</title>
<style type="text/css">
body {
	background-color:#B0B0B0;
	text-align: center; /* For IE */
	font-size:100%;
}
#outer {
	width:904px;
	margin:auto;
}
#nav {
	padding: 0;
	margin: 0 auto;
	width: 904px;
	list-style:none;
	font-family:Arial, Helvetica, sans-serif,;
}
#nav li { display: inline; }
#nav li a {
	text-decoration: none;
	float:left;
	padding:0 15px;
	line-height:3em;
	height:3em;
	background: #2175bc;
	color: #fff;
}
#nav li a:hover {
	background-color: #2586d7;
	height:2.8em;
	top:.2em;
	position:relative;
}
#nav li.last a {
	float:none;
	overflow:hidden;
	zoom:1.0;
	text-align:center;
	display:block;
}
#main {
	border:2px solid #000;
	width: 800px;
	margin: 0 auto;
	padding:25px 50px;
	clear:both;
}
</style>
</head>
<body>
<div id="outer">
		<ul id="nav">
				<li><a href="index.html">Advantages 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 class="last"><a href="cmos.html">Common Methods of Goat Herding 2</a></li>
		</ul>
		<div id="main">
				<p> TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
						VTEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTX
						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT
						TEXTTEXTETXTETXTXTXTXTXTXTXTXTXTXTXT </p>
		</div>
</div>
</body>
</html>

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.

**Lucas11** · Mar 20, 2012 16:30

Thanks for explaining. Normally IE is the problem :|.

User Tag List

Thread: Google Chrome Merged Objects.

Thread Tools

Display

Google Chrome Merged Objects.

Bookmarks

Bookmarks

Posting Permissions