#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,677
    Rep Power
    171

    A problem with <ul><li>


    Hello;

    Please have a look at the un ordered list here. As you can see it looks nice and clean.

    Now in a version of IE, it looks like this.

    Here is the link, I appreciate if anyone can guide me.

    It is valid html.

    Thanks
  2. #2
  3. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,677
    Rep Power
    171
    Come on css people
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    which version of IE is showing it wrong?
    it looks fine for me in Windows IE8 in standards mode and compatibility mode.
  6. #4
  7. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,677
    Rep Power
    171
    Originally Posted by DonR
    which version of IE is showing it wrong?
    it looks fine for me in Windows IE8 in standards mode and compatibility mode.
    Hello. Internet explorer version 9. And when I click compatibility mode, it fixes it. I wonder why this happens!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    I really hate to suggest this, but, it would be easiest way to fix your issue.
    Add the following right after your <head> tag...
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
    This will force IE9 into IE8 compatibility mode and will allow it to look the way you want.
  10. #6
  11. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,677
    Rep Power
    171
    Originally Posted by DonR
    I really hate to suggest this, but, it would be easiest way to fix your issue.
    Add the following right after your <head> tag...
    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
    This will force IE9 into IE8 compatibility mode and will allow it to look the way you want.
    Thank you for the reply. Is this the proper of doing it? Sounds a bit strange.
    Thanks
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Bah. I was hoping you'd figure out what was happening, Don.

    It's a change in float handling in IE9 and Opera 11.6x+. One solution is to give the list "overflow:hidden" and left padding so the markers don't overflow and thus be visible. It may be desirable to reduce or remove the right margin on the left-floated element. Another solution is to give "list-style-position:inside" to the list.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,677
    Rep Power
    171
    Originally Posted by Kravvitz
    give "list-style-position:inside" to the list.
    This did it, problem fixed! But still IE insists to make it look bad! I don't know what to say!
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Yeah, I don't like the look of "list-style-position:inside" when text wraps either. There's actually a third possible solution: give the list "margin-left:510px" and "padding-left:30px".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,677
    Rep Power
    171
    Originally Posted by Kravvitz
    Yeah, I don't like the look of "list-style-position:inside" when text wraps either. There's actually a third possible solution: give the list "margin-left:510px" and "padding-left:30px".
    Thanks Kravvitz
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    875
    Rep Power
    275
    Originally Posted by Kravvitz
    Bah. I was hoping you'd figure out what was happening, Don.
    lol, actually, so was I, but, everything I was trying seemed to break the layout when viewing back in IE8 compatibility mode.

    thats why I mentioned "hating to suggest" my way of fixing it...it just seemed to me to be simplest way to "fix" the issue without breaking it at the same time.
    I still have ALOT to learn about CSS..especially when it comes to IE browsers.
  22. #12
  23. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,677
    Rep Power
    171
    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo