SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot secoif's Avatar
    Join Date
    Jul 2006
    Location
    Brisbane, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unsolved: Never seen this before. IE6 Squashes images.

    check this out:

    http://www.umbrella.org.au

    (among other issues) for some reason, IE6 seems to be squashing the images in that top box (#currentExhibition).

    They 'fix' if I clear the cache. Why? No idea.

    If I look in the IE dom explorer, it says 'height 30' in the editable properties, but i cannot for the life of me see where that gets set as you can't trace the style. I've cut out all the javascript. I've tried setting heights in the css and in the html. I've tried cutting out whole sections of the css to try and track down where it's being set.
    Argh.

    I have NO IDEA what is going on and the only way I seem to be able to get the images to sit right is to disable stylesheets completely. It doesn't seem to matter if stylesheets are on and empty. The images are still squashed.

    um. wtf.

    Any help (or even an idea) much appreciated!

    Tim Oxley
    Last edited by secoif; Oct 16, 2007 at 17:49.

  2. #2
    SitePoint Zealot secoif's Avatar
    Join Date
    Jul 2006
    Location
    Brisbane, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I seem to be able to get a reasonable (well better than existing) result if I set the height to a specific value in the IE stylesheet (eg height: 150px !important) but this seems to kill aspect ratio. That may serve as a temporary solution for now, but I'll leave it as is while you guys have a look at it.

    NOTE: changes I make in the dom explorer don't actually work when I load them into the stylesheet! When the page loads again it goes back to how it was irrespective of changes (usually). So when you're looking please check it out with a local stylesheet. If there's anything I can do to aid testing let me know.

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in the IE6 stylesheet

    Code CSS:
    html body .body .thumb a {
        height: auto !important;
        display: block !important;
        width: auto !important;
        height: 1% !important;
        position: relative;
    }
    html body .body .thumb a img {
        position: relative;
        height: auto !important;
        width: auto !important;
        height: 1% !imporant;
    }

    you're setting the height to 1%

  4. #4
    SitePoint Zealot secoif's Avatar
    Join Date
    Jul 2006
    Location
    Brisbane, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but that doesn't do it.
    i was just testing (trying anything to get something to happen) and that doesn't change a thing. I've removed it now to no avail. No change.

  5. #5
    SitePoint Zealot secoif's Avatar
    Join Date
    Jul 2006
    Location
    Brisbane, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, it appears that the images are fine if ANYTHING requires them to be redrawn AFTER the image is loaded. For example, go to Tools then Internet Options then Delete All Offline Content, then Ok and like magic the images are loaded correctly...same applies if you change any styles with the dom explorer.
    Last edited by secoif; Oct 16, 2007 at 21:04.

  6. #6
    SitePoint Zealot secoif's Avatar
    Join Date
    Jul 2006
    Location
    Brisbane, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah it looks like, after the images are loading, they aren't resizing the box they are in, the box just stays the same size as it was when it was displaying the alt text.

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you attempt something as a fix and it doesn't work then I'd personally remove it again straight away. You seem to have a few different heights that are being applied inline or auto within your CSS so this may be causing problems.

    I've tried downloading the page but unfortunately the problem seems to go when I have it locally which suggests to me that the problem is possibly being caused within the IE6 stylesheet.

    Incidentally, if you develop using web standards then you really shouldn't need an IE7 stylesheet.

    I always say this if a problem isn't obvious but the first step I'd take is to validate your code

    http://validator.w3.org

    Fix those problems as doing so will ensure that the problem lies within your CSS.

    Once you've done this, I'd then try removing a stylesheet, one at a time from your code so that you can see which one is causing problems, it may be a combination of two or more so you'll need to do this as a trial and error.

    I wrote a post a while ago about debugging HTML and CSS which you may find useful

    http://www.sitepoint.com/forums/show...hreadid=494319

    Hope that points you in the right direction and gives you a few ideas to try.

  8. #8
    SitePoint Zealot secoif's Avatar
    Join Date
    Jul 2006
    Location
    Brisbane, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but I have tried most of that already.

    The reason it works is because the images are cached. The images seem to work fine as soon as they are cached, but clear the cache and it will work.

    RE the IE7 layout.
    I could have fixed oen stylesheet to work in IE7 and firefox etc, but as it was only a few rules it seemed far easier/quicker to just fix those few rules that were breaking.

    I try to work with standards but only to the point where it's practical.

    I'll fix the validation errors.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ie6 gave me the problem online the first time and subsequent loads whilst it was only locally that the problem went away.

    It could possibly be something to do with you using PHP files to serve your CSS. In theory it should work aslong as it's served as text/css but this could possibly be a reason?

    I've not seen this before so it's only a suggestion.

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

    This is too hard to test locally especially on an IE6 standalone but the problem is 99% likely to be the fact that you have set the images to be height and width auto.

    Code:
    body #homePage #currentExhibition  ul li a, #homePage #currentExhibition  ul li img {
         padding: 0;
         margin: 0;
         background: none;
         width: auto;
         height: auto;
         border: none;
      
    }
    There are other instances of this in your code and you have some with !important attached also. These may over-ride any height/width attributes you have in the html and therefore the browser won't know how big the image is until the page has loaded and by then its to late. Once the image is in cache it knows the dimensions and the problem doesn't happen again unless the cache is turned off.

    I would suggest that your first course of action to see whether this is your problem or not would be to remove the height: and width:auto settings from all the relevant stylesheets and then in the html add all the correct height and width attributes to the image tag itself. This is important because the browser looks at the img tag and gets the height and width information before the image has loaded and correctly allocates the correct space.

    If your images are loaded dynamically then you should also add the correct height and width attributes dynamically also.

    If that fixes the problem then you will know what the cause is and work around it. If it doesn't fix the problem then it will at least narrow the problem down.

    Hope it helps either way

  11. #11
    SitePoint Zealot secoif's Avatar
    Join Date
    Jul 2006
    Location
    Brisbane, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that.
    The auto sizing eh? I'll go check that out though that is very irritating.
    I don't know why I've never had issues with IE doing this before. Hm! I kinda figured that was what it was anyway, but i was hoping maybe it was some kind of quirky css horror I hadn't stumbled upon that'd be an easy fix.


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
  •