a href ruins div button gives random border

Question

I added a CSS button like this: http://pastebin.com/UZCgmqSN Why can't I use simple HTML code?..

The link href gives the button a blue border + text color, and whenever I removed <A> from it, it still stays the same.

I want the whole button to be one link, not like you need to hover on the text to go to that link.

Basically I don't want the a style affect my button(s).

solution could be: disable Link styling on specify divs thank you.

I see a div inside a link (invalid in HTML4) but no buttons. — j08691, Aug 17 '12 at 20:37
You have to post your CSS too. And post both the HTML and CSS on the question body, not on pastebin. It would be nice if you could work on your explanation. E.g., it's not clear what you're calling a "button". Is it the div? The anchor? The combination of both? — bfavaretto, Aug 17 '12 at 20:39
please don't downvote the question just because the user have inferior knowledge. can anyone told him that he can't use Block tags inside a link? — Ghassan Elias, Aug 17 '12 at 20:42
Looks like a duplicate of http://stackoverflow.com/questions/796087/make-a-div-into-a-link which has a pretty good answer. As Gustonez said, its generally considered bad practice to put a block tag inside of a link tag. — renab, Aug 17 '12 at 20:45

kumarharsh · Answer 1 · 2012-08-18T12:09:15.690

2

Add a padding to the this will make the area around the text also clickable. Also, apply the following style:

a {
    text-decoration:none;
}
a div {
    background:#444;
    color:#fff;
    border:1px solid #333;   
    text-align:center;
    padding:5px;
    width:100px;
}

This should do it.

check this out : http://jsfiddle.net/yFZ4y/

EDIT : Using a div or ANY block level element inside an INLINE element (like a) is bad practice. Please use a span instead.

edited Aug 18 '12 at 12:09

answered Aug 17 '12 at 20:39

kumarharsh

18,961
8
72
100

yes, agreed! but this example was a "direct" response to his question, in which a
is inside an element. although, i agree, it is a bad practice. PS: Updated my answer to reflect so.
– kumarharsh Aug 18 '12 at 12:06

score 1 · Answer 2 · answered Aug 17 '12 at 20:40

here is an example of a link/button http://jsfiddle.net/CRjrz/

<div>
    <a href="#">link text</a>
</div>

a
{
    display: block;
    width: 100px;
    height: 35px;
    text-decoration: none;
    color: black;
    text-align: center;
    line-height: 35px;
}
div
{
    border: solid 1px black;
    width: 100px;
    height: 35px;
}

a href ruins div button gives random border

2 Answers2