Image alignment issue (does not push box, half-showing)

  • I am using a heavily modified version of this theme ‘gogreentheme’ for my band’s website. Everything basically works fine, no issues. I did a little transparent background bit to all the post entries. Cool. I have tubepress and a flickr widget installed for my video and photo pages. No problem (though the tubepress doesn’t force the background of a post to show up, no big deal).

    So I’m trying to start our discography. Doing a basic image upload with any align and some text is just effed up. Not the transparency thing, that’s a result of post entry code, but the fact that only the top 5th of the image shows up properly. Please note: I have tried eliminating the transparency code and using a ‘normal’ background and I still get the same image issue.

    https://theaccidentwill.com/wp/music/ – check out the image, WTF?

    Here is the code I’m using on the page, very straightforward.

    <img src="https://theaccidentwill.com/wp/wp-content/uploads/2010/12/OSOFsmall.jpg" alt="THE OTHER SIDE OF FOREVER" title="OSOFsmall" width="250" height="250" class="alignleft size-full wp-image-127" />

<strong>THE OTHER SIDE OF FOREVER</strong>
<em>March 11, 2011</em>

It's a Trap
Firebombing of Lakeland
In Blackest Night (The Hunter)
Adrift in the Interlude
The Rowan Child

<em>Lyrics & audio coming soon...</em>

    I really have no idea where to start. Obviously I need the image to be fully visible and push the post-entry box…

    Here are some bits of code…

    #content {float:left; width:660px; margin-top:28px; margin-right:0px; text-align:left;}
.post {width:658px; margin:0px 0 5px 0; clear:both;  border:0 solid #333;  }
.postentry {padding:15px; color:#FFF; background-color:#222; filter:alpha(opacity=90); opacity:0.9;}
.postentry img {padding:10px;}
.postentry p {padding:5px 5px 5px 5px; }
.postentry ul {padding:0 0 0 10px; list-style-type:none; margin:0 0 0 20px;}
.postentry ul li {padding:0 0 5px 15px; background: url(/wp-includes/images/bullet.gif) top left no-repeat;}

    I’m pretty happy with my website template, hackjob as it is, but man needs to be able to put images into posts and have it look normal. Thanks for any help.

    (also in a weird bit it took a lot of doing to make all the link hover color changes work properly but *shrugs*, it works)

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter rnsrobot

    (@rnsrobot)

    Alright I figured out I need to clear the display for the image to not overhang the next element, ie fill the box. I just added <br style=”clear: both;” /> into the page code itself, after all the text. I’d like to insert something like that into my CSS – would I put clear:both into the img css, or somewhere else, so I’m not manually clearing…?

    So then I run into a problem with my transparency code. This is what it is for pages:

    .entry p {padding:15px 15px 15px 15px; color:#FFF; background-color:#222; filter:alpha(opacity=90); opacity:0.9;}
.entry img {padding:10px;}
.entry .akst_link {display:block; padding:10px 0 10px 20px;}
.entry ul {padding:0 20px 0 10px; list-style-type:none; margin:0 0 0 20px;}
.entry ul li {padding:0 0 5px 15px; background: url(/wp-includes/images/bullet.gif) top left no-repeat;}

    If you visit the site (https://theaccidentwill.com/wp/music/) you’ll see that the image has a sliver of black at the top and then ends up the same color as the box itself. If I remove the filter:alpha(opacity=90); opacity:0.9;} code then everything works fine (other than needing to screw around with padding a bit). I’d like to keep the transparency. The pics on the photos page don’t have the same issue.

    I’m confused. How do you WANT it to display?

    Thread Starter rnsrobot

    (@rnsrobot)

    The current layout on the page is fine. The picture itself is fubared. The pic should look like this:

    https://theaccidentwill.com/wp/wp-content/uploads/2010/12/OSOFsmall.jpg

    But it doesn’t. By adding in <br style=”clear: both;” /> on the page itself I was able to solve my issue of the picture hanging ‘over’ the entry element. Now I need the picture to display properly…

    it is caused by the opacity in:
    .entry p {padding:15px 15px 15px 15px; color:#FFF; background-color:#222; filter:alpha(opacity=90); opacity:0.9;}

    however, i couldn’t find any way to overcome this –
    apart from deleting
    filter:alpha(opacity=90); opacity:0.9;}

    That’s b/c deleting filter:alpha(opacity=90); opacity:0.9;} is the only way. Alpha opacity filters effect everything within the div it’s applied to. Use a back ground image with an opacity to solve this problem.

    Thread Starter rnsrobot

    (@rnsrobot)

    Any tips or links on doing a translucent background img? Thanks for the replies.

    You’ll need an image editor. fill with black, adjust fill/opacity and save as a png or jpg.

    then,
    background: (url images/yourfilename.png)

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Image alignment issue (does not push box, half-showing)’ is closed to new replies.