Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Spacing out text links with CSS 1

Status
Not open for further replies.
gus121

gus121

Technical User
May 9, 2002
298
GB
Spacing out links with CSS. Hi I have a number of links in a top navigation banner. Instead of puting the HTML links into a table. I decided to space out the links using CSS.

I tried using something like these in the style sheet to space the links with an ID on the TD element.

1.
td#top-links a:link{
padding 0,20px,0,20px;
}


2.
td#top-links a:links{
margin: 0,20px,0,20px;
}

3.
tried also a span elemnt class around each link used both padding and margin.

Have found that dispaly fine in IE but not in NS. Any ideas how I can get this to work in both.

Thanks



Angus
 
Sort by date Sort by votes
Is it just that you've missed the ":" after padding in the first example, and used ":links" instead of ":link" in the second? You should also use spaces, not commas, to seperate the values. Try validating your CSS at to weed out possible syntax errors. I got the following to work fine on both IE and NS7.

[tt]<html>
<head>
<title>Menu</title>
<style>
td#top-links a {
padding: 0 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td id=&quot;top-links&quot;>
<a href=&quot;#&quot;>Link1</a>
<a href=&quot;#&quot;>Link2</a>
<a href=&quot;#&quot;>Link3</a>
</td>
</tr>
<tr>
<td>
This is the body
</td>
</tr>
</table>
</body>
</html>[/tt]

If you're talking about NN4.7, I wouldn't spend too much time on it. Providing your site is legible on the sucky old browser it probably doing ok.


-- Chris Hunt
Extra Connections Ltd
 
Upvote 0 Downvote
Thanks you solved my problem it must have been the , seperator in the padding which caused NS problems. thanks


Angus
 
Upvote 0 Downvote
Hi Chris I have found the above code does not display correctly in IE5.0 do you know of anouther way to space out the links. I tried margin this does not work.

regards,

Angus
 
Upvote 0 Downvote
According to there's a bug in IE5 which means that margins and padding don't work on inline text elements. So, if the spacing is critical to you, and you want to support IE5, you'll have to fall back on spacer gifs, tables and other heretical-but-it-works non CSS fixes.

-- Chris Hunt
Extra Connections Ltd

The real world's OK for a visit, but you wouldn't want to LIVE there!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
717
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
762
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
608
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
647
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top