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
Baffled! Gap between links.
Moderator: General Moderators
good news,
in firefox there are no gaps!
do you have the links like this:
or
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...
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...
$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:
new site:
any thoughts?
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;
}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;
}