SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28
  1. #1
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE8 Incompatible

    Hmm,
    I've just downloaded IE8 and am viewing some earlier websites on it. Seems IE8 is askew on some things that work OK in IE6,7 and all the other browsers.
    For example, this gallery of photos at http://www.ijacobs.com works well in all browsers (with a conditional comment for IE6). However, it breaks up completely in IE8.
    A conditional comment with [if ! IE8] doesn't help and putting
    Code HTML4Strict:
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    in the head doesn't work either.

    Okay, I can switch on 'Compatibility View' in the browser itself to get it to work properly, but how many viewers are going to do that? I don't have any control over that.

    So, would any of you kind people take a look at the code of the gallery set-up and see if you can help me get it right for IE8, please.

    I hope we're saying goodbye to IE6 but I hope Microsoft haven't played a cruel joke on us with IE8.

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 is surely on it's way out but from what I have heard (I do not use IE8, I use a Mac) with IE8 Microsoft seems to have gone a step back from IE7.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    The problem is
    Code:
    <!--[if IE ]>
    <style type="text/css">
    .gallery li { display: inline; }
    
    </style>
    <![endif]-->
    Remove it. Or target lesser versions of IE. OR you can just float the li's and add overflow:hidden; to the <ul>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The CC is intended for IE6, but changing it to <!--[if IE 6 ]>...... still breaks it if IE8 is not in Compatibility Mode. I'll try floating the li's, but later, got to go out. Thanks Ryan
    Last edited by ornette; Apr 7, 2009 at 02:51.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    ?? It worked for me. I targeted it for IE6 and it worked wonders for me. <_<
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Disabling "display: inline" from ".gallery li" inside the conditional comments using the developer tools fixes the issue. It is possible you are seeing a cached copy after the change.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Ya..I just downloaded IE8 to just test it (god I hate this poison) and it worked perfectly...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all you help, I'll get back to you...My wife is boiling.

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Compare what you're doing to my inline-block gallery demo. The demo works in IE 6,7, & 8; FF 2 & 3; Opera 9; Safari/Win.

    For one thing, as Ryan says, you don't want IE8 to see the {display: inline;}.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Compare what you're doing to my inline-block gallery demo. The demo works in IE 6,7, & 8; FF 2 & 3; Opera 9; Safari/Win.

    For one thing, as Ryan says, you don't want IE8 to see the {display: inline;}.

    cheers,

    gary
    It would appear IE8 has gotten it's inline-block working with both inline and block! Score one for IE8 (first test gone well )

    Off Topic:

    I like your gallery
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    It would appear IE8 has gotten it's inline-block working with both inline and block! Score one for IE8 (first test gone well )
    IE8 has a high degree of css2.1 support.

    Off Topic:

    I like your gallery
    Thanks.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Yea I'd guess it's up to FF2...or somewhere inbetween FF2/3..
    Glad IE didn't completely drop the ball with its' new release.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    According to a comparison between browsers that was linked to from another thread IE8 is now the browser that comes closest to meeting the CSS 2.1 standard as there are only a few things it doesn't fully implement whereas the latest Firefox and Opera are yet to implement a couple of the more obscure features at all.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Pretty interesting. What are the obscure areas?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Pretty interesting. What are the obscure areas?
    Not sure myself what obscure areas are but this list covers CSS 2.1: http://www.webdevout.net/browser-sup...=on&uas=CUSTOM

    However IMO, this list is incomplete because it is missing additional browsers like Safari 3.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Yea it's missing updated browser versions...thanks foor that.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right, Thanks all of you for your contributions.
    I tried the following CC after clearing the cash, but it still broke up.
    Are you sure you aren't using IE8 in "Compatibility View" Ryan?

    <!--[if lte IE 6 ]>
    <style type="text/css">
    .gallery li { display: inline; }
    </style>
    <![endif]-->

    I then took out the CC and it works fine in IE8, but IE6 and even 7 seem messed up. It seems like IE8 can read Conditional Comments, which defeats their whole object.

    logic earth:
    Disabling the display:inline from the CC removes the object of the CC, which is to make it work in IE6 (see above).

    Ryan: Floating the lis in the .gallery and adding an overflow:hidden to the .gallery ul screws up the whole thing.

    I seem to be missing something which is clear to you guys. Maybe I will have to change the whole gallery. I'll take a look at yours now gary.

    Thanks

  18. #18
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Try removing all the spacing from the conditional comment. You have: "<!--[if lte IE 6 ] >" instead use: "<!--[if lte IE 6]>"
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    We test our answers before we give them-you are screwing something up on your end.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks logic, but it doesn't change anything, presumably because Html doesn't count whitespace (I know there are cases and especially in IE6). For some reason the gallery displays fine in IE8 now, but is broken in the other IEs. I've tried to restore the original code, because I am getting really tied up.

    We test our answers before we give them-you are screwing something up on your end.
    Ryan: I hoped that my statement above i.e.
    I seem to be missing something which is clear to you guys.
    acknowledged that.

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    How about we do this
    Code:
    <style>
    .gallery li{float:left;}
    .gallery{overflow:hidden;}</style>
    Change your CSS file to be that. Remove the CC.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can fix ie7 and ie6 and get the inline block behaviour for them also if you use this code:

    Code:
    <!--[if lte IE 7]>
    <style type="text/css">
    .gallery li { display: inline;float:none;}
    </style>
    <![endif]-->
    My article here explains why. (and also as mentioned in Gary's demo link above )

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You can fix ie7 and ie6 and get the inline block behaviour for them also if you use this code:

    Code:
    <!--[if lte IE 7]>
    <style type="text/css">
    .gallery li { display: inline;float:none;}
    </style>
    <![endif]-->
    My article here explains why.
    You put what I was trying to say into code.

    He doesn't need CC's for this at all if he just updates the code as posted above by me.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ornette View Post
    Thanks logic, but it doesn't change anything, presumably because Html doesn't count whitespace
    Logic-earth was correct and if you don't get the format exactly right the CCs won't work properly. For instance if you have a space after the closing square bracket the CCs fail.
    e.g.
    Code:
    <!--[if lte IE 7 ] >

  25. #25
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks all of you who took so much time.

    I worked it out in the end and was going to put it in the thread (I didn't think anyone else would reply any more), and now I see that you guys never give up until the problem's solved.

    Of course, the logic (always easy in retrospect) is, if { display: inline; } interferes with IE8 and the CC is for IE (before IE8), then the CC has to be for all IE up to but not including IE8, i.e. IE7 and before. Hence lte IE 7.

    Hope it helps anyone who experiences a similar problem.


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
  •