/    Sign up×
Community /Pin to ProfileBookmark

anchor text

Copy linkTweet thisAlerts:
Apr 18.2010

please look at this link

sudhakargolakaram.co.in/files/link.html

1.
a simple question, i need to use a link which has a background image and the text for the link needs to be actual text and not part of the image

i have used
#div1 a{
background: url(darkblue_rounded1.jpg) no-repeat top left;
display: block;
width: 135px;
height: 45px;
padding: 20px 0px 0px 20px;
}

my question is though i have written the actual text for anchor it looks as if the text is part of the image and the text cannot be selected

when an image is used as a background for a link with text as actual text as i have done in this case, does the text appear as if it is part of the image and not be selectable

2.
also when a link is created by default an underline appears, i want the underline to appears slightly below the default location so i applied padding bottom to the a tag however that did not work, so i tried

a{
text-decoration: none;
border-bottom: 1px solid #000;
padding-bottom: 5px;
}
and this works as i have mentioned in the link above only in ie the border line does not appear i have used !important for ie how do i fix this for ie

please advice

thanks

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@mavigozlerApr 18.2010 — 
  • 1. I noticed that you have set up the anchor element as a block style. Perhaps that is creating unwanted effects that you are seeing. Why not instead keep the anchor as its default 'inline' (no need to specify) but instead trying to extend the margins on all four side around it to create a "padding" effect that you want. Perhaps that retains the "highlightability" or selectability of text? You also set the height and width of the block, which can be done for block elements, probably not for inline (so specifying those will be superfluous if you go back to inline with margins. As for margins, consider using 'em' or '%' CSS lengths rather than 'px'.


  • 2. I don't think the underline is automatic except in the default stylesheet of the browser. You specify instead what you want for visited or hovered anchors without assuming a style on everyone's browser. If they have a user override, then there's nothing you can do, but don't assume. As for where the underlining occurs, you might play with 'line-height' property a bit, although that adjusts top and bottom. Other selector properties may not be part of the CSS standard. Of course, keep your kludge there and wrap it in IE conditional HTML commenting in case what works in FF/Opera/other generally standards-compliant browsers does not work in IE.
    • ×

    Success!

    Help @sudhakararaog 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.20,
    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: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

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