Newbie help required! CSS positioning

HTML & CSS
1

Hello,

I have been pulling out my hair trying to figure out why I am having trouble getting the horizontal lines near the header of this page to line up. The site is built on a modified Wordpress theme and the problem only appears on the ‘page’ pages and not the ‘post’ pages. The problem does not seem to exist on Firefox for Mac but can be seen in both Chrome and Safari.

see ‘post’ page here: FLASH » About

and ‘page’ page here: FLASH » Issue 3 2009

I hope this makes sense!

As I have inherited this site, I am not sure what modifications were made to the original template and how this was broken.

I hope someone can help me!

Many thanks
Tracey

2

Looking at it with the FF plugin Firebug, I notice that the structure of the two pages is different.

‘page’ page


<div id="container">
  <div id="content">
    <div class="clear"></div>
    <div class="left-col">
    <div id="post-576" class="hentry p1 post publish author-kyla-mcfarlane category-editorial y2009 m11 d27 h12">
    <div class="sidebar">
  </div>
</div>

‘post’ page


<div id="container">
  <div class="left-col" style="margin-top:17px;">
  <div id="content">
    <div id="post-3" class="hentry p1 page publish author-ccp category-uncategorized y2009 m02 d17 h15">
  </div>
  <div class="sidebar">
</div>

In particular, this

<div class="clear">

causes the gap between the header and the lines.

3

Hi Guido,

I had found the same thing using Chrome’s Developer Tools. I just have to figure out how WP is composing the pages in order to find the right place to add that div tag. I still don’t understand why it isn’t a problem on my version of Firefox.

Many thanks for looking!

Cheers
Tracey

4