IE extra space above inline-block/text-top (transitional doctype)

2.9k Views Asked by Number47 At 14 April 2025 at 01:09

I get an extra space above the below textarea, but only in ie. How to fix it?

<div class="field">
    <label>Info</label><textarea cols="40" rows="4"></textarea>
</div>


.field {
     margin: 0px;
     margin-top: 2px;
}

label {
     display: inline-block;
     width: 5em;
     margin-right: 0.5em;
}

textarea {
     display: inline-block;
     width: 22em;
     vertical-align: text-top;
}

If I put a whitespace between label and textarea tags the space disappears. But then I get a horizontal extra space between them.

Edit: I found, the problem appears with doctype - transitional. With strict everithing is ok. Is there a way, to fix it with transtional?

Original Q&A

There are 1 best solutions below

thirtydot On 09 April 2011 at 12:33

I can reproduce your issue. See the end of my answer for exact details.

You can remove the gap by:

Changing vertical-align: text-top to vertical-align: top.

Unless you desperately need text-top for some reason (why?), this is an easy remedy.

I'm not sure why text-top adds the extra space at the top with the Transitional doctype.

Testing in IE8, with this code (XHTML 1.0 Transitional), your described issue happens:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.field {
     margin: 0px;
     margin-top: 2px;
     background: #ccc
}

label {
     display: inline-block;
     width: 5em;
     margin-right: 0.5em;
}

textarea {
     display: inline-block;
     width: 22em;
     vertical-align: text-top;
}
</style>
</head>

<body>

<div class="field">
    <label>Info</label><textarea cols="40" rows="4"></textarea>
</div>

</body>
</html>

If I change the first line to this (XHTML 1.0 Strict), it doesn't happen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

IE extra space above inline-block/text-top (transitional doctype)

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in INTERNET-EXPLORER

Related Questions in XHTML-TRANSITIONAL

Trending Questions

Popular # Hahtags

Popular Questions