WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adding font-style to lead paragraph makes thumbnail vanish (10 posts)

  1. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    Alright, stumped again. I wanted my first paragraph on single view to be styled differently. So, the text/thumbnail combination are in a div, the leading paragraph also has it's own class. So basically the output is:

    <div class="thumbText">
    <a href="link.com" title="post title"><img width="150" height="150" src="image source" class="attachment-thumbnail wp-post-image" alt="famlogo1" title="famlogo1" /></a>
    <p class="lead"> blah blah my first paragraph text</p>
    <div class="clear"></div>
    </div><!--end .thumbText-->

    So nothing too wierd, and the css:

    body.single .entry-content .thumbText img{
            float:left;
            margin: 0 5px 5px 0;
            width: 150px;
            height: 150px;
    }
    body.single .entry-content .thumbText p.lead {
            font-size: 1.1em;
            font-style: italic;
    }

    floats the thumbnail left, wraps the text on the right, and does stuff with the text. Simple right?

    Well, when I put font-style: italic; (or oblique) in there, the thumbnail disappears. I just see a thin line which is part of the border for the image that should be there. The image loads in the source, and if you hover over where it should be you see the alt text, and the fact that the image is linked. So the <a> portion remains, but not the <img>. Take just that line out, and all is well.

    Any idea what gives here? What's hiding my thumbnail?

    http://www.rvoodoo.com pick any post to view on single view to see the issue

    Thanks again ya'll!

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Did you get this sorted? The couple of posts I checked looked fine.

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    hmmm... no kidding.. you are right. Must be an issue with my work browser. well, thanks for looking!

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    Weird issue though...

  5. alchymyth
    Forum Moderator
    Posted 3 years ago #

    the 'missing image' effect is showing in my IE7, for instance (all is fine in firefox3.6)

    try this addition to your style:

    body.single .entry-content .thumbText p.lead {
            font-size: 1.1em;
            font-style: italic;
    		overflow:hidden;
    }
  6. esmi
    Forum Moderator
    Posted 3 years ago #

    Oh - it's years since I've come across the "IE7 italics" bug!

    http://www.cayenne.co.uk/ie7/disappearing-content.html
    http://www.satzansatz.de/cssd/onhavinglayout.html

    overflow:auto; will fix it too.

  7. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    ahhh! Yep, it is IE7 at work, thanks a bunch guys, I didn't know about that bug, so I wouldn't have known what to search for

  8. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    Awww...crap. lol. Now the content acts like 2 columns. Thumbnail on the left, text on the right. If the text is longer than the thumbnail, it no longer wraps. Stays 2 columns.

    Any ideas? I'll continue reading to see what I find. I'm going to punch IE in the face I think

  9. esmi
    Forum Moderator
    Posted 3 years ago #

    IE7's box model is broken so it may be time to look at Conditional_Comment_CSS. Move your overflow fix into the IE7 specific sheet and experiment by replacing it with another HasLayout property such as zoom:1 or height:50%; to see if they help.

  10. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    Yeah, I was doing a bunch of reading on this. Seems the best I can do is run a conditional. none of the haslayouts worked for me. So I'll have to settle for good layout everywhere except IE7..... can't get rid of the no-wrap/2 column layout in IE7

Topic Closed

This topic has been closed to new replies.

About this Topic