Thanks to everyone in advnce. This works in ff but not in ie. Please let me know what im doing wrong. I want this code to display fieldset elements without a class to the full width of the div, which firefox and ie both do. Elements with class left of right should float left or right while observing the clear both of non class fieldset elements. IE doesn't maintain the clear both property of the non class fieldset, why is this, and can you suggest any clean work arounds. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title</title> <style type="text/css"> div.main { width: 850px; margin-left: auto; margin-right: auto; } fieldset { float: left; clear: both; width: 100%; margin: 0 0 1.5em 0; padding: 0; border: 1px solid #BFBAB0; background-color: #F2EFE9; } fieldset.leftFieldset, fieldset.rightFieldset{ width: 420px; } fieldset.leftFieldset { clear: left; } fieldset.rightFieldset{ float: right; clear: right; } </style> </head> <body> <div class="main"> <fieldset> </fieldset> <fieldset class="leftFieldset"> </fieldset> <fieldset class="rightFieldset"> </fieldset> <fieldset class="leftFieldset"> </fieldset> </div> </body> </html> HTML:
Not tested. Remove the first line (xml declaration), as it throws IE6 into quirks mode, where it follows its own non-standard rules. If that doesn't fix things, let us know. cheers, gary
Hi Gary, Thanks for the reply, I have tried removing the xml dec but this doesn't solve my problem. It does cause more ie strangeness as the auto margin widths don't seem to work in ie7 after removing the xml. My main problem though is fixing the box model clear and float properties which both work correctly in FF. Cheers
The xml declaration makes no difference in IE7, but you cannot have it if you want IE6 to have any chance of rendering properly. Remove the float and width properties from fieldset. Add the float property to .leftFieldset. Always use some representative content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org" /> <title>Title</title> <style type="text/css"> /*<![CDATA[*/ form.main { width: 850px; margin-left: auto; margin-right: auto; } fieldset { margin: 0 0 1.5em 0; padding: 0; border: 1px solid #BFBAB0; background-color: #F2EFE9; } fieldset.leftFieldset, fieldset.rightFieldset{ width: 420px; } fieldset.leftFieldset { float: left; clear: left; } fieldset.rightFieldset{ float: right; clear: right; } /*]]>*/ </style> </head> <body> <form action="#" method="get" class="main"> <fieldset> <legend>fieldset one</legend> <label for= "one">label: <input type="text" id="one" name="one" /></label> </fieldset> <fieldset class="leftFieldset"> <legend>fieldset two</legend> <label for= "two">label: <input type="text" id="two" name="two" /></label> </fieldset> <fieldset class="rightFieldset"> <legend>fieldset three</legend> <label for= "three">label: <input type="text" id="three" name="three" /></label> </fieldset> <fieldset class="leftFieldset"> <legend>fieldset four</legend> <label for= "four">label: <input type="text" id="four" name="four" /></label> </fieldset> </form> </body> </html> Code (markup): cheers, gary