SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Location
    Ontario, Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE and list problem

    Hi there. I'm new to CSS and am trying to make my list appear the same way in IE as it does in FF.

    In FF:



    In IE:



    What's with the added space?

    Code:
    <!--
    #menu ul {
    	margin: 1% 0 1% 1%;
    	padding: 0;
    	}
    
    #menu li {
    	background: #2F0CBE;
    	border: 1px #6D4BF9 solid;
    	font-family: Vrinda, sans-serif;
    	font-size: 1.5em;
    	font-variant: small-caps;
    	display: inline;
    	margin: 0;
    	padding: 0;
    	}
    
    #menu a {
    	color: #FFF;
    	padding: 0 1%;
    	text-decoration: none;
    	}
    
    #menu a:hover {
    	background: #694CDA;
    	}
    -->
    
    <div id="menu">
    <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">about</a></li>
    </ul>
    </div>

  2. #2
    SitePoint Member
    Join Date
    Apr 2006
    Location
    Ontario, Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bump

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    	background-color:#003366;
    }
    #menu {
    	margin: 1% 0 1% 1%;
    	}
    
    #menu li {
    	font-family: Vrinda, sans-serif;
    	font-size: 1.5em;
    	font-variant: small-caps;
    	display: inline;
    	}
    
    #menu a {
    	color: #FFF;
    	padding: 0 1%;
    	margin:0.1em;
    	text-decoration: none;
    	float:left;
    	background: #2F0CBE;
    	border: 1px #6D4BF9 solid;
    	display:inline;
    	}
    
    #menu a:hover {
    	background: #694CDA;
    	}
    </style>
    </head>
    <body>
    <ul id="menu">
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">about</a></li>
    </ul>
    </body>
    </html>


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
  •