/    Sign up×
Community /Pin to ProfileBookmark

background color for <a> tag, need help with padding

Copy linkTweet thisAlerts:
Feb 17.2009

hi I’m setting some background color to my <a href> text tags to give a highlighted effect. I’m using padding so that the text fits neatly inside the coloured background. Everything’s fine until you get a text link that is too wide for the div column that it is sat in. What happens is that you don’t get any padding on the left hand side of the wrapped over text. I’ve included a pic showing you what’s happening. [URL=”http://www.chriscannon.co.uk/text.jpg”]http://www.chriscannon.co.uk/text.jpg[/URL] the only style I’ve got so far is

[code=html]text-decoration:none; color:#FFF; background:#01511C; padding:4px 10px 4px 10px; [/code]

this is assigned to the a tag. I don’t want to put a break in as the links will be created by the user and I don’t want to put the effect on the <li> tag that each link is sat in as I want to change the background colour on the a:hover state.

Any ideas???

Ta

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangFeb 18.2009 — Add a space character(&#38;#32; ) either side of the hyphen.
Copy linkTweet thisAlerts:
@cannon303authorFeb 19.2009 — Add a space character( ) either side of the hyphen.[/QUOTE]

Hi thanks for your help but unfortunately I can't add a as the actual text links will be user generated. I have managed to 'fudge' it by adding an extra span inside the <a> tag and using position:relative and left: 10px. I say fudge it because I've read that adding extra elements to the page purely for styling purposes isn't really the 'correct' way of doing it. Also I haven't solved adding enough padding to the right hand side before the text wraps over. Doh! So I very much welcome any other suggestions. Thanks
Copy linkTweet thisAlerts:
@FangFeb 20.2009 — I can't add a as the actual text links will be user generated[/QUOTE]This indicates a server script is involved, which means the character replacement is possible.
×

Success!

Help @cannon303 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...