Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Images popping out of boxes on ie 8 & 9


Question

Posted · Report post

I cannot seem to get my images in PL Boxes not to be oversized and coming out of the containers in ie8 & ie9

I have tried the ie fix \9 (see below) but it does not help (I can get the borders to change but not the image sizing).

img,

.block_inner img {

border: 1px solid #9e0509;

margin-bottom: .5em;

width: 99%;

width: auto\9; /* IE9 and below fix */

}

PS I know about max-width, but if used here it does not work correct in the PL boxes.

PS I have the images defined in the text area, so I can get the title on top of the image.

Site is HOME page .. http://yourconsultants.ca

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

I don't have IE or access to it. Can you please post a screenshot of your site so that I can see the images?

Share this post


Link to post
Share on other sites

Posted · Report post

Hmm, can't seem to upload an image here???

I know I have attached before here, but all I am given for choices is IMAGE= URL or CHOOSE from MY MEDIA-YOUR ALREADY UPLOADED MEDIA

Share this post


Link to post
Share on other sites

Posted · Report post

This is the screen shot from ie9,

and it looks the same in ie8

ie8-9.jpg

Share this post


Link to post
Share on other sites

Posted · Report post

Are you uploading these images in dimensions smaller than the boxes?

Share this post


Link to post
Share on other sites

Posted · Report post

No the images are larger

So when it switches to mobile they are full width

Share this post


Link to post
Share on other sites

Posted · Report post

Replace the code you have with this code:

img,

.block_inner img {

   border: 1px solid #9e0509;

   margin-bottom: .5em;

   width: 90%;

   width: auto\9; /* IE9 and below fix */

}

Does it make a difference?

Share this post


Link to post
Share on other sites

Posted · Report post

No, it then ruins the images for Safari, Chrome and Firefox.

To small that is, and text starts to wrap.

And it does not change the images at all in ie9

Share this post


Link to post
Share on other sites

Posted · Report post

IE9 and earlier versions do not accept image scaling. For IE, you need to resize the images manually and upload in the size they're to appear in. WordPress scaling and resizing do not function in IE.

Share this post


Link to post
Share on other sites

Posted · Report post

SOLUTION

I found if I placed the image inside a div and specified the div at a fixed size (only for ie) this works.

.box3 {

width: 300px9; /* IE9 and below fix */

}

Share this post


Link to post
Share on other sites

Posted · Report post

I'm glad you managed to get this resolved, thank you for posting the solution so it will help others in the future

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites