Baffled! Gap between links.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Sikwondo
Forum Newbie
Posts: 8
Joined: Fri Sep 02, 2005 5:29 am

Baffled! Gap between links.

Post by Sikwondo »

Hi

I am not sure whether this is a css issue or xhtml, there is a gap between my <a href... links.

I have re-designed the site, but the code for those specific links is the same as the old but on the new site there are strange gaps between them when there weren't any on the old site (I hope this makes sense).

intro | <--gap--> devon rabbits | <--gap-->west sussex animal mutilations |(etc)

Should be: intro | devon rabbits | west sussex animal mutilations | (etc)

This gap only appears on Mac.

Here is a page highlighting the gaps .. on the "You are here >(gap> news >(gap) animal .." and the sub menu aligned to the right, there is a gap to the left of the text.

New site with gaps
http://www.simonbailey.co.uk/petdetecti ... ions1.html
http://www.simonbailey.co.uk/petdetectives/.css.css

Old site without gaps (as should be)
http://www.simonbailey.co.uk/petdetecti ... ions1.html
http://www.simonbailey.co.uk/css.css


Could anyone advise me as to why there are these gaps?

Thank you in advance for any help

Simon
User avatar
$var
Forum Contributor
Posts: 317
Joined: Thu Aug 18, 2005 8:30 pm
Location: Toronto

Post by $var »

good news,
in firefox there are no gaps!

do you have the links like this:

Code: Select all

<a href="">blah blah blah</a> |
<a href="">blah blah blah</a> |
<a href="">blah blah blah</a> |

or

Code: Select all

<a href="">blah blah blah</a> | <a href="">blah blah blah</a>

I find, at least with images, that when you don't have them in a line, like, if you have whitespace that there are gaps between the images...
ryanlwh
Forum Commoner
Posts: 84
Joined: Wed Sep 14, 2005 1:29 pm

Post by ryanlwh »

$var, i check the sources for the new site and old site. The old site also has new lines between links, so I don't think that's the case. It was an interesting thought though.

Let's look at the css... maybe this will give us some clues...

old site:

Code: Select all

#mutilationMenu {
	width: 710px;
	position: absolute;
	text-align: right;
	margin-top: -33px;
	}
#mutilationMenu a:link, #mutilationMenu a:visited {
	text-decoration: none;
	color: #C0C0C0;
	}
#mutilationMenu a:hover {
	text-decoration: underline;
	color: #616161;
	}
new site:

Code: Select all

#sub-menu {
	width: 758px;
	text-align: right;
	}
#sub-menu a:link, #sub-menu a:visited {
	padding: 0;
	text-decoration: none;
	color: #C0C0C0;
	}
#sub-menu a:hover {
	text-decoration: underline;
	color: #616161;
	}
any thoughts?
Post Reply