Home/ Questions/Q 8590617
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T23:20:06+00:00

I am having trouble with a link that, when floating to the right, gets

  • 0

I am having trouble with a link that, when floating to the right, gets another height than links that do not float to the right. Here is the minimum code to produce it:

<!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 runat="server">
    <title></title>
    <style>
        body {font: normal 12px/1.6 Arial; }
        .btn {background-color: Red; color:#000; padding: 5px 15px 5px 15px; }
    </style>
</head>
<body>
    <div>
        <a class="btn" href="#">Nice link</a>
        <a class="btn" style="float: right;" href="#">Bad link</a>
    </div>
</body>
</html>

This is the result. The "Bad link" is higher then the "Nice link".

If I remove “Arial” from the body style it looks ok. But I of course need the font styling.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Padding only works on block elements and i guess the bad link acts like a block because of the float, add display:block to the .btn and float the nice link to the left

    http://jsfiddle.net/4Qs5J/

    • 0