SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    image width set to 0 in IE8

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You have a script error here that may not be helping things:

    Code:
    <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?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,457
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  8. #8
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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!

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,457
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pantspress View Post
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question twitter problem

    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?
    www.cotswoldbells.co.uk

  11. #11
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    5
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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!

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,457
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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
    http://www.sitepoint.com/forums/show...=1#post5403839
    for a specific inline solution that I posted almost 15 hours ago.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •