This is an answer to a common problem. This particular question was posted and never answered on http://www.webdeveloper.com/forum/showthread.php?t=207167.
Question posed:
I hope is something simple to solve, but I couldn’t find how to fix this.
Whan placing an ordered/unordered list close to an aligned left image (or float: left if u prefer to use styles) the bullets go behind the image in IE and over the image in FF/Safari.
<!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=windows-1252">
<title>Test</title>
</head>
<body>
<div>
<img src="test.jpg" style="width: 150px; heoght: 200px; float: left">
<p>Hello this is some text, the bullets below are not showing they go behing the image in IE and over the image in FF/Safari (same issue if we use an ordered list).</p>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
</ul>
<p> </p>
<p> </p>
<p>Hello this is more text, here the bullets display properly as supposed.</p>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
</ul>
</div>
</body>
</html>
Does anyone know how to solve this issue?
I mean obviously I could add more margin left to the 1st bullets’ list, but is there way to fix this issue for all bullets’ list without having to add special styles for each bullets’ list that comes close to an aligned left image?
Answer to this problem:
Applying the float left or float right will only push the contents (in this case text) of the box over to either side. In addition, applying a (display: block;) will also push the contents over and not the entire box. The solution to this problem is to include (overflow: hidden;) in the ul css. This will push the entire box and not just the contents over to the right or left, depending on the float settings. Your ul class will look like this:
ul { overflow: hidden;}
IE6 also requires you to include (zoom: 1;) to the ul. Your new ul class will look like this:
ul { overflow: hidden; zoom: 1; }
CodeMoose
