WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Float left for layout works in FF 3 but not IE?

Reply
  Thread Tools Display Modes
Old 14th May 10, 06:25 PM   #1
mysterd429
WLC Member
 
Join Date: May 2010
Posts: 5
Default Float left for layout works in FF 3 but not IE?

Hi all,

I'm trying to write semantically meaningful HTML without using tables for layout when the thing I'm laying out isn't tabular.

I've got this code:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            fieldset div label.FirstRow {
	            clear: both;
            }
 
            fieldset div label {
	            display:block;
	            float:left;
	            padding-right:1em;
	            text-align:right;
	            width:100px;
            }
 
            fieldset div input {
	            display:block;
	            float:left;
	            width:100px;
            }
 
            fieldset input, fieldset label {
	            margin-top: 1em;
            }
        </style>
        <title>Test</title>
    </head>
    <body>
	    <fieldset>
	        <legend>Fields</legend>
	        <div>
	            <label class="FirstRow" for="Field1Input">Field 1:</label>
	            <input id="Field1Input" type="text" name="field1" />
	            <label class="FirstRow" for="Field2Input">Field 2:</label>
	            <input id="Field2Input" type="text" name="field2" />
	        </div>
	    </fieldset>
    </body>
</html>
I find in FF, I get the correct results. In IE6, the fields show up in the wrong order.

Thanks!
mysterd429 is offline   Reply With Quote
Old 14th May 10, 10:04 PM   #2
spotya
WLC Member
 
Join Date: May 2010
Posts: 11
Default Re: Float left for layout works in FF 3 but not IE?

can you provide a test link so we can see how the order is rendering?
spotya is offline   Reply With Quote
Old 17th May 10, 04:08 PM   #3
mysterd429
WLC Member
 
Join Date: May 2010
Posts: 5
Default Re: Float left for layout works in FF 3 but not IE?

Sure. I wasn't sure that I'd be able to, but it seems that I can!

http://mysbfiles.stonybrook.edu/~dla...floatleft.html

It looks the way I want in Firefox 3.6.3 on my Windows 7 box, but doesn't work properly in IETester as IE6 Mode or IE7 Mode, nor does it work in IE8 in IE7 Mode.

Thanks for your help!
__________________
----
Don
mysterd429 is offline   Reply With Quote
Old 27th May 10, 02:49 PM   #4
mysterd429
WLC Member
 
Join Date: May 2010
Posts: 5
Default Re: Float left for layout works in FF 3 but not IE?

Sorry for the bump, but I'd really like an answer to this so I can avoid a table-based layout. I've put up a slightly different example. Example.

Cheers!
__________________
----
Don
mysterd429 is offline   Reply With Quote
Old 28th May 10, 09:46 AM   #5
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Float left for layout works in FF 3 but not IE?

It appears that your "FirstRow" class rules for "clear" are being over-ruled/ignored by the later generic rules for the same element (no surprise there for IE then)

Put "FirstRow" AFTER the generic rules in the style sheet to see if that fixes it.
chrishirst is offline   Reply With Quote
Old 28th May 10, 02:17 PM   #6
mysterd429
WLC Member
 
Join Date: May 2010
Posts: 5
Default Re: Float left for layout works in FF 3 but not IE?

Your comment about clearing got me thinking about a work-around. Well, I found that I was able to work around the issue by simply putting each row of elements in its own div. I don't like filling my pages with meaningless tags, but I suppose that's how it goes until the world moves away from Ye Olde IE.

First Example
Second Example

Thanks so much for your help!
__________________
----
Don
mysterd429 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:34 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.