Two pages with same structure display differently

HTML & CSS
1

Hi - please can anyone tell me why the structure of these two pages is exactly the same:

==> http://greensmoothie.com/test/

==> http://greensmoothie.com/misc/free.php

YET in the first one /test

<div id="leafup">

is trapped inside:

<div id="content">

when content has been closed. So it should not be trapped there.

That “leafup” should be right against the edge of the window, as in \free.php

I can’t find a single difference between the two pages!

/test is wordpress and /free.php is not.

I’ve tried ending the Loop at a different place - further down in the html - but it makes no difference!

I’m hoping one kind soul can see the solution. Thank you!

2

Let me see if I understood correctly… when you say that structure is the sam, you really mean that both pages look the same (well, they do not have the exact same content but apart from that…)

When someone speaks of structure, it makes me think of code. And the code of one page is quite different from the other.

I guess they look the same because someone made it look the same on purpose.

The first one will never move towards the edge of the window because it has a div=“wrapper”

3

valarcher.

Like @molona, when somone mentions structure I look at the code. The structure of your pages is not the same. #wrapper has no margin applied so the leaf, which is a child of #wrapper on the free page, is free to rest against the edge of the page. The same would be true on the test page except that Content is the child of #wrapper, and the leaf is inside Content which has a horizontal margin of 56px; therefore, the leaf will be kept 56px from the edge.

Firefox with the Firebug plug-in shows the difference rather easily. Other browsers have similar tools.

The free page:

969×793 53.7 KB

The test page:

969×794 57.6 KB

Hope this is helpful.

4

Hi ronpat - I got it! thanks million. Once you showed me those two images, it was so clear a div hadn’t been closed – yet I KNOW I closed all 3 - wrapper, txtbox, content - in the non-wordpress page /free.php AND in the wordpress template index.php which is the template for /test.

I discovered it’s this wordpress div at the start (that of course is not in free.php) that I never closed:

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

When I close that before closing content, it all works fine! What a relief. This has been bugging me for more than a year.

I have firebug but didn’t know you can compress the code like that so you see ONLY the div’s. After little exploring I see now I can set options in the html dropdown tab. Although I still can’t figure out how you get it to highlight in blue.

thanks million for your help and making it so clear with the images! - Val

5

I hover over the tag that I wish to examine in the lower left Firebug window. The content area of the tag becomes transparent blue, padding appears dark blue or purplish, and margins show as yellow.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.