CODEWITHSUNDEEP
htmlcsspositioning
Justin
Justin

Reputation: 6549

Anchor image and text height not correct

I am trying to create a tab with the internal text and image as a link. The problem I am facing is the anchor dimensions and/or positioning seem to be different than the image. As you can see in the jsfiddle link, there is some spacing between the bottom of the image and the bottom of my div and I can't figure out why that is there.

JSFiddle link

If you can't access that link, HTML code:

<div id="SapDataBtn">
    <a href="#">
        <img runat="server" src="http://i.cubeupload.com/Tm2tPF.png" />
    </a>
    <a href="#" id="SapBtnText">
        Data
    </a>
</div>

CSS:

#SapDataBtn {
  background-color: #c7ddf2;
  text-align: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
  width: 90px;
}
#SapDataBtn a:link,
#SapDataBtn a:visited,
#SapDataBtn a:hover,
#SapDataBtn a:active {
  font-size: 15px;
  font-weight: bold;
  color: #19456e;
  text-decoration: none;
}
#SapDataBtn img {
  border-style: none;
}

Upvotes: 0

Views: 148

Answers (3)

Pandian
Pandian

Reputation: 9126

Try like below... it will help you...

#SapDataBtn img {
  border-style: none;
  vertical-align: middle;
}

Fiddle : http://jsfiddle.net/XLeGd/1/

Upvotes: 1

Maen
Maen

Reputation: 10698

Add vertical-align:bottom; in your #SapDataBtn img, this should do the trick :)

Upvotes: 2

Imperative
Imperative

Reputation: 3183

Maybe this is what you looking for:

#SapBtnText {
    vertical-align: super;
}

Upvotes: 0

Related Questions