SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 32 of 32
  1. #26
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look at Sitepoint's very own article on how to markup and style forms. I've used this for my site, and I've not had problems getting elements to clear properly on IE.

  2. #27
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    if you read the messages that the OriginalPoster said:
    Quote Originally Posted by Mounty View Post
    Hi guys thanks for the replies. Trouble is, I can't be altering the markup at the moment

    its that he has no access to modify the HTML, so he has to do it somehow with css only, thats why i offered my solution, and it might seem a little weird.

  3. #28
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I'm a bit late on this, but...

    If you can't change the HTML, I'd try floating just the label. It will push the INPUT element to the right no matter if the INPUT is floated or not.

    After thatmaybe , the "clear" CSS property works as expected.

  4. #29
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nachenko View Post
    Maybe I'm a bit late on this, but...

    If you can't change the HTML, I'd try floating just the label. It will push the INPUT element to the right no matter if the INPUT is floated or not.

    After thatmaybe , the "clear" CSS property works as expected.
    no, in the first post he says thats what he did and IE5-7 was misbehaving.

  5. #30
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Huh?
    I have a form where each label + corresponding input box are both set to 'float: left'
    They are both floated, and because the following label is also float: left, its "clear: left" is ignored by IE only. All IE's except 8.

    The advantage to Yuri's margins is, it may make the input wide enough that the following label is simply forced to stay below due to there not being enough room for it to sit alongside as the OP's original labels were doing:
    label1 input1 label2
    input2

    Although in any complicated form, without true clearing you get problems whenever labels with any meat appear. If the inputs aren't floated and they aren't inside a block container together with the label, then a "tall" label (multiline) will cause the next label's input to ride up:

    label1 is rilly input1
    rilly long and
    makes 2 lines input2
    or 3 lines...

    label 2 input3

    they stop lining up.

    I use my block containers to stop the riding up.

    Of course the OP never posted any HTML code so we can only speculate on what he has to work with.

  6. #31
    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)
    Plus I doubt he is coming back..I posted the soltuion to this problem twice so hopefully he does come back.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #32
    SitePoint Enthusiast Mounty's Avatar
    Join Date
    Mar 2008
    Location
    UK
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured you guys were enjoying a debate! Wasn't expecting over 800 hits though


    But I sorted it with the negative margins Thanks for your help


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
  •