SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List works perfectly in IE, Messed up beyond all recognition in firefox..

    Hey all,

    Im trying to create a list with a left and right span for each list element and a 1px margin at the top of each list element. However, this works fine in IE, exactly as I want, but in Firefox its just too messed up to describe.

    I've been struggling with this for a while, any help would be much appreciated.

    Heres what I have so far:

    Code:
    	
    <!doctype html 
    public "-//w3c//dtd xhtml 1.0 strict//en"
    "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
    	
    <?xml version="1.0" encoding="UTF-8"?>
    	
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    	<head>
    	
    		<title>test</title>
    		
    		<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    		
    		<style type="text/css" media="screen">
    
    			.clear
    			{
    				clear:both;
    				height:1px;
    				overflow:hidden;
    				margin-top:-1px;
    			}
    		
    			
    			.dataList
    			{
    				border-top:3px #CCCCCC solid; 
    				list-style-type:none; 
    				margin:0px;
    				padding:0px;
    			}
    
    			.dataList li
    			{
    				white-space:nowrap;
    			}
    
    			.dataList .left
    			{
    				float:left; 
    				background-color:#EFEFEF; 
    				width:60%;
    				padding:2px 0px 2px 0px;
    				margin-top:1px;
    			}
    
    			.dataList .right
    			{
    				float:right; 
    				background-color:#EFEFEF; 
    				width:40%;
    				padding:2px 0px 2px 0px;
    				margin-top:1px;
    			}		
    
    		</style>
    	
    	</head>
    	
    	<body>
    
    			
    		<ul class="dataList">
    				
    					
    			<li>
    				<span class="left">
    					<a href="">Title 1</a>
    				</span>
    						
    				<span class="right">
    					<a href="">Link 1</a>
    				</span>
    						
    				<div class="clear" />
    			</li>
    
    			<li>
    				<span class="left">
    					<a href="">Title 2</a>
    				</span>
    						
    				<span class="right">
    					<a href="">Link 2</a>
    				</span>
    						
    				<div class="clear" />
    			</li>
    
    			<li>
    				<span class="left">
    					<a href="">Title 3</a>
    				</span>
    						
    				<span class="right">
    					<a href="">Link 3</a>
    				</span>
    						
    				<div class="clear" />
    			</li>
    					
    		</ul>
    
    	</body>
    </html>
    Thanks,
    Matt

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need a correct doctype so that you don't trigger quirksmode and then I'd simplify the code to something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>test</title>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
       .clear
       {
    	clear:both;
    	height:1px;
    	overflow:hidden;
    	margin-top:-1px;
       }
      
       
       .dataList
       {
    	border-top:3px #CCCCCC solid; 
    	list-style-type:none; 
    	margin:0px;
    	padding:1px 0 0 0;
       }
       .dataList li
       {
    	white-space:nowrap;
    	margin-bottom:1px;
    	background-color:#EFEFEF; 
    			 clear:left;
    		  padding:2px 0px 2px 0px;
    }
       .dataList span
       {
    	float:left; 
    	width:60%;
       }
    /* commented backslash hack v2 \*/ 
    * html li, * html a {height:1%} 
    /* end hack */ 
      </style>
    </head>
    <body>
    <ul class="dataList">
      <li><span><a href="">Title 1</a></span><a href="">Link 1</a></li>
      <li><span><a href="">Title 2</a></span><a href="">Link 2</a></li>
      <li><span><a href="">Title 3</a></span><a href="">Link 3</a></li>
    </ul>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2003
    Location
    England
    Posts
    540
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great stuff Paul, as usual.

    Thanks very much.


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
  •