/    Sign up×
Community /Pin to ProfileBookmark

Why is not working IE with borders in link?

Copy linkTweet thisAlerts:
Nov 21.2008

I have tested many times and still do not know what is wrong with
.footer_container1 a, .footer_container1 a:visited
.footer_container1 a:hover

I have code like sample:

[code=html]

#footer_container1 li a, #footer_container1 a:visited {
padding : 1px 1px;
color : #ffffff;
border-bottom : 1px solid #ffffff;
text-decoration : none;
}
div#footer1 li a:hover {
padding : 1px 1px;
color : #f47123;
border-bottom : 1px solid #f47123;
text-decoration : none;
}

[/code]

In Mozilla it works, but it seems that IE text-decoration : none;will be priority and it will go over border-bottom : 1px solid #f47123. Mozilla detects correctly border-bottom : 1px solid #f47123 and does not show underline from text-decoration : underline;

But if I put text-decoration : none; it will in IE not show even border-bottom : 1px solid #f47123;.

Need help.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JickNov 24.2008 — There seems to be a difference between your normal link state style and your hover state style...

Give this a try:[CODE]#footer_container1 li a:link, #footer_container1 li a:visited {
color: #fff;
border-bottom: 1px solid #fff;
text-decoration: none;
}

#footer_container1 li a:hover {
color: #f47123;
border-bottom-color: #f47123;
}[/CODE]From what I can remember, IE has issues with just specifying [I]a[/I] rather than [I]a:link[/I].

I also cleaned up your code a bit...[LIST=1]
  • [*]You do not need to re-specify styles for different link states if they are the same as the default state.
  • [*]When you're just changing the color of the border and nothing else you can just use [I]border-*-color[/I] like I have in the updated code above.
  • [*]I removed the [I]padding: 1px 1px;[/I] part because it will have no effect because [I]<a>[/I] elements are inline and inline elements cannot have padding.
    • [/LIST]



    I hope this helps. Let me know...
    Copy linkTweet thisAlerts:
    @toplisekauthorNov 28.2008 — Hi,

    in your sample in IE is the same result.

    Strange also that underline in LI tags will be all the time white when mouse is over link.

    Regards
    Copy linkTweet thisAlerts:
    @JickNov 29.2008 — Have you tried something like this:[CODE]#footer_container1 li a {
    color: #fff;
    border-bottom: 1px solid #fff;
    text-decoration: none;
    }

    #footer_container1 li a:hover {
    color: #f47123;
    border-bottom-color: #f47123;
    }[/CODE]    I'm not really sure why this wouldn't work...

    If that doesn't work either though, maybe you could explain a bit more what exactly is going on.
    ×

    Success!

    Help @toplisek 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 6.16,
    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: @nearjob,
    tipped: article
    amount: 1000 SATS,

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

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