Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Heres a bog standard list which looks how I expect it to in IE7 but not in firefox (and Chrome).

    HTML Code:
    <html>
    
    <head>
    
    	<title>Strange CSS list gap in firefox</title>
    
    	<style type="text/css">
    
    	.result
    	{
    		background: #f1f1f1;
    		float: left;
    		width: 220px;
    	}
    
    	.result ul
    	{
    		margin: 0;
    		padding: 0;
    	}
    
    	.result li
    	{
    		font-family: Verdana; sans-serif;
    		list-style-type: none;
    		padding: 0;
    		padding-top: 5px;
    		padding-left: 5px;
    		padding-bottom: 3px;
    	}
    
    	.result .main-category, .sub-category
    	{
    		font-size: 0.7em;
    		line-height: 1;
    	}
    
    	</style>
    
    </head>
    
    <body>
    
    	<ul class="result">
    		<li>Test li</li>
    		<li class="main-category">Test Cat</li>
    		<li class="sub-category">Test Sub Cat</li>
    	</ul>
    
    </body>
    </html>
    If you run that there is a gap to the left of the list item's. I take it that that is because there is normally a list-style-type but I have removed that.

    Any ideas? In IE7 the text is just beside the left border (well 5px in as per my padding rule).

    Cheers

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I have a vertical nav list which is similar to what you want. But I have coded it totally different. It works in everything I've tested and you can modify it to what you want. I tried messing with yours and well.... I messed it up! Here's the code.

    css)
    #navcontainer {
    width: 145px;
    background-color:#5681C6;
    padding-top: 10px;
    float: left;
    }

    #navcontainer ul
    {
    margin-left: 1px;
    padding-left: 0px;
    list-style-type: none;
    margin-top: 0px;
    }


    #navcontainer a
    {
    display: block;
    padding: 7px;
    width: 125px;
    background-color: #5681C6;
    border-top-style: none;
    }


    #navcontainer a:link, #navlist a:visited
    {
    color: #FFFFFF;
    text-decoration: none;
    }

    #navcontainer a:hover
    {
    background-color: #FFFFFF;
    color: #212C4A;
    }

    markup)

    <div id="navcontainer">
    <ul id="navlist">
    <li><a href="../index.html">Home</a></li>
    <li><a href="../programs.html">Programs</a></li>
    <li><a href="../kits.html">Kits</a></li>
    <li><a href="../pricing.html">Weight/Pricing</a></li>
    <li><a href="../faq.html">FAQ</a></li>
    <li><a href="../testimonials.html">Testimonials</a></li>
    <li><a href="../events.html">Events</a></li>
    <li><a href="../contact.html">Contact</a></li>
    </ul>
    </div>

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Looks like the margin: 0 padding: 0 is applied to .result ul instead of ul.result

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Thanks for that aeroweb99 and yes Shadowfiend my mistake.


Remove Ads

Posting Permissions

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

Search tags for this page

creating a gap in ul
,
li no gap with ul
,

strange gap in ul css

,

ul gap at top

,
ul li list-style-type none gap
Click on a term to search for related topics.
All times are GMT -6. The time now is 03:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com