Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gap Between Images in a List

    Hi there, I'm new.

    In my website, I have a main navigation made of images in a list. The problem is is that I'm getting a 3-4 px gap between them in IE and Firefox. I'm sure this is a common problem, but I couldn't find much of it on the web. Could someone shed some light on the problem?

    Here is the navbar code:

    Code:
    <ul class="mainNav">
                	<li><a href="../index.php"><img src="images/navColumn/image.gif" alt="title" width="175" height="28" /></a></li>
                    <li><a href="../viewriders.php" class="rollover" style="background-image: url(images/navColumn/image.gif)" title="Title"><span class="displace">Title</span></a></li>
                    <li><a href="../train.php" class="rollover" style="background-image: url(images/navColumn/image.gif)" title="Title"><span class="displace">Title</span></a></li>
                    <li><a href="../feedhorses.php" class="rollover" style="background-image: url(images/navColumn/image.gif)" title="Title"><span class="displace">Title</span></a></li>
                	<li><img src="images/navColumn/image.gif" alt="Title" width="175" height="28" /></li>
                    <li><a href="../mystats.php" class="rollover" style="background-image: url(images/navColumn/image.gif)" title=""><span class="displace">Title</span></a></li>
                    <li><a href="../worldstats.php" class="rollover" style="background-image: url(images/navColumn/image.gif)" title=""><span class="displace">Title</span></a></li>
                    <li><a href="../link.php" class="rollover" style="background-image: url(images/navColumn/image.gif)" title=""><span class="displace">Title</span></a></li>
                    <li><a href="../viewresults.php" class="rollover" style="background-image: url(images/navColumn/image.gif)" title=""><span class="displace">Title</span></a></li>
                 	<li><img src="images/navColumn/myAccount.gif" alt="My Account" width="175" height="28" /></li>
                    <li><a href="../accountsettings.php" class="rollover" style="background-image: url(images/navColumn/acctSettings.gif)" title="Account Settings"><span class="displace">Account Settings</span></a></li>
                    <li><a href="../changepass.php" class="rollover" style="background-image: url(images/navColumn/changePass.gif)" title="Change Password"><span class="displace">Change Password</span></a></li>
                    <li><a href="../subscribe.php" class="rollover" style="background-image: url(images/navColumn/subscriptions.gif)" title="Subscriptions"><span class="displace">Subscriptions</span></a></li>
                    <li><a href="../mail.php" class="rollover" style="background-image: url(images/navColumn/mailbox.gif)" title="Mailbox"><span class="displace">Mailbox</span></a></li>
               	<li><img src="images/navColumn/world.gif" alt="World" width="175" height="28" /></li>
                    <li><a href="../forum.php" class="rollover" style="background-image: url(images/navColumn/forum.gif)" title="Forum"><span class="displace">Forum</span></a></li>
                    <li><a href="../explore.php" class="rollover" style="background-image: url(images/navColumn/explore.gif)" title="Explore"><span class="displace">Explore</span></a></li>
            </ul>

    The images that are not links are "headers" for the section.

    Now here is my CSS:

    Code:
    ul.mainNav{
        width:175px;
        margin:0;
        padding:0;
    	list-style-type:none;
    	display:block;
    	font-size:8px;
    }
    
    ul.mainNav li{
        width:175px;
        display:block;
        margin:0;
        padding:0;
        background-color:white;
        border-width:0px;
    }
    
    .mainNav a.rollover {
    	display: block;
    	width: 175px;
    	height: 22px;
    	text-decoration: none;
    	}
    
    .mainNav a.rollover:hover {
    	background-position: -175px 0;
    	}
    
    .mainNav .displace {
    	position: absolute;
    	left: -5000px;
    	font-size:6px;
    	}

    Thanks so much!

  • #2
    New to the CF scene
    Join Date
    May 2010
    Location
    Lagos, Nigeria
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Are you sure your images are well resized without exess background?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello carleihar,
    Since your question has to do with images you would get a lot more help if you linked us to the test site so we could actually see the images.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sure that my photos are the correct size because it works perfectly fine on Safari.

    Here is an image of what is happening:



    See the space between the first, larger image and the second?

    And you can see the space between the two smaller images when you rollover the sprite.

  • #5
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Without access to your images it is very difficult to see what is happening.

    I don't doubt that there is a problem, its just very difficult to figure out what it is without the images.

    The image you provide actually creates more questions than it answers.

    For example there appears to be a black 1px border around your navbar, and 1px light green border between your images. Are these borders part of the images, or are they CSS? If CSS, where is the CSS?

    Here is a test harness made up with your code. If you look at it in a browser you will see that it does not tell us very much. Even if we do find what's wrong and fix it, we won't be able to see that it is fixed. That is without the images.

    I've added a <base href=""> tag. If the images are anywhere on the Web, or you could place them somewhere on the Web, we could put that location in the href attribute. Then (with suitable changes to image URLs) the test harness would actually show what is happening.

    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">
      <head>
        <base href="" />
    
        <meta http-equiv='Content-type' content='text/html;charset=UTF-8' />
    
        <title>Navbar Images</title>
    
    <style type="text/css">
    ul.mainNav{
        width:175px;
        margin:0;
        padding:0;
        list-style-type:none;
        display:block;
        font-size:8px;
    }
    
    ul.mainNav li{
        width:175px;
        display:block;
        margin:0;
        padding:0;
        background-color:white;
        border-width:0px;
    }
    
    .mainNav a.rollover {
        display: block;
        width: 175px;
        height: 22px;
        text-decoration: none;
        }
    
    .mainNav a.rollover:hover {
        background-position: -175px 0;
        }
    
    .mainNav .displace {
        position: absolute;
        left: -5000px;
        font-size:6px;
        }
    </style>
      </head>
    
      <body>
        <h1>Navbar Images</h1>
    
        <ul class="mainNav">
          <li>
            <a href="../index.php">
              <img src="images/navColumn/image.gif" alt="title" width="175" height="28" />
            </a>
          </li>
    
          <li>
            <a href="../viewriders.php" class="rollover"
            style="background-image: url(images/navColumn/image.gif)" title="Title">
              <span class="displace">Title</span>
            </a>
          </li>
    
          <li>
            <a href="../train.php" class="rollover"
            style="background-image: url(images/navColumn/image.gif)" title="Title">
              <span class="displace">Title</span>
            </a>
          </li>
    
          <li>
            <a href="../feedhorses.php" class="rollover"
            style="background-image: url(images/navColumn/image.gif)" title="Title">
              <span class="displace">Title</span>
            </a>
          </li>
    
          <li>
            <img src="images/navColumn/image.gif" alt="Title" width="175" height="28" />
          </li>
    
          <li>
            <a href="../mystats.php" class="rollover"
            style="background-image: url(images/navColumn/image.gif)" title="">
              <span class="displace">Title</span>
            </a>
          </li>
    
          <li>
            <a href="../worldstats.php" class="rollover"
            style="background-image: url(images/navColumn/image.gif)" title="">
              <span class="displace">Title</span>
            </a>
          </li>
    
          <li>
            <a href="../link.php" class="rollover"
            style="background-image: url(images/navColumn/image.gif)" title="">
              <span class="displace">Title</span>
            </a>
          </li>
    
          <li>
            <a href="../viewresults.php" class="rollover"
            style="background-image: url(images/navColumn/image.gif)" title="">
              <span class="displace">Title</span>
            </a>
          </li>
    
          <li>
            <img src="images/navColumn/myAccount.gif" alt="My Account" width="175"
            height="28" />
          </li>
    
          <li>
            <a href="../accountsettings.php" class="rollover"
            style="background-image: url(images/navColumn/acctSettings.gif)"
            title="Account Settings">
              <span class="displace">Account Settings</span>
            </a>
          </li>
    
          <li>
            <a href="../changepass.php" class="rollover"
            style="background-image: url(images/navColumn/changePass.gif)"
            title="Change Password">
              <span class="displace">Change Password</span>
            </a>
          </li>
    
          <li>
            <a href="../subscribe.php" class="rollover"
            style="background-image: url(images/navColumn/subscriptions.gif)"
            title="Subscriptions">
              <span class="displace">Subscriptions</span>
            </a>
          </li>
    
          <li>
            <a href="../mail.php" class="rollover"
            style="background-image: url(images/navColumn/mailbox.gif)" title="Mailbox">
              <span class="displace">Mailbox</span>
            </a>
          </li>
    
          <li>
            <img src="images/navColumn/world.gif" alt="World" width="175" height="28" />
          </li>
    
          <li>
            <a href="../forum.php" class="rollover"
            style="background-image: url(images/navColumn/forum.gif)" title="Forum">
              <span class="displace">Forum</span>
            </a>
          </li>
    
          <li>
            <a href="../explore.php" class="rollover"
            style="background-image: url(images/navColumn/explore.gif)" title="Explore">
              <span class="displace">Explore</span>
            </a>
          </li>
        </ul>
      </body>
    </html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #6
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here we are, a sample:

    http://liveequian.com/page.html

  • #7
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    According to BrowserShots (http://browsershots.org/http://liveequian.com/page.html) there is no problem in EI, Chrome or Opera.

    There are gaps in Firefox.

    Safari is a mess.

    I may get a chance to look at this further tomorrow.

    Michael.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #8
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Try adding to your CSS:

    Code:
    ul.mainNav li img {
      display:block;
    }
    When the gap is appearing it is due to the image having the CSS property display:inline rather than display:block

    For an explanation see: http://www.quirksmode.org/css/quirksmode.html
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #9
    New to the CF scene
    Join Date
    May 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh..that seemed to fix it in Firefox and is a little better in my version of IE.

    In this picture of IE 7 you can still see a little gap but it's an improvement.



    Thanks so much for taking the time to help me!


  •  

    Tags for this Thread

    Posting Permissions

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