CODEWITHSUNDEEP
phphtmlcss
Davey
Davey

Reputation: 1324

Unwanted space between divs

I am trying to get three images to connect for my content box but for some reason there is some space between the second and the third. Any help would be appreciated.

here is the site: http://hyvhuynh.com/hyperbolical-blog

<?php get_header(); ?>

<div id="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div <?php post_class();?> id="post-<?php the_ID();?>">
<div id="mythreedivs">
<div id="top">
</div>

<div id="mid">
<h2 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Post <?php the_ID(); ?> - permanent link"><?php the_title(); ?></a></h2>

<ul class="meta">
<li><?php the_time('F j, Y'); ?></li>

</ul>

<div class="postcontent">
<?php the_content(the_title('', '', false)." - continue reading"); ?>
</div>

<ul class="meta postfoot">
<?php if('open' == $post->comment_status) : ?><li class="comment_link"><?php comments_popup_link('Comment on '.$post->post_title, '1 Comment on '.$post->post_title, '% Comments on '.$post->post_title,'postcomment','Comments are off for '.$post->post_title); ?></li><?php endif;?>


<?php if(get_the_tag_list()) :?>
<li>Tags: <?php the_tags('<ul><li>',',</li> <li>','</li></ul>');?></li>
<?php endif;?>
</ul>

</div>

<?php endwhile; ?>

<ul class="prevnext">
<li><?php next_posts_link('&laquo; Older Posts'); ?></li>
<li><?php previous_posts_link('Newer Posts &raquo;');?></li>

</ul>



<div id="bottom">

</div>
<?php endif; ?>

</div>



</div>
<?php get_footer(); ?>

---------css---------------

#mid {
    background-image:url('http://hyvhuynh.com/wp-content/themes/zenlite/images/bodymiddle.png');
    width:806px;
}

#bottom {
    background-image:url('http://hyvhuynh.com/wp-content/themes/zenlite/images/bodybottom.png');
    width:806px;
    height:27px;

}

#header {
width:800px;
float:right;
margin:0 0 50px 0;  
}


/* 
Navigation Bar Time!
*/  

#jsddm
{   margin: 20px 0 0 0;
    padding: 0;
    font-weight:bold;
    text-shadow: #000000;

}

    #jsddm li
    {   float: left;
        list-style: none;
        font: bold 12px Tahoma, Arial}

    #jsddm li a
    {   display: block;
        background: #E7E7EF;
        padding: 5px 12px;
        text-decoration: none;
        border: 1px solid #555555;
        width: 70px;
        color:#000000;
        white-space: nowrap}

    #jsddm li a:hover
    {   background: #1A4473}

        #jsddm li ul
        {   margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            }

        #jsddm li ul li
        {   float: none;
            display: inline}

        #jsddm li ul li a
        {   width: auto;
            background: #E7E7EF}

        #jsddm li ul li a:hover
        {   background: #1A4473}

/*
End Navigation Time!
*/


.logo {
    float:right;
}

#content .post {
    float:left;
    width:800px;
}


#content .page,#content .attachment,.postcontent {

    width:800px;
    text-decoration:none;

}

.photo {
    width: 250px;
    height:700px;
    background-color:#000000;
    margin:0 0 0 880px;
}

.slideshow { height: 232px; width: 232px; margin:0 0 0 880px;  }
.slideshow img {  border: 5px solid #000;  }

.post-title {
    margin:0;
    padding:0;
    text-align:center;
}
.post-title a {
    text-decoration:none;
    color:#000000;
}
.post-title a:hover,.post-title a:active,.post-title a:focus {
    text-decoration:underline;
    color:#5F625F;
}
#content .meta li,#content .prevnext li,#content .gallery li {
    list-style-image:none;
    list-style:none;
}
.meta {
    margin:5px 0 0;
    padding:0;
    font-size:.85em;
}
.meta ul,.meta li {
    margin:0;
    padding:0;
}
.meta ul {
    display:inline;
}
.meta li li {
    display:inline;
    padding-right:.3em;
}
.postfoot {
    clear:both;

    padding-bottom:10px;
    line-height:1.2em;
}
.author .posts-by {
    padding-top:10px;
}

.clearfix {  
display: inline-block; }

.clearfix:after { 
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden; 
}


#footer {
    clear:both;
    margin:0 auto;
    padding:0 0 5px;
    text-align:center;
    font-size:.8em;
    border: 0;
    width:800px;
    height:200px;

}
#footer ul {
    clear:both;
    margin:0;
    padding:0;
}
#footer li {
    display:inline;
    margin:0;
    padding:0 5px;
}
#footer li.rss {
    position:relative;
    top:3px;
}


.copyright {

}

.copyright a
{

}

.copyright a:hover
{

}





.postcontent p {
    text-decoration:none;
    border:0;
    border-style:none;
    }

    .postcontent p a:hover {
        color:#fff;

    }

Upvotes: 1

Views: 1544

Answers (4)

Doug Porter
Doug Porter

Reputation: 7897

The block below:
<ul class="prevnext">
<li></li>
<li></li>
</ul>

is not contained inside the proper <div> tag, it is between your mid and bottom divs.

Upvotes: 0

Pekka
Pekka

Reputation: 449435

You have nesting errors in your markup. I would sort them out first, from what I can see in Firebug, it might already sort it out.

end tag for "div" omitted, but OMITTAG NO was specified

end tag for "ul" which is not finished

Upvotes: 1

Elle H
Elle H

Reputation: 12217

The space is from the margin on your unordered list. Add this to your stylesheet

ul.prevnext {margin: 0px;}

And it'll correct it. I'm not sure what you're doing with it though, so you may want to just scrap it for now because once you add any items, it will pop up again. Or move it to a different position as mltsteeves mentioned.

Upvotes: 2

mlsteeves
mlsteeves

Reputation: 1271

<ul class="prevnext"> is causing the space between the two divs, try putting it inside the previous div.

Upvotes: 1

Related Questions