CODEWITHSUNDEEP
csshyperlinkpadding
Petras
Petras

Reputation: 4779

css - Padding under background image link next to text link - why?

This CSS problem is killing me :-(

I cannot remove padding under a link in this page http://www.yart.com.au/stackoverflow/test2.htm

I have reduced the problem to the bare minimum so its really clear.

You can see my issue here http://www.yart.com.au/stackoverflow/blue.png alt text http://www.yart.com.au/stackoverflow/blue.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<style type="text/css">

*
{
  padding:0;
  margin:0;
  font:15px arial;
}

div
{
  display:inline;
  height:18px;
  line-height:18px;
  background-color :blue;
}

.PageMove
{
  display:inline-block;
  background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
  background-repeat:no-repeat;
  width:18px;
  height:18px;
  line-height:18px;
}


.Text
{
 background-color :red;
 display:inline;
 height:18px;
 line-height:18px;
}


</style>
</head>


<body>

<div><a href="#" class="PageMove"></a><a href="#" class="Text">18 pixels high</a></div>

</body>

</html>

Upvotes: 0

Views: 1767

Answers (4)

Nate Boe
Nate Boe

Reputation: 1

I ran into this issue on some email templates. IE and FF did not show the blue line but emails opened on mobile devices such as iphone and android did.

Emails opened in web email clients over chrome browsers also showed the blue line.

I solved the problem by placing the image in the middle of the cell. align="middle"

Set the cell to align="middle" as well.

(this places the blue line behind the image and solves the problem)

On irregular shaped images (that are png, or gif) you may want to consider saving the image with a background color or converting to a jpeg on white backgrounds. Again its not the type of image that solves this, just removing a clear background and creating a solid rectangle of square block of color to hide the line solves the issue.

Good luck!

Nate Boe

Upvotes: 0

Quentin
Quentin

Reputation: 944559

Things which are display: inline-block are treated as as characters and sit on the baseline. There is space beneath for descenders (which you find on letters such as p, j, g and q).

Set vertical-align: bottom to position the element on the bottom instead of the baseline.

Upvotes: 2

billyswong
billyswong

Reputation: 1202

I don't know where your problem is exactly stemmed from but

inline elements cannot be specified a 'height'. So your height:18px; for the 'inlined' div will be ignored.

Upvotes: 0

helle
helle

Reputation: 11660

why not use float?

<div style="width: give-it-a-usefull-width">
    <a href="..." id="pageMove" style="float: left;">...</a>
    <a href="..." id="text" style="flaot: left;">...</a>
</div>

Upvotes: 0

Related Questions