Home/ Questions/Q 212147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T18:09:36+00:00

I’m trying to create a horizontal menu with a thick border bar that shows

  • 0

I’m trying to create a horizontal menu with a thick border bar that shows over the hovered item. However, for some reason there’s a small gap at the right end of the bar in Firefox and Chrome. Strangely, IE displays it without the gap. Firebug doesn’t show any reason for this gap.

I tried using simple divs and still it appears. I’ve distilled it down to a single HTML sample, with divs only.

Can anyone explain this and tell me how to get rid of that gap?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Weird border spacing</title>
    <style type="text/css">
    div.outer
    {
        border-top: dotted 1px lime;
        margin: 10px;
    }

    div.outer div
    {
        display: inline;
        margin: 0;
        padding: 0 12px;
        border-left: solid 1px silver;
        border-top: solid 3px red;
    }        
    </style>
</head>
<body>
    <div class="outer">
        <div>First</div>
        <div>Second</div>
        <div>Third</div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    display:inline rarely works well. Consider using float:left instead.

    • 0