CODEWITHSUNDEEP
internet-explorergoogle-chromehtml
Adrian
Adrian

Reputation: 20068

Div tag behaves differently on Internet Explorer

I am trying to represent a line inside html. For this I am using this code:

<div class="blue_bar" style="margin-top: 10px;"></div>

In the CSS I have define this:

.blue_bar
{
    height: 5px;
    BACKGROUND-COLOR: rgb(0,0,136);
    margin-top: 10px
}

Now, this works good on Google Chrome, but on IE it shows the line different. I have attached two pictures with the results:

Chrome:
enter image description here

IE:
enter image description here

Is there a way I can fix the line on IE to look like the one on Chrome ?

edit: This problem occurs when using IE9, it works ok for IE10.

Upvotes: 1

Views: 292

Answers (1)

vogomatix
vogomatix

Reputation: 5041

Add a font-size: 0; attribute. Its an IE9 (and lower) bug that doesn't let you have DIV elements smaller than the font size.

<html>
<head>
<style>
.blue_bar
{
    height: 5px;
    background-color: rgb(0,0,136);
    margin-top: 10px;
    font-size: 0;
}
</style>
</head>
<body>
<div class="blue_bar" style="margin-top: 10px;"></div>

</body>
</html>

UPDATE: Revised this answer to work in IE9

Height fix

Upvotes: 1

Related Questions