#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Australia
    Posts
    134
    Rep Power
    0

    IE Float Rendering Issue


    Hey all,

    I am just starting to develop a new site for my web design company, though i'm doing it in mac os x env using camino, so to my horror, when i finally got around to checking it in IE, I discovered that everything was horribly wrong. All of the div's that were supposed to be floated left are now overlapping the right float. I've read a few articles which all suggest different things, i.e. putting 'display: inline' in all the float styles. That didn't work.

    I don't have the time to figure it all out though I'm sure it's a simpleish solution. I'd really appreciate the help.


    Pete
    Last edited by petehayes; May 5th, 2007 at 07:45 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2006
    Posts
    160
    Rep Power
    38
    You should add a doctype, validate your code and add left:0; in #columnLeft
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Australia
    Posts
    134
    Rep Power
    0
    Thanks mate. Looks presentable now!

    Pete.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Australia
    Posts
    134
    Rep Power
    0
    Ok, so I added a doctype, validated my code and changed the css accordingly, but I am still having a few teething problems. My main concern was the left column not floating properly and fortunately that's fixed, though I still don't know why the navigation bar has a massive gap between the top of it and the bottom of the header. It looks fine in other browsers. I could alternate stylesheets based on which browser the script detects, though it's so unreliable I wouldn't trust it!!

    Any suggestions as to how I can tame IE?

    Pete.
    Last edited by petehayes; May 7th, 2007 at 08:30 AM.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    These explain how to remove the gap:
    That mysterious gap under images and embedded objects
    Images, Tables, and Mysterious Gaps

    I would like to encourage you to not stop there in improving your code.

    I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML.

    These three articles explain how to style lists.
    http://www.alistapart.com/articles/taminglists/
    http://css.maxdesign.com.au/listutorial/
    http://www.webreference.com/programming/css_lists/

    It's best to avoid using inline event handlers. I suggest you read up on Unobtrusive JavaScript and other JavaScript Best Practices.

    I could alternate stylesheets based on which browser the script detects, though it's so unreliable I wouldn't trust it!!
    Yeah, there are a lot of problems inherent to that.
    Last edited by Kravvitz; May 6th, 2007 at 08:31 PM.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Australia
    Posts
    134
    Rep Power
    0
    Cheers for that. You've bailed me out a few times now!!!

    Pete

IMN logo majestic logo threadwatch logo seochat tools logo