SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List Bullets Not centerd In IE

    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>

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Boston
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;

    }
    Attached Images Attached Images

  3. #3
    SitePoint Addict
    Join Date
    Jan 2007
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for that it works perfectly.

    Thank You


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •