Hi CSS girls and guys, I'm gonna ask about weird behaviour to which I could easily find remedies, but I still would like to know why those elements do not behave the way I'd expect them to do.
Please go to: http://www.giuseppecraparottacv.co.uk/html/form/competition-form.html 1) The second row of the incomplete form page is composed by two <fieldset>s whose the first has "float:left" applied. Fine, but: why the height of the whole row is determined by the <fieldset> put at the right, which is the shortest of the two? Containing the first more content, this implies that part of it is not visible because the grey bg is not extended enough towards the bottom. As you can see, I solved the issue by adding several <br />s, which is kind of crappy, I don't like that. Could please somebody explain why the height of the row is not calculated on the basis of the tallest fieldset? And how to get this result without expedients? Oh, an answer could be: is it maybe that being the non-floated fieldset the last of the html flow, the code below refers to it as starting point? Thanks! --------------------------------- 2) I've used a <div> to create the line dividing the two rows. That's the style: #divider { width:525px; height:22px; margin:0 auto; margin-top:22px; border-top:1px solid white; } Margin-height and width are both of 22px, which is intended to create the same space both above and below the white line. For love of simmetry, I would have preferred to use the same value for top and bottom margins and to specify a "0" height value. But IE6 will anyhow create a height for div#divider, can this be considered an IE6 bug? Can I solve it without specifying a 22px height for the div? Here follows the whole CSS styles: /* CSS Document */ html, body, div, span, h1, p, a, em, font, img, strong, ol, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: white; background: white; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; } img { display:block;} ol, ul { list-style: none; } /*------------------------------------------------------------------------------------------------------------*/ .appr, .nl { font-size:70%; } .nl { width:525px; margin:0 auto; margin-top:10px; line-height:1.5; text-align:justify; } #wrapper1 { width:742px; margin:0 auto; } #wrapper2 { width:572px; margin:0 auto; } form { background-color: #454545; } .left { float:left; width:276px; margin-left:22px; margin-right:105px; border-right:1px solid white; } * html .left { display:inline;} #divider { width:525px; height:22px; margin:0 auto; margin-top:22px; border-top:1px solid white; } Thanks a lot, G ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
