SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Enthusiast Mounty's Avatar
    Join Date
    Mar 2008
    Location
    UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Clearing float in IE problem

    I have a form where each label + corresponding input box are both set to 'float: left'

    Each subsequent label + input box needs to start on a new line, so to achieve this I used 'clear: left' on the label. It displays as below for FF3.5:

    Code:
    label1 input1
    label2 input2

    However the same code in IE6/7 is giving this result:

    Code:
    label1 input1 input2
    label2

    So input2 doesn't recognise the 'clear: left' info on label2, and instead floats against input1!

    Is there anyway I can make IE behave as expected? (without resorting to an empty container div?)

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    make sure that you have your html tags correctly setup, there is a bug in ie, where if you fail to close the tags it does not clear them.

    can i see the html involved?


    although it is usually done like this

    Code:
    <p><label for="text1">test</label><input name="text1" type="text"/></p>
    <p><label for="text2">test</label><input name="text2" type="text"/></p>
    this is by far simpler than anything i can think of.


    without any extra code or containers like you wanted, i can't think of a way, ie seems to mess up at every possible clear float.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I think I had this same problem sometime ago. I'll have to refer to my code when I get home. I believe I did it without having to put a block around each set.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    IE won't clear each row if you use that structure as the other float will always snag or float above. You need to arrange the two floats in a row and then set the parent to clear each row before the next set of floats start.

    The simplest way would be a structure like this:
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    ul {
        list-style:none
    }
    li {
        float:left;
        clear:both;
        width:450px;
        margin:0 0 10px;
    }
    h4 {
        float: left;
        width: 140px;
        clear: left;
        margin: 0;
        font-size: 100&#37;;
    }
    li p {
        float: right;
        width: 280px;
        clear: right;
    }
    </style>
    </head>
    <body>
    <ul>
        <li>
            <h4>Power:</h4>
            <p>34KW</p>
        </li>
        <li>
            <h4>Desk:</h4>
            <p>16 Channels / 3 Monitor mixes</p>
        </li>
        <li>
            <h4>Mics:</h4>
            <p>4 x Shure SM 58</p>
            <p>3 x Shure SM 57</p>
            <p>1 x Shure SM 52</p>
            <p>1 x Shure SM 81</p>
            <p>1 x Sennheiser E6401</p>
        </li>
    </ul>
    </body>
    </html>
    In IE when you float something left and then something right you need ot have a clearing element below each pair (or batch) or the floats will be uneven. This is best done as I have shown with the parent list creating a complete break before the next batch starts.

    Though replcae the HTML for the form equivilants .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast Mounty's Avatar
    Join Date
    Mar 2008
    Location
    UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys thanks for the replies. Trouble is, I can't be altering the markup at the moment

    Quote Originally Posted by EricWatson View Post
    I think I had this same problem sometime ago. I'll have to refer to my code when I get home. I believe I did it without having to put a block around each set.
    Really? I hope so! I've been fiddling with the styles but no luck

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mounty View Post
    Really? I hope so! I've been fiddling with the styles but no luck
    Yeah, here is how I set it up. No extra blocks needed. The code is pretty self explanatory... http://www.visibilityinherit.com/cod...m3-example.php

  7. #7
    SitePoint Enthusiast Mounty's Avatar
    Join Date
    Mar 2008
    Location
    UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hiya, thanks for your patience

    Will have a go with it tomorrow (nearly 5am here!)


    Cheers

  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    if you have a container, like a site container of a fixed width, make the label and input field float left, and then add a huge margin-right to the input fields, that should also work.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I don't float the inputs.

    However I had a similar setup with definition lists. On Paul's advice (for precisely this problem of IE not clearing floats in the same direction) I floated my dd's (parallel to the inputs here) and then hacked around IE:

    * html dd {float: none;}
    *+html dd {float: none;}

    Due to another IE bug, the dd's did what we wanted even when not floated. IE8 ignored the IE CSS while also doing what the Modern Browsers did, so it seemed ok there too.

    If you don't like scuzz in your main CSS sheet you can conditional-comment them.

  10. #10
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've done similar layouts all the time, and come across this problem, and the first step is to float the inputs as well. I don't know what other fiddling you might need to do after that, but I remember you need to do that for IE!

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    When floating them, I think it has to do with the structure of the html as well. Unfortunately, none of the old links work in this this thread (so I can't compare) but if you see Erik J's post you'll see where he addressed my question that referred to the same problem.

    http://www.sitepoint.com/forums/showthread.php?t=583032

  12. #12
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    after thinking some more, i have solved your problem to some degree

    Code CSS:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>labels and inputs</title>
    <style type="text/css">
     
    input, label {
    	float:left;
    	clear:both;
    }
     
    label {
    	margin-bottom:-100px;
    	margin-right:-100px;
    }
    input {
    	margin-left:70px;
    }
    </style>
    </head>
     
    <body>
    <label for="text1">test</label><input id="text1" name="text1" type="text"/>
    <label for="text2">test</label><input id="text2" name="text2" type="text"/>
    </body>
    </html>

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    And give the inputs a display:inline; to stpo an IE6 bug where it will double the margins.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I recommend using some additional markup to wrap form elements and labels in like <ol> or <dl>, my preference is <ol>. Just clear <li> elements.

  15. #15
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Why not seperate each "line" with a <br /> and add a clear: left to all <br />'s within the form?

    <label><input><br />
    <label><input><br />

    #myform br {
    clear: left;
    }

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    IE wno't properly clear elements whwen the next element is a float
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    .left,.left2{
        float:left;
        width:200px;
        height:200px;
        background:red;
    }
    .left2{clear:both;}
    .right{
        float:right;
        width:200px;
        height:400px;
        background:green;
        clear:both;
    }
    
    
    </style>
    </head>
    
    <body>
    <div class="left">Left</div>
    <div class="right">Right float won't clear in IE</div>
    <div class="left2">Left</div>
    </body>
    </html>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure but I think <br /> is not supposed to be inside <form> (at least semantically it doesn't make much sense to me), it may result in invalid markup under stricter specifications.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Actually <br /> should really only be used where you NEED line breaks semantically, like a poem.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Actually <br /> should really only be used where you NEED line breaks semantically, like a poem.
    Yes but I would argue it should not be used outside the <p> tag at all.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Why should it be used INSIDE the <p> tag? If you need a forced line then you should start a new <p>. To use it inside one makes you a client where you want everything perfect just like in a PSD.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the <p> tag is usually styled so that it has top margin or padding of cca 1em. So if you just start new paragraph you will get "two" line breaks. Many times you just need single line break inside the paragraph to start a new sentence on a new line.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You do realize you can modify the margins of a specific <p> element to only give you a certain amount of margin...?

    Let's weight this

    1 line of CSS vs an entire unsemantic element.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I realize that. But a line break doesn't have to be unsemantic. There are circumstances where using line breaks seems completely logical and semantic, take addresses for example. Most people expect them to be on multiple lines.

    Here is a great article about line breaks: http://www.joedolson.com/articles/20...-tag-semantic/

  24. #24
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But still I'm not encouraging use of br tags, personally I use them very rarely and you won't find a single br tag on majority of web pages I wrote.

  25. #25
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes some things make semantic sense to use the <br> element, though for normal paragraph structure you don't have to use it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •