List Bullets Not centerd In IE

**Struggling** · Jul 8, 2008 06:10

I have created the following test website with a simple list in there. However I have noticed that in FF it looks perfectly but in ie6 the bullets are aligned at the bottom and not in the middle. How do I fix this??

Cheers

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>1 Column Layout</title>
<style type="text/css">

*{margin:0; padding:0}

html, body {
height: 100%;
}

body {
	background: #FFF;
	color: #000;
}

#container {
	background-color: #fff;
	margin: 0 0 -50px 0; /*needed to bring footer into view*/
	min-height: 100%;
}

html>body #container {
	height: auto;
}

* html #container {
	height: 100%;
}

	#header {
		background-color: #FF0000;
		color: #FFF;
		height: 100px;
	}

	#content {
		/* content area styles go here - afterall, this is just the outer container for the content */
	}
		#content .wrapper {
			/* actual content wrapper styles go here */
		}


	#clear-footer {
		clear: both;
		height: 50px;
	}

	#footer {
		background-color:#00CC00;
		clear: both;
		height: 50px;
		position: relative;
	}


/*banner section*/
.ulbanner { 
list-style: none; 
margin: 0; 
padding: 0px; 
overflow: hidden;
color: #333;
width: 875px;
background-color:#000000;
} 

.ulbanner li.bannerleft
{
float: left;
font-weight: bold;
width: 400px;
height: 320px;
margin: 0px; 
padding: 0px;
background-image:url(images/homepageproducts/bannerbackground.jpg);
}

.ulbanner li.bannerright 
{
float: left;
font-weight: bold;
width: 450px;
margin: 0px; 
padding: 0px;
}

.ulbannernext
{ 
list-style: disc;
margin: 0px; 
padding: 10px 0px 0px 30px; 
overflow: hidden;
color: #fff;
width: 280px;
}

.ulbannernext li, .pbanner
{ 
margin: 0px; 
padding: 5px; 
color: #fff;
width:280px;
}

.ulbannernext li
{ font: 14px "Arial", Helvetica, Sans-serif; }

.pbanner
{text-align:justify; font: bold 16px "Arial", Helvetica, Sans-serif; width:280px; margin:0px; padding: 10px;}


</style>



</head>

<body>
<div id="container">
	<div id="header"></div>
		<div id="content">
		
		
		<ul class="ulbanner">
<li class="bannerleft">
<h1 class="h1">Double Enveloping Worm Gearing</h1>
<p class="pbanner">Both the worm and gear envelop each other providing more teeth in contact than any other worm gear product. </p>
<p class="pbanner">The benefits for your application include:</p>
<ul class="ulbannernext">
<li>Greater Durability</li>
<li>Highest Load Carrying Capacity</li>
<li>Greater Stiffness &amp; Precision</li>
<li>Higher Shock Load Capacity</li>
<li>Five Year Warranty</li>
</ul>
</li>
<li class="bannerright"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="450" height="300" id="banner" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="images/homepageproducts/banner/banner.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed src="images/homepageproducts/banner/banner.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="450" height="300" name="banner.swf" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></li>
</ul>
 <!-- this is a content wrapper; VERY useful if using advanced floating and negative margin techniques in tandem with side columns -->
				<div class="wrapper">
					<!-- your page's non-sidebar content goes here -->
				</div>
		</div>

	<div id="clear-footer"></div>
</div>

<div id="footer"></div>
</body>
</html>

**cscott** · Jul 8, 2008 06:42

Hi,

It's best to set the list-style to none and use a background-image on your li to display the bullets. Also, I've found that setting the line-height keeps the browsers from using their defaults which can lead to elements not lining up consistently.

.ulbannernext
{
list-style: none;
margin: 0px;
padding: 10px 0px 0px 30px;
overflow: hidden;
color: #fff;
width: 280px;
}

.ulbannernext li, .pbanner
{
margin: 0px;
padding: 5px 5px 5px 15px;
color: #fff;
width:280px;
}

.ulbannernext li
{ font: 14px "Arial", Helvetica, Sans-serif;
line-height: 12px;
background-image: url(disc.gif);
background-repeat: no-repeat;
background-position: top left;
}

**Struggling** · Jul 8, 2008 07:29

Cheers for that it works perfectly.

Thank You

User Tag List

Thread: List Bullets Not centerd In IE

Thread Tools

Display

List Bullets Not centerd In IE

Bookmarks

Bookmarks

Posting Permissions