SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Should I worry about IE 5.5 and IE 5

    I don't know if I should be worrying too much about how things look in these browser versions, but am wondering if there might be a simple fix.

    Please take a look at this page in any other browser, and then in either IE 5.5 or 5.

    http://www.jeremyhodge.pwp.blueyonde...k/gallery.html

    The faint stripey borders on the thumbnail images arn't showing up.

    Notice too that the thumbnails have all moved over and are not spaced correctly.

    If anyone has a solution please could you let me know, thank you.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Microsoft dropped support for IE5.5 some time ago when they stopped supporting the last of their operating systems that shipped with it. There is still a while left to go on their IE 5 support though as there is still a supported operating system that shipped with that version.

    As for whether you should bother supporting them or not, it depends on what fraction of your visitors are still using them.
    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="^$">

  3. #3
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It is completely a preference issue.

    I personally make decisions like this based on statistics at the time, as mentioned above.

    If you do not have many users viewing in IE 5, you may want to just ignore it and not support it as it is a quickly dropping population of users anyway, so the chances of your IE5 visitor rate increasing is low. On the other hand, if you happen to have a site with a even relatively decent amount of viewers running IE5, you should try to solve the issue, which we (SitePoint members) can help you do, if you make that decision.

    As for viewing the statistics of your site's viewers, you can usually find some tool in your hosting providers control panel that will provide you with this type of analysis and statistics.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin — The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit MediaZero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  4. #4
    SitePoint Evangelist ferrari_chris's Avatar
    Join Date
    Mar 2008
    Location
    NP, New Zealand
    Posts
    576
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For sites I've built, I've always considered and tested for IE 5 and 5.5, however not to a perfect level.

    The thumbnails borders you mention are a perfect example - the site still functions 100&#37; in IE 5 and 5.5, but not everything is perfect.

    As long as the site isn't completely broken in these older browsers, I'm happy. The user may not get the full "goodness" of the site, but at least they can still use it.

    So I say that as long as there are no major errors in the site, it's OK. There's no point spending hours trying to fix a feature that affects 10% of the site to 2% of the viewers.

  5. #5
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The site is up on a temporary domain at the moment so I have no statistics yet. I feel that there could be a small proportion of viewers using older browsers so would like to try and fix the problem.

    you should try to solve the issue, which we (SitePoint members) can help you do
    Please can you help?

  6. #6
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @ferrari_chris: This is a great point. When I am making an extra effort to make a site accessible, I am careful to make sure it is not broken in as many browsers as possible, ignoring small imperfections in exceedingly old browsers, for the same reasons explained. For example, I recently added a CSS drop shadow to a client site, but it would not be visible in IE6, but it was still fully functional with a normal border in IE6 so we were all able to agree with that.

    @rabbitsfeet: Surely. Though, I cannot run IE5 or 5.5 so please post a screenshot or two so that I can be of more assistance. Otherwise, its probably best someone who can view the problem helps you.
    Alex Stanford @alexstanford tumblog about.me in fb G+ K
    TechTalkin — The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit MediaZero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  7. #7
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I post a screenshot?

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

    The problem with the thumbnails in ie5.x is that you have added padding to the image and ie5.x uses the broken box model so you can't add padding to an element that has dimensions.

    Simply apply the padding and background image to the surrounding anchor instead.

    Code:
    #thumbnailsContainer img {
          /* all code removed*/
    }
    #thumbnailsContainer a{
        float:left;
            background: url(http://www.jeremyhodge.pwp.blueyonder.co.uk/images/stripes.gif);
            padding: 8px;
            margin-bottom: 25px; /* Need to work out exact margins */
            margin-right: 25px;
    }
    IE5.5 issues are 99&#37; of the time just broken box model issues and are easy to fix. Ie5 is a little more broken although it can be made usable with a little more effort.

    I very seldom have to do anything to fix ie5.5 as I build the box model hacks into my code without thinking.

  9. #9
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Despite looking better in IE 5.5 & 5, adding the alteration you posted messes up other more modern browsers.

    Do I need to add some sort of box model hack too?

    Or, how can I filter out these new rules to only apply to IE 5.5 & 5?

    Thank you for your help.

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

    The code I gave you should look identical in all modern browsers also and IIRC I checked before I gave you the code. All you are doing is replacing the padding you put on the image with the padding on the anchor instead. I'm guessing that you didn't remove the existing styles as shown in my snippet above.

    However, there may have been something else causing a problem which I missed but try it again and remember to remove the old image styles from that block as shown in my snippet.

    Meanwhile I'll have another look and see if I missed something

    We could simple give those styles to ie5 and 5.5. but it would be nicer not to have to add a hack unless absolutely necessary.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok - I can see the problem at the bottom of the page where the images overlap. I'll be back in a few minutes with a solution (hopefully)

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok, We will have to resort to a little hack to save changing the html

    Add the following code to the lte ie6 file only (the main css file remains as you had it before.):

    Code:
      <link rel="stylesheet" type="text/css" href="ie-6lte-hacks.css" media="screen" />
    Code:
    #thumbnailsContainer img {
            background: none;
            padding:0;
            margin:0;
            }
    #thumbnailsContainer a{
       display:inline-block;
       background: url(http://www.jeremyhodge.pwp.blueyonder.co.uk/images/stripes.gif);
       padding: 8px;
       margin-bottom: 25px;
       margin-right: 25px;
    }

  13. #13
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, IE 5.5 is looking much better apart from 2 of the thumbnails are shifting down on to the next line causing a gap.

    Also IE 5.0 looks awful—not sure if I should be worrying about that version though?

    Is this hack supposed to fix it in that version too?

    Thank you for all your help with this.

  14. #14
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've got it looking alright in IE 5.5 now by adding this to the IE 6 lte stylesheet:

    Code:
    #thumbnailsContainer p.goto a {
    		background: none;
    		padding: 0;
    		margin: 0 8px 0 0;
    		}
    Seems the margin was causing the problems.

    Still like to see if I can sort out IE 5 though in which it looks dreadful—or is this browser version really not worth worrying about?

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

    I don't usually bother spending too much time on ie5 a sit is well past it's sell by date.

    You can make the thumnails look better by adding this extra line in the lte IE6 CSS.

    Code:
    #thumbnailsContainer a{
       display:inline-block;
       background: url(http://www.jeremyhodge.pwp.blueyonder.co.uk/images/stripes.gif);
       padding: 8px;
       margin-bottom: 25px; /* Need to work out exact margins */
       margin-right: 25px;
        height:1px
    }
    That should make it behave more like ie5.5. now.

  16. #16
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant! That's fixed it a treat.

    What's the reason why just setting a height on #thumbnailsContainer a of 1px, solves the issue?

    One last small thing: I've experienced this before and seen it occuring on other peoples sites. The sub navigation on my gallery page; the links are all bunched together kind of into one unreadable long line.

    Do you know of any fix for this as I've never been able to find a solution.

    Thank you again for all your excellent help.

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    IE5 is still supported by Microsoft as it is the default browser for an operating system that is still supported. (IE5.5 is not since there are no longer any supported operating systems that install it as the default browser) If you are going to put any time into supporting IE5 or IE5.5 then it may as well be to get the one still supported by its author (IE5) to work right rather than the one that has been declared dead some years ago (IE5.5).
    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="^$">

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    What's the reason why just setting a height on #thumbnailsContainer a of 1px, solves the issue?
    This is a "haslayout" trigger the same as display:inline-block is a "haslayout" trigger except that ie5 doesn't understand display:inline-block.

    Any inline element in IE that is given a "layout" behaves as though the element is an inline-block. (Ie5.x allowed inline elements to have dimensions applied which was strictly against the rules.)

    One last small thing: I've experienced this before and seen it occuring on other peoples sites. The sub navigation on my gallery page; the links are all bunched together kind of into one unreadable long line.
    Where am I looking exactly and which browser are we talking about. The links on your gallery page looked ok to me in ie5 unless I was looking in the wrong place.

    (In ie5 you will usually find that margins are ignored on inline elements (such as menus that use lists as display:inline) unless you give them the height:1px hack )

    Quote Originally Posted by felgall
    f you are going to put any time into supporting IE5 or IE5.5 then it may as well be to get the one still supported by its author (IE5)
    Good point but I think the question is which browser is currently most used out of the two and from all reliable information (if there is such a thing with browser stats) IE5.5. seems to be miles ahead of ie5 in usage. Therefore I would concentrate on IE5.5 and not IE5.

    Besides its going to take a lot more hacks to get ie5 to behave and 99&#37; of the time I need do nothing extra for ie5.5

  19. #19
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where am I looking exactly and which browser are we talking about. The links on your gallery page looked ok to me in ie5 unless I was looking in the wrong place.
    Ah, what you're seeing is what I've now fixed. I'd like to go over this a little though if I may.

    First this rule is set:
    Code:
    #subNavigation li {display: inline;}
    and then the display property value is changed on the a element:
    #subNavigation a {display: inline-block;}
    I can't quite remember why but I made a note in my code that I needed this to get it to look right in Opera.
    There's no margin settings being applied to either of these selectors.

    From what you've said am I right in saying that setting a height of 1px on (is it any element or just an inline element) an element, triggers haslayout. And so does setting display to inline-block?

    So that rule above IE5 doesn't understand. Hence I have to do what I've got in my ie-6lte-hacks.css file, which is this:

    #subNavigation a {height: 1px;}

    So with this sort of problem in IE, I need to trigger haslayout to rectify the problem. And has layout triggers force the element in question to behave like an inline-block?

    Sorry if that's difficult to read but I'm just trying to get an understanding of how this has layout works as I've never really understood it.

    Could you let me know if I'm getting it or way off the mark? Also do you know of anywhere online I can read more about this and that is not too difficult to understand.

    Thank you so much once again for your help and patience.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    From what you've said am I right in saying that setting a height of 1px on (is it any element or just an inline element) an element, triggers haslayout. And so does setting display to inline-block?
    In IE6 setting a dimension will force "haslayout" on block level elements only because dimensions do not apply to inline elements. Therfore for an inline element in IE6 that we need to force into layout mode we can use one of the other triggers such as display;inline-block (or the proprietary zoom property). This ensures that inline elements have a layout but IE6 doesn't really understand the display:inline-block rule and the element won't become an iline-block.

    However if you first set the element to be display:inline and then apply display:inline-block to it in a nother rule then it starts to act like an inline block.

    IE5.x allows dimensions to be set on all elements by default and therefore you can use the height:1px to effect layout on these elements which by default will behave as inline blocks when the dimension is applied.

    I have a written a page on "haslayout" in mine and Tommy's reference here. I also have a paragrapgh about inline-block in the middle of this article.

  21. #21
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help and for the links.

    I'm still finding it a little difficult to get my head around display:inline-block

    Do you know of a really easy to understand web reference or could you perhaps explain in simple terms?

    Just one more thing (I sound like Columbo), what is your recommended list of browsers and versions that I should be testing in? What do you use?

    Currently I test in Internet Explorer 7, 6, 5.5 and 5, Firefox latest version, Opera latest version and Safari latest version. I get a friend to look at sites on the mac in Firefox, Opera and Safari, but he doesn't have IE for the mac. I've looked for a web resource to be able to see how sites look in IE on the mac but havn't found one yet—do you know of anything?

    Thanks again for all your help.

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Do you know of a really easy to understand web reference or could you perhaps explain in simple terms?
    To be honest there aren't many people who understand this and the links I have given you are perhaps the best. Don't get hung up too much on using display:inline-block itself because that is mainly a haslayout trigger for inline elements in IE6 and you will hardly ever need it unless you are really trying to create inline block elements (which was explained in my article).

    For ie5.x you can simply add the height:1px hack to fix the propblems with links and inline elements that bunch up to close. Ie6 sedlom needs a fix for inline elements although you will have to add position:relative if you use negative margins or have padding and borders around inmline elements.

    Creating inline-blocks is a different question altogether and browsers like safari and Opera support it but Firefox 2 doesn't support it. Firefox 3 does now support display:inline-block and will make a block element behave as though it is inline while still having dimensions applied. (Which is what ie5 does to inline elements by default just to confuse matters)


    Currently I test in Internet Explorer 7, 6, 5.5 and 5, Firefox latest version, Opera latest version and Safari latest version. I get a friend to look at sites on the mac in Firefox, Opera and Safari, but he doesn't have IE for the mac. I've looked for a web resource to be able to see how sites look in IE on the mac but havn't found one yet—do you know of anything?
    Don't bother with ie5mac as its a very bad and broken browser and you would spend your whole life trying to get even the simplest layout to look good on it. MS doesn't support IE on the mac and advise users to use safari.

    There were mac capture sites around but I'm not sure if they bother with ie5 mac anymore. I do have an old ie5 that I used to use for testing but I haven't touched in the last few years as its usage is virtually nil now.

    You have to be careful when catering for old browsers that you end up spending 99.9&#37; of your time fixing these old browers for only 0.00001% of your audience and in the consequence end up giving 99% of your audience an inferior experience.

    If you want you can supply older browsers with an unstyled page and there are many import filters documented on the web that will let you do this.

    When developing I have four browsers open and test at every stage. I use Firefox, Opera, Safari and IE latest versions. At certain stages during development I will take a look at older browsers such as ie5 and 5.5., and a couple of older versions of Firefox and Opera.

    You shouldn't aim for pixel perfection bewteen browsers because they render elements in slightly different ways such as form controls and text in safari which will not match those of other browsers

    When I've finished I run the page through browsercam and get a snapshot of most browsers. Browsercam is a paid for service but you'll find a thread in the html forum (if it's still there) where users club together to reduce costs.

  23. #23
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which older versions of Firefox and Opera is it worthwhile testing in?

    And can these versions be run in standalone mode alongside the newer versions?

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Which older versions of Firefox and Opera is it worthwhile testing in?
    You can usually install opera into a different directory without problems so you can have a few versions running. My thinking has been changing lately and I now only test in the latest version of opera and the version before. Most opera users upgrade straight away and there is no point checking in 20 or different versions these days. I still have about 8 versions of opera on my computer which is too many really.

    With Firefox the main one to check is Firefox 2 but FF3 is out now and so you need to check that also. I have upgraded to FF3 but keep the FF2 portable browser for testing FF2 to avoid conflicts.

    I don't really see much need to go back further than FF2 as most users have upgraded but there are the odd differences in 1.0 versions so you need to decide for yourself.

    In reality you should check your server logs and see what your visitors are using and then you can make a well educated choice.

  25. #25
    SitePoint Addict rabbitsfeat's Avatar
    Join Date
    Nov 2006
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just checked and I am running Firefox version 2.0.0.15

    Can I download and install Firefox 3.0 as a standalone?

    I looked at your link portable browser, but didn't really understand it.


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
  •