...
PDA

Gap Between Images in a List

carleihar
05-08-2010, 07:35 PM
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:

<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:


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!
elevator
05-09-2010, 07:17 AM
Are you sure your images are well resized without exess background?
Excavator
05-09-2010, 02:43 PM
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.
carleihar
05-09-2010, 04:04 PM
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:

http://i42.tinypic.com/4lhg8p.jpg

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.
mbaker
05-09-2010, 05:38 PM
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.

<!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>
carleihar
05-10-2010, 12:25 AM
Here we are, a sample:

http://liveequian.com/page.html
mbaker
05-10-2010, 01:25 AM
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.
mbaker
05-10-2010, 01:55 AM
Try adding to your CSS:

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
carleihar
05-10-2010, 05:36 PM
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.

http://i40.tinypic.com/21k9ixt.jpg

Thanks so much for taking the time to help me!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum