Home/ Questions/Q 694557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T02:52:08+00:00

Below is a complete html page that shows the problem. The myDiv should be

  • 0

Below is a complete html page that shows the problem.

The “myDiv” should be 22px in height (including the border). Item 1 should have a 1px space between its border and the “myDivs” border. In IE8 it is.

In FF 3.6.2 though it is 24px and I can’t understand why. Ultimately my goal is to get the same CSS to create the same result in both browsers.

It’s driving me crazy! Any help would be appreciated 🙂

<!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>
        <title></title>
        <style type="text/css">
            div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; }
            div.aclb:hover {border:#3399FF 1px solid;}
            div.aclb.focus {background:#FFF; border:#3399FF 1px solid;}
            div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; }
            div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0;}
            div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;}
            div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;}
            div.aclb li.input {}

            div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}
            div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}

            div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center;  line-height:10px;}
            div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;}
            div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;}
        </style>
    </head>
    <body>

    <div id="myDiv" style="width:250px" class="aclb">
        <ul>
            <li class="block">
                <a class="d">x</a><span>Item 1</span>
            </li>
            <li class="input">
                <input type="text" style="width:30px" maxlength="30"/>
            </li>
        </ul>
    </div>

    </body>

    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I just checked in firefox, it seemed, thanks to firebug, that the problem is just with the li.input. It’s too tall, probably because of browser defaults, and pushes the container taller.

    Set div.aclb li.input to have a height of 18px or less. For me, at least, that fixes it in FF.

    • 0