WordPress.org

Ready to get started?Download WordPress

Forums

Undesired Spacing (7 posts)

  1. Mithrustt
    Member
    Posted 6 years ago #

    http://www.think-theory.com

    Sorry to bother you guys, but I have a problem and I just can't figure out what I need to do to solve it.

    It's my 'headline' section. For the most part, it works. Whenever a certain category is posted in, an image is also referenced in the custom fields below it. Through the coding, it puts the image in the headline, where only the five most recent are to be shown in order of the newest on the left and oldest on the right.

    When I don't have the coding for the five images and the links they have, everything is fine in terms of spacing. However, once I have them in, it pushes some of the content below it down 14px. I have the 'headline_bg' which is the background under those five images, and then after that is the 'articles_spacer' which is the background image that says "reviews" and "columns" on it. It's also the background that the "join the forums" button sits on, which is obviously pushed down 14px. As well, the actual content in the reviews column and the columns column are both pushed down 14px instead.

    I know I can do a simple 'margin-bottom: -14px' but that just covers up the problem; it doesn't fix it. Normally I might do this, but I know it shouldn't be like this and I discovered another problem that would muddle things up: I have all five images as links, so when you hover them, the cursor changes as it normally would. Then when you move the cursor to just below the images, where the 4px section of the background image shows, it goes back to not being a link, as it should. However, the top part of the 'articles_spacer' background image -- or whatever is on top of it -- has a small section that links to the same place that the image above it does.

    How am I to get rid of this? Here is all the code I've used for the headline:

    HEADER

    <div id="headline_bg">
    
    <?php $the_query = new WP_Query('cat=37, 39, 40&showposts=5&orderby=post_date&order=desc');
    
    					while ($the_query->have_posts()) : $the_query->the_post();
    
    					$do_not_duplicate = $post->ID; ?>
    
    						<div id="headline_spacing">                              
    
    <?php if ( get_post_meta($post->ID, 'headline_img', true) ) { ?>
    
    						<div class="headline_img"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/headline/<?php echo get_post_meta($post->ID, "headline_img", $single = true); ?>" alt="<?php the_title(); ?>" /></a></div>
    
    <?php } ?>
                                    </div>	
    
    					<?php endwhile; ?>

    CSS

    /* HEADLINE
    -------------------------------------------------------------- */
    
    #headline_bg {
    background-image: url('images/bg/featured.gif');
    background-repeat: no-repeat;
    background-position: top center;
    height: 138px;
    width: 1000px;
    margin-left: -20px;
    }
    
    #headline_spacing {
    float: left;
    margin: 0 -8px 0 0;
    padding: 4px 0 0 12px;
    }
    
    #headline_img {
    height: 130px;
    width: 192px;
    margin-bottom: 0;
    }

    If you need to see more code, I can bring it up. I'm just wondering where I screwed up and what I need to do to fix it.

    Any help is greatly appreciated.

  2. Mithrustt
    Member
    Posted 6 years ago #

    I'm also thinking that this is a problem that resides in the header.php but that the stylesheet may be contributing to it. However, if I knew this for certain, I'd probably have the problem solved.

  3. Mithrustt
    Member
    Posted 6 years ago #

    Also, this problem, for some reason, DOESN'T occur in IE, just Firefox and Safari. This seems odd, as I'd expect it to be the other way around.

  4. Mithrustt
    Member
    Posted 6 years ago #

    Ahhhhh! This is starting to bug me. I thought I was making headway, but now I'm right back to where I was.

  5. Ivovic
    Member
    Posted 6 years ago #

    well, I think the root of your problem is that you're using negative margins all over the place.

    I can't seem to find a good reason for that though... but with that many negative margins stacked upon each other I'm not surprised you're getting some odd rendering.

    I understand they work, and I've used them myself, but they're best avoided because they're really a hack, where often no hack is necessary... and especially in your layout as I understand it.

    left/right margins I get, maybe even negative top margins I can understand, but negative bottom margins?... used to "suck under" content below it?

    that's pretty odd.

  6. Mithrustt
    Member
    Posted 6 years ago #

    I would love to not have to use negative margins, however, I only have a basic knowledge of CSS. As well, this theme isn't from scratch -- I'm modifying it (heavily), but for me, I'm bound to run into problems when trying to get it to look the way I want it.

    This is one such problem. I just don't know how to fix it.

  7. Mithrustt
    Member
    Posted 6 years ago #

    OK, I fixed the spacing problem, however, there is still that invisible link problem. It's an area only a few pixels tall under each of the headline images, and it's as wide as a headline image. If you hover over the 'reviews' or 'columns' graphics just under the headline, you should see what I mean. It's only happening in Firefox, though. Not IE or Safari.

    What's the deal guys?

Topic Closed

This topic has been closed to new replies.

About this Topic