1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why do my floats look bad in IE?

Discussion in 'CSS' started by zhouhana, Jan 9, 2012.

  1. #1
    Hey guys,

    I'm slowly learning how floats work, but am not quite there yet. Could you please help me get a header right? It looks the way I want it to in the latest Firefox, but not in IE7 or 8. It's for a school assignment, so I'll be happy if you just explain the problem and what I should think about in this case rather than serve me a finished code solution. I have checked that everything is validating fine.

    A screenshot of the proper Firefox design: http://homeweb.mah.se/~m11K5727/css/ff.png
    A screenshot of the IE mess: http://homeweb.mah.se/~m11K5727/css/ie.png

    The page online: http://homeweb.mah.se/~m11K5727/css/index.htm
    Its CSS: http://homeweb.mah.se/~m11K5727/css/main.css

    (Sorry, I can't use live links as a new member.)

    Thanks in advance.

    Johanna
     
    Solved! View solution.
    zhouhana, Jan 9, 2012 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    I don't see anything different.
     
    drhowarddrfine, Jan 9, 2012 IP
  3. zhouhana

    zhouhana Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You don't? I see the difference in IE, and the screenshots I linked to show the difference. And My teacher won't approve it the way it is now.
     
    zhouhana, Jan 9, 2012 IP
  4. zhouhana

    zhouhana Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    So you know what to look for: It's the form fields in the header that line up on one line i IE. Everything else looks more or less the same in FF and IE; it's just the form fields in the header that are the problem.
     
    zhouhana, Jan 9, 2012 IP
  5. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #5
    I see absolutely no difference at all. Identical.
     
    drhowarddrfine, Jan 9, 2012 IP
  6. zhouhana

    zhouhana Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Weird. Thanks for trying to help, though.

    Here's another screenshot I took just now showing the differences in FF (top), Chrome (middle), and IE8 (bottom): http://homeweb.mah.se/~m11K5727/css/differences.png

    I'm on a Mac using Parallells to run IE, but I also tested it in IE on a Windows machine with the same result.

    Maybe someone else could take a look at it? I'd be very grateful!
     
    zhouhana, Jan 9, 2012 IP
  7. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #7
    By giving it a quick look, I would say it's a positioning problem. As you see, it floats one onto another like absolute divs in relative parent containers. Try to change the positions of the divs in questions, as well as their margins and paddings. You'll find a solution ;)
     
    wiicker95, Jan 11, 2012 IP
  8. JamesD31

    JamesD31 Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #8
    1) Float the logo first, as it is bigger (so than the other right side WILL stack. Note that If you have enough 'space' for a float to land next to something, it will, so maybe adding padding to the labels for the login is necessary to have them on separate rows.

    2) The same goes for the navigation, padd that, or give it a width (100% or auto) in order to allow it to take up the whole space and not be able to shorten itself and get pushed up. That's probably why your having problems.

    Think of it like this, floats are like objects wanting to go into space, if you give them enough room, they will squeeze their way up (and to w/e direction you send them). If you dont, they get 'trapped' and can't move up like a fat person can't fit in a chair or through a door.

    Also note that when combing floats with normal elements, your normal elements don't "read" the float very well, so this causes the normal elements to slip under the floats (as if they weren't there, or are above them) which is probably really not what you want. So after a group of float elements - to save you confusion in the near future, you need to 'clear' the float elements (google will turn up tons of links).
     
    JamesD31, Jan 12, 2012 IP
  9. #9
    [h=2]Hi

    in ie6 and 7 when you float elements left and right in a widthless float then the float will (in most cases) stretch to 100% of its parent width which is why the elements are in one line in ie7 and under.

    If you first float right and then only float left inside the float then it does not stretch but can be awkward to make the design behave like you want. Therefore the simplest anser os to giv ethe parent float a width that will accommodate its child floats nicely.

    in your case we can float the p element instead and give it a width.

    #newsletterbox p{float:left;clear:left;width:25em}


    You can either give that to ie7 and under only but it should actually help all browsers get straight.

    Note that Conditional comments are html and must go in the head of the document and not in the stylesheet.


    <!--[if lt IE 8]>
    <style type="text/css">
    div#buttonsmenu {
    zoom: 1; /* Causes element to have layout. For clearing to work. */
    }
    </style>
    <![endif]-->
    </head>

    They are just basically normal html comments and will hide whatever is inside from other browsers just like normal html comments would.

    It's only ie that looks inside comments to find the specific ie constructs and then acts accordingly with whatever html is inside.

    Also make sure you only put css comments in your file/* */ and not // or <!-- -->.

    Lastly there is no need to qualify every rule with the type selector e.g. don't do this "div#buttonsmenu".

    It makes the css more bloated and actually harder to read as everything begins with div. IDs are unique anyway so why make the browser find the element and then go find it again to see if its a div. Only qualify rules when you need to know what they are and things like ul#nav are occasionally useful because they let you know that it's a ul and not a div.
    [/h]
     
    cashcars, Jan 13, 2012 IP
  10. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #10
    I still don't see any difference between the pages at all.
     
    drhowarddrfine, Jan 13, 2012 IP
  11. Irfi0009

    Irfi0009 Banned

    Messages:
    17,584
    Likes Received:
    33
    Best Answers:
    1
    Trophy Points:
    48
    #11
    Identically. I see absolutely no difference.................
     
    Irfi0009, Jan 19, 2012 IP
  12. zhouhana

    zhouhana Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Sorry, I thought I had already posted a thanks notice here, but apparently not. I worked it out with the excellent advice I received from several posters above. Thanks for all your help!
     
    zhouhana, Jan 20, 2012 IP
  13. johncandy

    johncandy Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    u should not disappoint u will make it good .you should carry on
     
    johncandy, Feb 5, 2012 IP
  14. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #14
    I think it's a positioning problem.
     
    drhowarddrfine, Feb 6, 2012 IP
  15. J.L.B

    J.L.B Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    I also think it's a positioning problem. I have similar issues where it looks okay in either Google Chrome and I.E. and slightly different in FireFox. I like to test in at least those three browsers. Sometimes, all you need to do is trying by trial and error.
     
    J.L.B, Feb 9, 2012 IP
  16. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #16
    I think it's a floating problem.
     
    drhowarddrfine, Feb 10, 2012 IP
  17. electronicsdepot

    electronicsdepot Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    why not just use firefox?
     
    electronicsdepot, Feb 10, 2012 IP
  18. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #18
    I think Firefox is the best browser.
     
    drhowarddrfine, Feb 10, 2012 IP