CSS element overlapping Image element in Page

  • Theme: Detour 1.0 by Brian Gardner
    Wordpress: 2.5.1

    The problem
    A footer boarder in CSS is not being pushed down by an image in a WordPress Page.

    What is expected
    I expect the Page to expand down to to allow for the image to be properly contained with the footer boarder showing just after the image (or the last bit of Page content).

    What i’ve already tried to fix the problem
    This problem seemed similar to another issue i’d experienced (detailed here).

    I attempted to insert…
    <div style=”clear:both;”></div>
    …just after the Content DIV. It does not appears to have any affect on the current issue.

    See an example of how its supposed to look HERE.
    See an example of how it looks with an image HERE.
    (this is on a local server otherwise I’d include a direct link)

    the relevant CSS code (see below for full style.css)

    #footer {
	background: #FFFFFF;
	width: 680px;
	color: #333333;
	margin: 0px auto 0px;
	text-align: left;
	position: relative;
	line-height: 17px;
	border-top: 5px solid #333333;
	}

    the bar you see in the example is
    border-top: 5px solid #333333;

    The full page.php code

    <?php get_header(); ?>

<div id="content">
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<h1><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h1>
	<?php the_content(__('Read more'));?>

	<!--
	<?php trackback_rdf(); ?>
	-->

	<?php endwhile; else: ?><?php endif; ?>

</div>

<!-- The main column ends  -->

<?php get_footer(); ?>

    The full style.css code

    /*
	Theme Name: Detour
	Theme URL: https://www.briangardner.com/themes/detour-wordpress-theme.htm
	Description: Detour is a modern theme created for WordPress.
	Author: Brian Gardner
	Author URI: https://www.briangardner.com
	Version: 1.0

	The CSS, XHTML and design is released under GPL:
	https://www.opensource.org/licenses/gpl-license.php

	Changelog:
		v1.0 - 12.03.06
			First Release of Detour
*/

body {
	background: #FFFFFF url(images/bg.gif) top center repeat-y;
	color: #333333;
	font-size: 12px;
	font-family: Arial, Helvetica, Sans-Serif;
	margin: 0px auto 0px;
	}

#wrap {
	background: #FFFFFF;
	width: 680px;
	margin: 0px auto 0px;
	padding: 0px;
	}

#header {
	background: #FFFFFF url(images/header.gif) no-repeat;
	width: 680px;
	height: 150px;
	margin: 0px auto 0px;
	padding: 0px
	}

/************************************************
*	Hyperlinks									*
************************************************/

a, a:visited{
	color: #FF0000;
	text-decoration: none;
	}

a:hover{
	text-decoration: underline;
	}

/************************************************
*	Nav         								*
************************************************/

#nav {
	background: #3A3A3A url(images/nav.gif) no-repeat;
	width: 680px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 8.5pt;
	font-weight: bold;
	margin: 0px auto 0px;
	padding: 7px 0px 7px 0px;
	border-top: 1px solid #FFFFFF;
	}

#nav li {
	display: inline;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	}

#nav ul {
	margin: 0px;
	padding: 0px;
	}

#nav a {
	color: #FFFFFF;
	font-weight: bold;
	margin: 0px;
	padding: 6px 10px 6px 10px;
	}

#nav a:hover {
	color: #C0C0C0;
	font-weight: bold;
	text-decoration: none;
	}

/************************************************
*	Content 					     		    *
************************************************/

#content {
	width: 660px;
	margin: 0px 0px 0px 0px;
	padding: 20px 10px 0px 10px;
	}

#content p{
	padding: 0px 0px 15px 0px;
	margin: 0px;
	line-height: 18px;
	}

#content p img{
	float: left;
	border: none;
	margin-right: 15px;
	margin-bottom: 10px;
	}

#content ol{
	margin: 0px;
	padding: 0px 0px 10px 20px;
	}

#content ul{
	margin: 0px;
	padding: 0px 0px 10px 20px;
	}

#content h1 {
	color: #000000;
	font-size: 22px;
	font-family: Century Gothic, Verdana, Arial, Sans-Serif;
	font-weight: normal;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	}

#content h1 a  {
	color: #000000;
	text-decoration: none;
	}

#content h1 a:hover {
	color: #FF0000;
	text-decoration: none;
	}

#meta {
	margin: 0px 0px 30px 0px;
	padding: 2px 0px 0px 0px;
	border-top: 1px solid #333333;
	}

#meta p {
	font-size: 11px;
	}

#meta a  {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 11px;
	font-weight: bold;
	color: #FF0000;
	text-decoration: none;
	}

#meta a:hover {
	text-decoration: underline;
	}

/************************************************
*	Footer  									*
************************************************/

#footer {
	background: #FFFFFF;
	width: 680px;
	color: #333333;
	margin: 0px auto 0px;
	text-align: left;
	position: relative;
	line-height: 17px;
	border-top: 5px solid #333333;
	}

#footer p {
	color: #333333;
	padding: 0px;
	list-style-type: none;
	margin: 0px;
	}

#footer h2 {
	color: #333333;
	font-size: 12px;
	font-family: Arial, Helvetica, Sans-Serif;
	font-weight: bold;
	border-bottom: 2px solid #999999;
	padding: 0px 0px 2px 0px;
	margin: 15px 0px 0px 0px;
	text-transform: uppercase;
	}

#footer a {
	color: #333333;
	text-decoration: none;
	}

#footer a:hover {
	color: #999999;
	text-decoration: none;
	}

#footer ul {
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	}

#footer ul li {
	display: inline;
	padding: 0px;
	margin: 0px;
	}

#footer ul li a {
	display: block;
	color: #333333;
	text-decoration: none;
	margin: 0px;
	padding: 5px 0px 5px 0px;
	border-bottom: 1px solid #999999;
	}

#footer ul li a:hover {
	background: #EFEFEF;
	color: #FF0000;
	}

#footerleft {
	background: #FFFFFF;
	float: left;
	width: 210px;
	margin: 0px 20px 0px 0px;
	padding: 0px 0px 20px 10px;
	}

#footermiddle {
	background: #FFFFFF;
	float: left;
	width: 210px;
	margin: 0px 20px 0px 0px;
	padding: 0px 0px 20px 0px;
	}

#footerright {
	background: #FFFFFF;
	float: right;
	width: 200px;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 20px 0px;
	}

#credits {
	background: #3A3A3A;
	color: #FFFFFF;
	width: 680px;
	height: 30px;
	text-align: center;
	margin: 0px auto 0px;
	padding: 0px;
	}

#credits p {
	font-size: 10px;
	font-family: Verdana, Helvetica, Sans-Serif;
	color: #FFFFFF;
	padding: 8px 0px 0px 0px;
	margin: 0px;
	}

#credits a {
	color: #999999;
	text-decoration: none;
	}

#credits a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	}

/************************************************
*	Search Form									*
************************************************/

#searchdiv {
	margin: 0px;
	padding 0px;
	}

#searchform {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	}

#s {
	background: #E8E8E8;
	color: #333333;
	padding: 2px;
	margin: 9px 0px 0px 0px;
	border: 1px solid #999999;
	}

#sbutt {
	background: #878787;
	color: #FFFFFF;
	font-size: 10px;
	font-family: Verdana, Helvetica, Sans-Serif;
	padding: 1px;
	margin: 0px 0px 0px 5px;
	border: 1px solid #333333;
	}

/************************************************
*	Comments									*
************************************************/

#commentblock h2 {
	font-size: 16px;
	font-family: Arial, Helvetica, Sans-Serif;
	color: #333333;
	padding: 0px 0px 10px 0px;
	margin: 0px;
	}

#commentblock {
	width: 618px;
	background: #E8E8E8;
	padding: 20px;
	margin: 0px 0px 10px 0px;
	border: 1px solid #555555;
	}

ol#commentlist {
	padding: 5px;
	margin: 0px;
	list-style-type: none;
	}

.commentdate {
	font-size: 12px;
	padding-left: 0px;
	}

#commentlist li  p{
	margin-bottom: 8px;
	line-height: 20px;
	padding: 0px;
	}

.commentname {
	color: #555555;
	margin: 0px;
	padding: 5px 5px 5px 0px;
	}

.commentinfo{
	clear: both;
	}

.commenttext {
	clear: both;
	margin: 0px 0px 10px 0px;
	padding: 20px 10px 5px 10px;
	width: 590px;
	background: #FFFFFF url(images/comment.gif) no-repeat top;
	}

.commenttext-admin {
	clear: both;
	margin: 0px 0px 10px 0px;
	padding: 20px 10px 5px 10px;
	width: 590px;
	background: #FFFFFF url(images/comment.gif) no-repeat top;
	}

#commentsformheader{
	padding-left: 0px;
	}

#commentsform{
	text-align: center;
	margin: 0px;
	padding: 0px;
	}

#commentsform form{
	text-align: left;
	margin: 0px;
	}

#commentsform p{
	margin: 0px;
	}

#commentsform form textarea{
	width: 99%;
	}

p.comments_link  img{
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	}

blockquote{
	font-style: italic;
	color: #777777;
	margin: 0px 0px 0px 20px;
	padding: 0px 100px 0px 10px;
	}

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hmm. If I understand you correctly, the photo in your example is supposed to be in the content section, correct? I’m surprised there’s even an issue. Brian Gardner’s themes are usually rock solid. ??

    I am not at my usual computer and don’t have benefit of my beloved FireFox Developer tools right now. Try commenting out this:

    #footer {
	background: #FFFFFF;
	width: 680px;
	color: #333333;
	margin: 0px auto 0px;
	text-align: left;
/*	position: relative; */
	line-height: 17px;
	border-top: 5px solid #333333;
	}

    If that doesn’t work, my other suggestion is to add this line to your content division, like this:

    #content {
	height: auto;  < add this
	width: 660px;
	margin: 0px 0px 0px 0px;
	padding: 20px 10px 0px 10px;
}

    Troublesome is the #content p img element. As a third step, if the above two solutions fail, try adding this:

    #content p img, #content img { < add "#content p img
	float: left;
	border: none;
	margin-right: 15px;
	margin-bottom: 10px;
	}

    Other than that, I’ll have to wait until I get home to try to help you. ??

    Thread Starter lilnigsta

    (@lilnigsta)

    When I commented out…
    position: relative;
    …under #footer, it places the footer boarder underneath the image (instead of on top).

    when I added…
    height: auto;
    …i was unable to identify any change.

    I wasn’t totally sure what you were asking me to do on the third item. Currently the code looks like this…

    #content p img {
	float: left;
	border: none;
	margin-right: 15px;
	margin-bottom: 10px;
	}

    So I tried all three variations…
    1st variation
    #content p img, #content img {
    2nd variation
    #content img {
    3rd variation (which is the default)
    #content p img {

    None of those seemed to affect it any differently.

    Further Testing
    However, I did try commenting out the following…

    #content p img {
	/* float: left; */
	border: none;
	margin-right: 15px;
	margin-bottom: 10px;
	}

    After doing that, everything showed as expected. The footer boarder was the correct distance (padding or whatever) from the bottom of the picture.

    Just to be sure, I then went in and modified the image code from…
    <img src="https://www.domain.com/image.jpg" alt="" />
    …to…
    <img src="https://www.domain.com/image.jpg" alt="" align="left" />
    …and the problem returned.

    Again, this seems exactly alike to the problem I posted about HERE. And again, I tried applying…
    <div style=”clear:both;”></div>
    …after the Content call in page.php and it had no change/effect.

    Thread Starter lilnigsta

    (@lilnigsta)

    PS. I suspect this is a theme Brian Gardner dropped. The link to his site that is included in the theme no longer exists. And i cannot find any reference to it on his site. Also, its v1.0, my guess is that it was not really complete, or fully up to his specs.

    Thread Starter lilnigsta

    (@lilnigsta)

    buuuump ?? still haven’t figured this one out.

    Did your <div style=”clear:both;”></div> have any content? Empty cleaning DIVs don’t work.

    Make it <div style=”clear:both;”>&nbsp;</div>

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS element overlapping Image element in Page’ is closed to new replies.