4 replies [Last post]
Aaron
Offline
Regular
Last seen: 13 years 7 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

I've looked through all the posts I could find regarding this topic and frankly don't understand what the solutions were. I'm hoping someone can help me solve this...

Example is at http://www.sugarfixdesign.com/testing/CSS_Test.htm

The images (navigation) on the blue are minutely spaced so that if you mouse from one to the next there is a break and the man moves back to his starting position briefly. They are supposed to but up against one another so the movement is fluid. I've tried the "margin:0; , padding:0;" and everything else I could find in other posts or logically think of to get them to play nicely.

You will find the working version at sugarfixdesign.com but it uses tables.

ARGdesign
Offline
newbie
England
Last seen: 16 years 38 weeks ago
England
Joined: 2004-03-15
Posts: 2
Points: 0

Whitespace between images

You have line breaks in your HTML source between each a tag. Remove the breaks so the three links are on the same line and it should get rid of the problem. I tried it locally and the following code works...

<img class="align" id="running" src="graphx/MAINrunningman.gif" border="0" alt="" /><a href="studio.htm"><img id="design" src='graphx/MAINdesign.gif' onMouseOver='document.images["design"].src="graphx/MAINdesignAlt.gif"; document.images["running"].src="graphx/runspacer.gif"' onMouseOut='document.images["design"].src="graphx/MAINdesign.gif"; document.images["running"].src="graphx/MAINrunningman.gif"' border="0" alt="" /></a><a href="pricing.htm"><img id="pricing" src='graphx/MAINpricing.gif' onMouseOver='document.images["pricing"].src="graphx/MAINpricingAlt.gif"; document.images["running"].src="graphx/runspacer.gif"' onMouseOut='document.images["pricing"].src="graphx/MAINpricing.gif"; document.images["running"].src="graphx/MAINrunningman.gif"' border="0" alt="" /></a><a href="about.htm"><img id="about" src='graphx/MAINabout.gif' onMouseOver='document.images["about"].src="graphx/MAINaboutAlt.gif"; document.images["running"].src="graphx/runspacer.gif"' onMouseOut='document.images["about"].src="graphx/MAINabout.gif"; document.images["running"].src="graphx/MAINrunningman.gif"' border="0" alt="" /></a><img src="graphx/spacerBlue.gif" width="30" border="0" alt="" />

It's a long line, but it should give you the result you want! Laughing out loud

Aaron
Offline
Regular
Last seen: 13 years 7 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Whitespace between images

Awesome, Thanks!

I guess I didn't understand other posts that referenced "line breaks" to mean that you can't even put things on a new line so it is readable...

Kind of frustrating but definately the solution

ARGdesign
Offline
newbie
England
Last seen: 16 years 38 weeks ago
England
Joined: 2004-03-15
Posts: 2
Points: 0

Whitespace between images

It's a frustrating 'feature' that can take a while to spot when you first encounter it! It doesn't seem to affect text, but images suffer when you want things to be precise!

Good luck with the site. Laughing out loud

Aaron
Offline
Regular
Last seen: 13 years 7 weeks ago
Timezone: GMT-7
Joined: 2004-03-15
Posts: 29
Points: 0

Whitespace between images

isn't it all about precision? Wink

Thanks again