Jump to content
triggerfish

Images popping out of boxes on ie 8 & 9

Recommended Posts

triggerfish+    1
triggerfish

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
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
triggerfish+    1
triggerfish

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
triggerfish+    1
triggerfish

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
triggerfish+    1
triggerfish

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
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
triggerfish+    1
triggerfish

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
triggerfish+    1
triggerfish

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

The topic was marked as resolved.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
    • jvheintze
      By jvheintze+
      I just tried to figure out how to use Lax in combination with Post Thumbnails the following way: instead of showing the Featured Image on top of the content section I would like to have a Lax section above the content which loads for each post the featured image. To do so it seems there should be some kind of word press hook support necessary (not ready yet)? Or did I miss something?
    • richardjacruz
      By richardjacruz+
      I'm sorry to be a bother. I tried looking this up through the forum and then via Google, but  couldn't find the answer. 
      I want to add "alt" text to the images found in the RevSlider and the QuickCarousel at www.stevensoncrane.com. I added alt text in the media section of WP, and I refresh the page and published, but I still don't see content in the "alt=" part of any image HTML. 
      Is there a way of doing this with these two sections?
      Thanks,
      Rich
×