Help with CSS positioning issue

HTML & CSS
1

Hello,

I am working on a WordPress powered website that will have a matching phpMyDirectory. I have a CSS positioning issue that I’m hoping you can help me sort out.

Main Site: http://tinyurl.com/4uffmp5
Directory: http://tinyurl.com/4clortv

If you open both of those in separate tabs and then click between them, you’ll see that the directory shows the logo, sidebar, and content area slightly lower than the main site.

I really don’t want to go through and make a separate stylesheet for the directory to make the needed adjustments, so I’m wondering why it’s happening and if there’s a single fix that would make them match. Do you see anything going on?

Thanks for any ideas. :slight_smile:

2

I think the problem lies here

page - CLa

<div id=“wrap”>
<div id=“top-bar”></div>
<div id=“leaves”></div>
<div id=“header”>
<div class=“wrap”>
<div id=“title-area”><p id=“title”><a href=“http://auxanocreative.com/cla/” title=“CLA Demo”>CLA Demo</a></p><p id=“description”></p></div><!-- end #title-area –>

page- membership

<div id=“wrap”>
<div id=“top-bar”></div>
<div id=“leaves”></div>
<div id=“header”>
<div class=“wrap”>
<div id=“title-area”>
<a href=“http://columbuslandscape.org”><img src=“http://auxanocreative.com/cla/wp-content/themes/cla/images/logo.png” alt=“Columbus Landscape Association” width=“304” height=“101” /></a>
</div><!-- end #title-area –>

One one page you are using <div id=“title-area”> to display the logo, but on the other page you are using both <div id=“title-area”> and <img src> to display the logo.png. This, along with the added <p id=" "> areas are causing a shift in your layout.
With the difference in coding, the visual view and positioning will vary slightly. It is best to decide on one way to display your logo.png , and use it for all your pages.

Hope this helps :slight_smile:

3

Thank you so much for your reply. I don’t think that’s it, though. I removed the whole logo from the directory’s code and the shift still happens on the sidebar and content area… So confused!

4

Hi,

There’s probably some white space under the large image so try this.


#photo img{display:block}
5

Thanks again.

I was able to mostly resolve the issue by adding a class to the #inner div that is special for the directory. IE isn’t perfect (is it ever??) but I can live with that.

6

Paul, thanks for your reply. I didn’t see it before I submitted my last post. I will look into that now.

7

Just checked your pages again on Firefox 3.6.15 and it all seems to be staying in place now. Hope you have got it sorted :slight_smile:

8

I sure did. Thanks so much!