SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List jinxed in IE 8



    Hello from only a few days away from the world cup USA v England :-)

    Heres my problem:
    On this page in IE 8 - http://www.pauserefreshment.co.uk/la...s5-manual.html
    my lists in boxes have jinxed as in they just dont line up - see screen grab.

    How i tried to fix the problem:
    Did a HTML validation test and it came up with this cryptic message -
    Line 108, Column 16: ID "split_list" already defined
    <div id="split_list">
    I think this is telling me i can only use that id ref once but would that fix the problem?

    Would love to know if there is a css fix and why in the name of zeus but hole the list look how i want in firefox 3.5.9

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    You have IE 8 in compatibility mode...turn off compatibility mode and it will no longer be broken.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    You have IE 8 in compatibility mode...turn off compatibility mode and it will no longer be broken.
    Brilliant that fixed it!!! But how the heck did you know that????
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    The Developer tools (press F12), you can change IE 8 document mode on the fly. Also the broken page icon on the toolbar is active in your screenshot. :P
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet damnation!!!!!!!!

    opened the page on a collegues laptop in IE 7 and list is jinxed as in screen shot again. I looked to switch of compatability mode in IE 7 but no luck.

    Do I need an IE 7 fix or do i just need to switch off compatability mode in IE 7?

    Any insights welcome...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  6. #6
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK its clear the list sections on this page in IE 7 - http://www.pauserefreshment.co.uk/la...s5-manual.html
    are jinxed as the screen shot shows.

    So my question is please how do i make the list look correct as they do in firefox in IE 7 please.

    Any insights welcome...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    opened the page on a collegues laptop in IE 7 and list is jinxed as in screen shot again. I looked to switch of compatability mode in IE 7 but no luck.

    Do I need an IE 7 fix or do i just need to switch off compatability mode in IE 7?
    Other way around: IE8 is doing what the better browsers do. Putting IE8 in compat mode means "Act like you're stupid like Ie6 and 7" which it did.

    So it's not that there's a compat mode for IE7... you were just seeing "IE7" in IE8.

    So likely IE6 also looks bad right now, and since IE6 and 7 have Haslayout (which causes a lot of bugs and which IE8 no longer has), it's very likely a Haslayout issue.

    I need to stop looking at this forum on other people's computers. I don't have access to Windows right now...
    *edit I did take a quick look in the Linux browsers I have, and you do already have Haslayout triggered on the ul and the li's (they're floated)... though strangly you have list-style on the div???
    I should be able to take a look at work tomorrow... : ( in the meantime, give the div, the ul's and the li's all different ugly background colours to help see who is where.

  8. #8
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Other way around: IE8 is doing what the better browsers do. Putting IE8 in compat mode means "Act like you're stupid like Ie6 and 7" which it did.

    So it's not that there's a compat mode for IE7... you were just seeing "IE7" in IE8.

    So likely IE6 also looks bad right now, and since IE6 and 7 have Haslayout (which causes a lot of bugs and which IE8 no longer has), it's very likely a Haslayout issue.

    I need to stop looking at this forum on other people's computers. I don't have access to Windows right now...
    *edit I did take a quick look in the Linux browsers I have, and you do already have Haslayout triggered on the ul and the li's (they're floated)... though strangly you have list-style on the div???
    I should be able to take a look at work tomorrow... : ( in the meantime, give the div, the ul's and the li's all different ugly background colours to help see who is where.
    Thanks stomme - I'll colour everything first thing 2moro by 10AM uk time, thank you for taking a look...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hi, I don't even see why you need those <li> floated..try unfloating it
    Code:
    #split_list ul.list2 li{float:none}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Haha, Ryan's very correct here.

    I couldn't see the screenshot very well, I thought letters were being cut off/covered up.

    Instead, you have floats, but without stated widths (on the li's). And overflow: hidden on someone. So, the #2 item is floated, but isn't taking up ALL the room, meaning there was still some room for the #3 float to try to squeeze in there... basically, #3 is snagging on the bottom of #2 instead of just starting on a whole new line. Then there's the side padding inside that li, and the letters are gettting cut off on the right from the overflow: hidden.
    You'll see this if you add the ugly colours : )

    If you like them floated for whatever reason, you can keep that, but set a width on those li's then. Make them something less than 100% since you have sidepadding.

    If you remove the float as Ryan suggests and let them go back to being blocks, they'll be 100% wide by default and can't even try to stack up along each other.

    So, either one should fix it, and still look ok in all browsers. IE <8 has a float-ride-up bug that I get when I have floated definition lists.

    BTW, your lists have numbers as they are ordered lists (it matters what order the list items come in). Why not make those OL's and just remove the list-style so that the element you're using has better semantic meaning? You'd keep your current numbering in the content, if you want. IE has plenty of list-item bugs anyway : )

  11. #11
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much everyone who worked out this problem for me. Its now fixed :-)

    As always I am indebted to the been given a css fix. Ive applied Ryan's as it was the easiest! Stomme big thanks for the idea of ol lists, I can see the semantic advantage of that and might add if I get a spare 20 mins today (Many more manuals to add ).

    Thanks for the explanation on compatability mode in IE 8. From now on I'll make sure the compatability mode is set to IE 7 so I get an accurate picture.

    Right now onto my next manual...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the explanation on compatability mode in IE 8. From now on I'll make sure the compatability mode is set to IE 7 so I get an accurate picture.
    The compat mode thing always confuzled me.

    My recommendation: if you have a copy of IE7, use that to look at IE7 and leave IE8 as "normal" (the number of IE8 users is growing and they'll mostly not have compat mode on!).

    If you DON'T have your own copy of IE7, still keep IE8 in regular normal mode, and switch into compat mode to take a look at what it *might* be doing in IE7 (I hear it's not exact, so even if it looks ok in compat mode, a real IE7 might still show something wrong).

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zygoma View Post
    Thank you so much everyone who worked out this problem for me. Its now fixed :-)

    As always I am indebted to the been given a css fix. Ive applied Ryan's as it was the easiest! Stomme big thanks for the idea of ol lists, I can see the semantic advantage of that and might add if I get a spare 20 mins today (Many more manuals to add ).

    Thanks for the explanation on compatability mode in IE 8. From now on I'll make sure the compatability mode is set to IE 7 so I get an accurate picture.

    Right now onto my next manual...
    Glad it worked . Yer Welcome Dave

    IE8 compat mode isn't IE7 so neve trust that, worst comes to worse I'd use a browsershots of it
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •