WordPress.org

Support

Support » Themes and Templates » [Resolved] Adding font-style to lead paragraph makes thumbnail vanish

[Resolved] Adding font-style to lead paragraph makes thumbnail vanish

  • 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!

Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi

    @esmi

    Forum Moderator

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

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

    esmi

    @esmi

    Forum Moderator

    Weird issue though…

    Moderator Michael

    @alchymyth

    Forum Moderator

    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;
    }
    esmi

    @esmi

    Forum Moderator

    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.

    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

    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

    esmi

    @esmi

    Forum Moderator

    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.

    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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Resolved] Adding font-style to lead paragraph makes thumbnail vanish’ is closed to new replies.