Trouble displaying background strip in content

  • https://www.zamagazine.org/index.php

    As you can see, the header is meant to span the width of the window no matter what the size of the window is. In order to do this I had to remove the ‘width’ setting for #page (I’ve been modifying the Kubrick theme) and therefore the background strip behind the content doesn’t stay in the middle of the page exactly when the window is resized. This isn’t a problem in Firefox, Opera, or Safari, but in IE it causes a slight misalignment with the footer, which to the anal graphic designer is too noticeable. ??

    To solve the problem, I tried to put the background strip into a “centerthecontent” id that I use to keep the content and the sidebar in the middle of the page, but I could get nothing to display in everything but IE unless I put an  . This got the background to appear but only for one line.

    It’s as though the centerthecontent id isn’t recognising that there’s content in it, so the background doesn’t show. Why is this, and was I on the right track for a solution?

    Any help is appreciated!
    Brendan

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

  • if you don’t mind, i would like to see the files…

    Thread Starter Brendino

    (@brendino)

    Ah! Many apologies…

    index.php

    <?php get_header(); ?>
<div id="centerthecontent">
<div id="content" class="narrowcolumn">

<br />
<?php $temp_query = $wp_query; ?>
<?php
   if (is_home()) {
      query_posts("cat=-3");
   }
?>

<?php if (have_posts()) : ?>

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

<div class="post" id="post-<?php the_ID(); ?>">

<div class="articleTitle"><a href="<?php the_permalink() ?>"
rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();
?></a></div>

<div class="dateauthor"><span class="justdate"><?php the_time('n.j.y') ?> // <span style="text-transform: lowercase;"><?php the_author() ?></span></span></div>

<div class="entry"> <?php the_excerpt('Read the rest of this entry &raquo;'); ?><!--<a href="<?php
the_permalink() ?>" rel="bookmark" title="permanent link to <?php the_title_attribute();
?>">>> Read it</a>--> </div>

<span class="postmetadata"><?php the_tags('tags: ', ', ', '<br />'); ?> category: <?php
the_category(', ') ?>  | <!--<?php edit_post_link('Edit', '', ' | '); ?> --> <?php
comments_popup_link('no comments »', '1 comment »', '% comments »'); ?></span>
</div><br />

<?php endwhile; ?>

<div class="navigation"> <div class="alignleft"><?php next_posts_link('&laquo; older articles')
?></div> <div class="alignright"><?php previous_posts_link('newer articles &raquo;') ?></div>
</div>

<?php $wp_query = $temp_query; ?>

<?php else : ?>

<h2 class="center">Not Found</h2> <p class="center">Sorry, but you are looking for something that
isn't here.</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

</div>

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

<?php get_footer(); ?>

    header.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="https://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed"  href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="shortcut icon" href="favicon.ico" />

<style type="text/css" media="screen">

<?php
// Checks to see whether it needs a sidebar or not
if ( !$withcomments && !is_single() ) {
?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/zabg-<?php bloginfo('text_direction'); ?>.png") repeat-y top; border: none; margin: 0 auto;}
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/zabgwide.png") repeat-y top; border: none; margin: 0 auto; }
<?php } ?>

</style>

<?php wp_head(); ?>

<!--[if IE]>
      <style>
      #searchsubmit {padding:0px;}
      </style>
<![endif]-->

</head>
<body>

<div id="page">

<div id="header">
  <div id="headeroverlay">
    <div id="headerimg">
      <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

      <div class="description"><?php bloginfo('description'); ?></div>

      <div id="centerthenav">
        <div id="top-nav">

          <ul id="navlist">

<li id="active"><a href="<?php echo get_settings('home'); ?>/">Home</a></li>
	    <?php wp_list_pages('title_li=&depth=-1'); ?>
            <?php wp_list_categories('include=3&title_li='); ?>
	  </ul>	

 <ul style="list-style: none; padding: 0 15px 0 0; margin: 0;">
            <li><div id="searchcallinheader"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div></li>
          </ul>
   	</div>
      </div>
    </div>
  </div>
</div>

<hr /><br />

    stylesheet is at https://www.zamagazine.org/wp-content/themes/ZATheme/style.css

    in IE it causes a slight misalignment with the footer, which to the anal graphic designer is too noticeable.

    try to clear the float in footer with #footer{clear:both;}

    and please check again, have you close all div? I have check it and seems like you forget to close div with ID=”page” in the footer. sorry if I’m wrong…

    Thread Starter Brendino

    (@brendino)

    @pepen – I appreciate your time.

    I tried to clear the float, to no avail.

    I didn’t thoroughly examine, but I did pass XHTML 1.0 Transitional. Would it have caught an open div tag?

    The same error manifests in FF3 now! eek!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Trouble displaying background strip in content’ is closed to new replies.