Why does iexplorer make this image smaller?

The max-width property on your .size-full class has something to do with it.

Seems like a strange attribute to have set on an image class... sure you need it?
 
If you've uploaded it online then yeah, you've changed the wrong thing because the rule is still being applied.

The line you're looking to remove is "max-width: 96%;" from the ".size-full" class.
 
Well that's because changing it to 100% won't fix the issue unless you also adjust the size of the containing table cell...

Did you try removing the line it like I said? Did it have any negative effects on the rest of the site?
 
RoyMi6 said:
Well that's because changing it to 100% won't fix the issue unless you also adjust the size of the containing table cell...

Did you try removing the line it like I said? Did it have any negative effects on the rest of the site?
Click to expand...

Removed the line like you said and when I did the image on this page goes to a crazy big size, the snowman picture was fixed in iexplorer though.

http://inveralmondchs.org/community-leisure/swimming-lessons/

So I have changed it back for the moment.
 
I've not got any graphics apps on my pc to check, but maybe change your snowman graphic to the size you need it (500x250px). It's maybe going to a crazy size as a quick check using the firebug add-on in firefox says it's 678x531px.

You can also check your code in IE 8 using the developer tools (F12).

Snap your browser window to the left and developer tools to the right.
Click on the cursor icon top-left in the developer tools.
Select the snowman graphic.
This will show you the HTML code on the left and the styles being used on the right.

You can then uncheck elements from the styles and see its effect. Unchecking the 96% value fits the image ok here - as you see it in firefox.

It would be better though to resize the graphics to the size you need them.
Keep the originals and just rename the new graphics accordingly e.g. add -500 to the end of the snowman filename so you know its the 500px width version.

You could try changing the value of max-width to px rather than a percentage.
Try it at 500px if the img width value has been set to 500px.
Again, you might need to resize the graphic you've inserted.

Naturally, changing the size-full style will affect any other graphic using that style.
 
Edit: I guess you can edit the HTML code?

You might be limited to what you can adjust if this is a Wordpress theme. Changing styles might globally knacker it up!

Your alternative is changing the html code just for that image and the td it's inserted into.

So, try removing the size-full class from the img, just for the snowmen, and add a width of 500px to the td. <td width="500">

Web developer and Firebug for Firefox are handy add-ons to use!
 
I will add .post img.size-full {
max-width:none;
}

to the css inserts and will go back and save my images to the correct size, instead of doing it the lazy way that I have :)
 
do have have a width set? try removing the max-width all together and just relay on the width setting, then either set height to auto, or set the height to whatever you need it and then add overflow: hidden.

sorted
 
ColdAsIce

Remove the "max-width" setting all together. Setting "max-width" as "none" is the default value anyway, you do not need to specify it.

And yes, resize all your images to the size they need to be. Removing the max-width setting was the right thing to do and it highlighted another issue with your website which you need to fix.

Using this size of image for a header is, quite frankly, an amateurs mistake that should never of happened.

http://inveralmondchs.org/wordpress/wp-content/uploads/2010/10/Pool_Panorama1.jpg <-10353px by 2297px as a header!!!
 
RoyMi6 said:
ColdAsIce

Remove the "max-width" setting all together. Setting "max-width" as "none" is the default value anyway, you do not need to specify it.

And yes, resize all your images to the size they need to be. Removing the max-width setting was the right thing to do and it highlighted another issue with your website which you need to fix.

Using this size of image for a header is, quite frankly, an amateurs mistake that should never of happened.

http://inveralmondchs.org/wordpress/wp-content/uploads/2010/10/Pool_Panorama1.jpg <-10353px by 2297px as a header!!!
Click to expand...

agreed! No idea how I missed how large that header image was in the first place. Going back and sorting it all now, just goes to show that rushing things just costs you more time in the long run :(

Thanks for the help everyone.
 
Cold: it was possibly because when you visit the website the info is stored on your pc to improve loading times, so after viewing the page load very slowly once you'll have it stored and load very quickly every time after that, which could result in you missing the very large image.

if you use firefox install an addon called johnnycache which allows you to specify any site to not store the information for, so that every time you view it it'll load the whole site again. this also helps if you're updating the style sheet and your browser doesn't realise the file has been updated so uses the old one stored on your pc and will leave you scratching your head for hours trying to find out why the new settings you've put in aren't working.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom