CODEWITHSUNDEEP
htmlcss
user169867
user169867

Reputation: 5870

CSS height problem. IE8 seems correct Firefox seems wrong. Any fix?

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>

Upvotes: 0

Views: 923

Answers (2)

Tesserex
Tesserex

Reputation: 17314

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.

Upvotes: 2

Levi Hackwith
Levi Hackwith

Reputation: 9332

Have you tried using CSS conditionals? http://www.quirksmode.org/css/condcom.html I know you said you want to use the same CSS for both, but this might solve the problem faster. Just do one set of CSS for IE and one for everyone else. If that doesn't work, let me know. I'll dig deeper and see if I can find a universal solution.

Upvotes: 0

Related Questions