Jump to content

Quirky problem with image sizing in IE9


Lulu

Recommended Posts

Hi, I have created a simple website and all the images are sized using Photoshop CS4 beforehand. When viewed in Chrome and Firefox, the images all appear as they should do. When viewed in IE9, some of the images throughout the website are larger than they should be whilst others are exactly as they should be. The 'rogue' images are not confined to one page, it's generally one image out of several wich is affected.

 

Here's what I've done to try and sort out the problem, without success:

- checked Internet Options to make sure that Enable Automatic Resizing is not checked, which it isn't

- checked the code and there is nothing I can see which should force certain images to resize.

- xhecked that one or two of the affected images are correctly sized which they are. To make sure, I deleted one of them and did the work again in Photoshop. IE9 still resized the image to be 1" approx. bigger.

 

I don't understand why the resize is only affecting certain images. Can anyone help me with this?

 

Hope to hear from someone soon.

 

Many thanks.

Link to comment
Share on other sites

The only thing I could think of is make sure you don't have a class on it that is being sized in the CSS. Also make sure there is no zoom in the css.

 

 

If you can't find anything try adding a class to the image and setting the width and height to 100% or the direct size of the image.

.classofimg {
   width: 100%;
   height: 100%;
   zoom: 1;
}

 

 

EDIT: Also make sure you are not using an id twice for an image, and if you have a class make sure it isn't also used on another image being resized.

Edited by benjaminmorgan
Link to comment
Share on other sites

The only thing I could think of is make sure you don't have a class on it that is being sized in the CSS. Also make sure there is no zoom in the css.

 

 

If you can't find anything try adding a class to the image and setting the width and height to 100% or the direct size of the image.

.classofimg {
   width: 100%;
   height: 100%;
   zoom: 1;
}

 

 

EDIT: Also make sure you are not using an id twice for an image, and if you have a class make sure it isn't also used on another image being resized.

 

Thanks for getting back to me.

 

I'm not 100% certain what you mean re the class question but I'll do my best to answer you. Each page has various divs and classes. I'm using Fancybox for my image galleries and their instructions are to code each image as follows:

<a class="fancybox" title="This is my image catpion" rel="group1" href="images/aa01.jpg"><img src="images/aa01_t.jpg" alt="" /></a>

 

I did a search a found 7 instances of 'zoom' - 1 in the Fancybox css file, 5 in the Fancybox js file, and 1 in the Spry Menu Bar css file. The Fancybox files came ready coded and I have not altered them. The Spry file 'zoom' was something I added to fix an IE6 error under guidance.

 

I've checked all my id's and don't think I am using the same one twice, or certainly not on the same page. I have a folder of images for each page and within those, there may be repetition eg the id's aa01 and aa01_t may be in several folders, but are different images.

 

Does that help explain the situation or do you need more information?

Link to comment
Share on other sites

I meant you could add a class to the img with your css code. doing this with the code below, OR set the width and height to the widht and height of the img in pixels.

 

.classofimg {
   width: 100%;
   height: 100%;
   zoom: 1;
}

<a class="fancybox" title="This is my image catpion" rel="group1" href="images/aa01.jpg"><img src="images/aa01_t.jpg" alt="" class="classofimg" /></a>

Link to comment
Share on other sites

I meant you could add a class to the img with your css code. doing this with the code below, OR set the width and height to the widht and height of the img in pixels.

 

.classofimg {
   width: 100%;
   height: 100%;
   zoom: 1;
}

<a class="fancybox" title="This is my image catpion" rel="group1" href="images/aa01.jpg"><img src="images/aa01_t.jpg" alt="" class="classofimg" /></a>

 

Thanks, Benjamin. I'll try that out. Any thoughts on what, if anything, I need to do re the zoom function?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...