SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Issues - Text paragraphs

    Hi guys! Hope all is well, I'm currently debugging a client's site for IE6/7 again, and seeing that I don't have a PC its' been a bit tricky. I've been trying to keep everything clear and easily updatable to HTML5.

    http://bit.ly/dCvSUu

    Here is the link. When I open it in IE6 via browserlab, the first paragraph looks fine, then everything else goes a bit wonky only one word per line.

    IE7 however, pushes everything to the left w/ a huge margin on the left.

    If someone could help find the issues, with the CSS that'd be great!

    Thanks! for the help again guys!
    Last edited by RSkwiat; Oct 14, 2010 at 19:13. Reason: asking for help.

  2. #2
    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)
    Hi,

    even though the container called "section" is already getting floated, they've additionally floated all the p's inside. Why?

    IE sees a float without a width and is shrink-wrapping them. Floats shrink-wrap. I don't think there are explicit rules for vendors anywhere that says where a browser must start wrapping text, so IE does it as soon as possible while other browsers don't.

    Either remove the float: left on the p's (don't see what that's doing for the author anyway... kind of dangerous to set on just "all p's on the website") OR set a width on them (of course you can't use 100% because they have side padding... you know, that could go on the box they are in instead).

    If the whole site depends on p's floating all over the site, then you'll have to do something like
    #section p {
    float: none;
    }

    or

    #section p {
    width: 375px; /*385 is the container, minus the 10px right padding on p*/
    }

    Remember IE6 has a double-margin float bug on floats in a certain direction hitting that side of their containers, if that wasn't already taken care of.

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey man! thanks for everything! Looks good now!

    I've been doing web design / development for the past 2 years, still learning the ins-and-outs, is there anything I can read in regards to all the issues with IE6/7? I keep noticing different issues with every site I do.

  4. #4
    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)
    Hm, even though it mostly targets IE6, positioniseverything.net is one place to read up on various bugs (most of them I don't actually hit though).

    Then there's haslayout: http://www.satzansatz.de/cssd/onhavinglayout.html

    and Paul's got a Floats thread in the stickies: http://www.sitepoint.com/forums/show...5&postcount=15

    and clearing them (also in IE): http://www.search-this.com/2007/09/0...ar-about-this/

    and Gary's got a page about enclosing floats (since that's also got Haslayout involved): http://gtwebdev.com/workshop/floats/...ing-floats.php

    I have a series of example pages you can look at floats and enclosing/clearing in a MOdern Browser and IE6 or 7 (I am hitting some IE6 bugs there so the demo works better in 7 lawlz).
    http://stommepoes.nl/floaties.html

    Margin collapse (again, IE does it r0nG): http://www.search-this.com/2007/05/0...ne-or-why-111/

    and this

    if the white box has Layout, you get this. If it doesn't, IE looks like moderns.


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
  •