div backgroud-color not working in firefox

Question

Hi I'm working with divs in asp.net page. Here i want to add style to my div dynamically.

So that i'm trying to do like this

mydiv.Style.Add("background-color", "#a08b74");

it is working in IE perfectly. But not working in firefox

What is the problem

Answer 1

The problem is probably not at all that the background color is not working, but that the size of the div tag is different from what you think it is.

IE has a rendering bug that causes it to expand an element to encompass the child elements even in sitations when it should not do that. If you have only floating elements in a div, they should not affect the size of the div and the height of the div becomes zero.

Obviously you can't see the background color of an element with zero height.

To make the div get it's height from the floating elements, you can place a non-floating clearing div last in the div:

<div class="Clear"></div>

Use this style:

.Clear { clear: both; height: 0; overflow: hidden; }

(The overflow style is so that IE doesn't apply another similar bug, making the clearing div one character high eventhough you specified the height zero.)

Answer 2

The problem does indeed arise from the containing DIV element having zero height when all contained elements are floated.

Instead of inserting a clearing element, you can apply a bit of a CSS hack to the containing div itself:

create a class and apply to the div:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

This is then reusable to keep from needing to clutter up your markup.