Image width set to 0 in IE8

[pantspress]

CMS: WordPress 3.5.1 // Theme: Choices by Kreisi v1.5

http://meandmoney.com.au/meet-alison/#!prettyPhoto

Bog standard page text content with an image inserted (clickable to display in lightbox).

This works fine in Chrome, FF and IE7 (haven’t tested other versions of IE yet).

But in IE8, the image disappears and the <a href> and <img> widths show as 0 when inspected in Developer Tools.

I’ve searched high and low but can’t figure this out. Any suggestions?

Thanks.

[ralphm]

Hi pantspress. Welcome to the forums.

There seems to be some kind of weird JS overlay thing going on there, and I suspect it is messing things up for poor old IE. I would suggest just removing all that stuff, as it seems to have no purpose anyway.

[PaulOB]

You have a script error here that may not be helping things:

<script> $(function(){ $('#your-email').live('keyup',function(){ if($('#confirm-email').val() != $('#your-email').val()){ <style type="text/css">.wpcf7-submit {display:none;} </style> }else{ /* ready to go*/ } }); }); </script> 

As far as I know "<style type=“text/css”>.wpcf7-submit {display:none;} </style> " is not JS. Should it have been a document.write or something?

[felgall]

@Paul_O_B

Should it have been a document.write or something?

I doubt it should be a document.write - that CSS would make little sense as an entire web page and the first document.write call after the page finishes loading sharts creating a new web page to display once the last document.write has finished.

[pantspress]

Hi ralph.m

That was my initial thought as well but searches indicate that stuff has something to do with the IE determines the nth element (or something like that). I’m not hugely comfortable with it because I don’t understand it fully but the same stuff is present and works fine in IE 7 and IE 9.

Thanks

[pantspress]

@felgall

I doubt it should be a document.write - that CSS would make little sense as an entire web page and the first document.write call after the page finishes loading sharts creating a new web page to display once the last document.write has finished.

I thought this line of script had something to do with the Contact Form 7 plugin, which we are using. The wpcf7-submit was my first clue…then I found out CF7 loads on every page by default, even if there is no CF7 form on the page so I was even more suspicious.

But, alas, Miss Marple I am not…after much searching and finally uninstalling the plugin, I discovered this line of script was hardcoded in the theme we are using. No idea why that would be the case but I finally managed to remove it.

No more syntax error but the disappearing image problem still exists.

[ronpat]

base.css, Line 189

The following property is causing the lady’s image to disappear in IE8:

max-width:100%;

Deleting it will help the social media buttons, too; but not cure them. They still have a bit of an alignment problem.

There may be side effects that I have not realized, so test thoroughly (this is the base.css, after all). Just thinkin… if other pages use this property to resize fluid images, you may be better off to override this property on the home page.

[pantspress]

@ronpat

base.css, Line 189

The following property is causing the lady’s image to disappear in IE8:

max-width:100%;

Deleting it will help the social media buttons, too; but not cure them. They still have a bit of an alignment problem.

There may be side effects that I have not realized, so test thoroughly (this is the base.css, after all). Just thinkin… if other pages use this property to resize fluid images, you may be better off to override this property on the home page.

ronpat you rock! This one was driving me crazy! After you pointed me in the right direction I found a very specific description of the problem:

After a bit of trial and error it turned out that if an image has a max-width specified through CSS, a width attribute in the HTML, and is the child of a floated element that has no explicit width set,
IE8 makes its width zero.

Problem fixed by adding the following to custom.css
.msie8 a img { max-width: none; }

and ronpat - you were right about the social media buttons too…did I mention you rock! Thanks so much for the help!

[ronpat]

@pantspress

ronpat you rock! This one was driving me crazy! After you pointed me in the right direction I found a very specific description of the problem:

Problem fixed by adding the following to custom.css
.msie8 a img { max-width: none; }

and ronpat - you were right about the social media buttons too…did I mention you rock! Thanks so much for the help!

Wow! You’re very welcome! Glad I could help.

[ac1986]

im having a similar problem with my twitter icons not displaying properly in IE8 , I have started a separate thread for this, any ideas on a fix?

Cotswold Bell Tent Hire - Cotswold Bells

[pantspress]

Hi ac1986,

I think the following CSS will work for you

#ie8 .widget img {
max-width : none;
}

#ie8 .widget iframe{
max-width : none;
}

You can probably combine it into a single CSS rule but grouping selectors is not my strong point! If it works and I ever make it to the UK, hook me up with a good deal on one of those awesome tents!

[ac1986]

Hiya, thanks that worked! but its now messed up the size and alignment of the 2 images below any ideas of a fix again? cheers

[ronpat]

ac1986,

The solution suggested by pantspress falls short because it is not specific enough. If applied literally and without considering the design of your page, it also affects the two “polaroids” below it… as you see.

Please see

Sometimes my page loads correctly in IE and sometimes it doesn't?

for a specific inline solution that I posted almost 15 hours ago.