CSS DIV默认宽度在IE中看起来不错。 不是Firefox

Question

I've set up an example of what I'm running into here: http://studiozion.com/cssproblem/fix_it.htm .

Relevant code blocks...

 <style type="text/css"> body { background: transparent url(Grade300_Color1.png) repeat-x } .RowMaker { overflow: auto; } .ColumnMaker { float: left; } .ColumnMaker2 { float: right; } .PadTop { padding-top: 10px; } .PadBot { padding-bottom: 10px; } .PadLeft { padding-left: 15px; } .PadRight { padding-right: 15px; } .ControlCurve1 { height: 6px; background: transparent url(ControlCurve1.png) no-repeat right -6px } .ControlCurveRight1 { height: 6px; width: 6px; background: transparent url(ControlCurve1.png) no-repeat top left } .ControlCurveLeft1 { height: 6px; width: 6px; background: transparent url(ControlCurve1.png) no-repeat bottom left } </style> 

 <div class="RowMaker"> <div class="ColumnMaker ControlCurveLeft1"><span></span></div> <div class="ColumnMaker ControlCurve1"> <div class="RowMaker"> <div class="ColumnMaker2 ControlCurveRight1"><span></span></div> </div> </div> </div> 

So the issue is that the div with class "ColumnMaker ControlCurve1" will expand to fill the width of parent container with class "RowMaker" in IE creating a nice little beveled cap for a div. But in Firefox the "ColumnMaker ControlCurve1" div truncates causing the right side of the beveled cap to be left aligned.

So who is right? And more importantly how do I go about fixing this while retaining the flexibilty of a visual element that expands to it's parent container? I really don't want to set a hard width on "ColumnMaker Control1".

Answer 1

firefox is always the right one (j/k)

this problem has been solved many times before. may i suggest a quick search to find things like

http://redmelon.net/tstme/4corners/

http://kalsey.com/blog/2003/07/rounded_corners_in_css/

there is also a jquery solution

http://www.malsup.com/jquery/corner/

Answer 2

you need to clear your floats. in your stylesheet, include the following code for the CONTAINER that has floats in it:

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

you can also (and should also) clear your floats for IE by putting min-height: 10px; in your #yourContainer style definition.

It's also possible that because you have no content and have not set a width, the div will not stretch to anything.

Just some thoughts looking at it without really testing.