[SOLVED] Image spacing - I feel like this has to be easy...

[Kane250]

I have a navigation bar made up of rollovers that when all pushed completely together, fit the screen perfectly. However there is added space automatically going between each rollover, and no matter what I change in the CSS, I cannot get rid of it...

 

Can someone help me out pleeeeease?

 

<div id="footer">
<a href="events.html" onmouseover="image1.src='images/eventsro.gif';"
onmouseout="image1.src='images/events.gif';">
<img name="image1" src="images/events.gif" border="0px"></a>

<a href="weddings.html" onmouseover="image2.src='images/weddingsro.gif';"
onmouseout="image2.src='images/weddings.gif';">
<img name="image2" src="images/weddings.gif" border="0px"></a>

<a href="corporate.html" onmouseover="image3.src='images/corporatero.gif';"
onmouseout="image3.src='images/corporate.gif';">
<img name="image3" src="images/corporate.gif" border="0px"></a>

<a href="gifts.html" onmouseover="image4.src='images/giftsro.gif';"
onmouseout="image4.src='images/gifts.gif';">
<img name="image4" src="images/gifts.gif" border="0px"></a>
</div>

 

CSS

#footer {
background: transparent;
margin: 0px;
padding: 0px;
word-spacing: normal;
letter-spacing: normal;
text-align: left;
white-space: nowrap;
width: 800px;
height: 25px;
float: left;
}

[Kane250]

really? nobody? There surely has to be a solution?

[akitchin]

i'm no CSS guru, but i'll take a stab at it.  try adding the image and anchor elements directly into your definition:

 

#footer img, a
{
  margin: 0;
  padding: 0;
}

[haku]

We need to see the CSS for the rollovers. The CSS you posted doesn't tell us anything.

[TheFilmGod]

Before you try fixing this problem, you should consider looking into css. There is absolutely no reason to be using javascript for something that css can do easily and more efficiently. (Rollovers).

[Kane250]

We need to see the CSS for the rollovers. The CSS you posted doesn't tell us anything.

 

oh, I am not doing the rollovers in css. I am using this at the beginning of my page to preload the images:

 

image1 = new Image();
image1.src = "images/eventsro.gif";

image2 = new Image();
image2.src = "images/weddingsro.gif";

image3 = new Image();
image3.src = "images/corporatero.gif";

image4 = new Image();
image4.src = "images/giftsro.gif";

 

Then I am just using what you see posted above.

[Kane250]

Before you try fixing this problem, you should consider looking into css. There is absolutely no reason to be using javascript for something that css can do easily and more efficiently. (Rollovers).

 

Really? I remember looking into css rollovers and there was a mountain more of code than what I have now..

[Kane250]

i'm no CSS guru, but i'll take a stab at it.  try adding the image and anchor elements directly into your definition:

 

#footer img, a
{
  margin: 0;
  padding: 0;
}

 

thanks but this made all my images everywhere scrunch way together and it made my nav stretch height

[Zane]

does the space happen before or after you hover over them

[Kane250]

does the space happen before or after you hover over them

 

before. they space out once the page loads.

[haku]

CSS rollovers are well preferable to javascript rollovers. They use less resources, and are much more reliable, as many users have javascript turned off.

[Kane250]

ok, well in any case, if I change to CSS rollovers should that fix the problem I'm having? Won't the div treat it the same?

[haku]

Probably not. If the images are the same size, you shouldn't have any problems.

[Kane250]

haha, ok I gave in and changed everything to CSS rollovers and that did fix it. I have to say though, I am not a fan of hoe you have to make the images for CSS rollovers. It's actually a real pain if you are working with transparent images and have to have exact measurements for top and bottom of the rollover image to shift....

 

Anyway....troubles are over (in this area) haha thanks a ton.

[haku]

Glad you got it sorted!