CODEWITHSUNDEEP
cssinternet-explorerhtmlheight
laurent
laurent

Reputation: 90756

How to create a 1px height div in IE8

I have the following code to create a 1px height line:

<div style="width:300px; height:1px; background-color:#ff3300; margin-top: -1px;"></div> <!-- top red line -->

The code works fine in Firefox, however in IE8, it is displayed as a 10px height line or so. How can I force IE to take into account the specified height?

Edit:

Why is IE ignoring all my CSS rules?

Upvotes: 2

Views: 5759

Answers (5)

Technology
Technology

Reputation: 11

@Laurent, if you are still unable to get the desired 1px div, despite of using height:1px; line-height:1px; font: normal 1px/1px arial; you might require to check your DTD (Document Type Definition) at the top of your webpage code. You can try this:

<!DOCTYPE HTML>
<html>
...
</html>

Upvotes: 1

anglimasS
anglimasS

Reputation: 1344

My suggestion: This is browser scroll bar problem. Just you put body{ margin:0; padding:0;} you can't see line in all browser.

IE7 scroll bar top arrow putting down that line.

Upvotes: 0

Zhenya
Zhenya

Reputation: 220

It's really hard to tell without the context... aside from resetting the padding to 0 it could have to do with other elements (probably above). Especially if they're floated. May also try clear:both; Also make sure it doesn't have display:inline; anywhere... It's block by default, and should be block.

It's really poking in the dark without the context.

Upvotes: 0

Māris Kiseļovs
Māris Kiseļovs

Reputation: 17285

Just set font-size to 1px; IE is limiting height of this div to font size.

Upvotes: 9

sqwk
sqwk

Reputation: 1596

Set line-height and font-size to 1px.

Upvotes: 0

Related Questions