CSS not displaying the same across all pages

[cre8tive1]

Hi all,

I’m experiencing an issue on a WordPress site where the CSS isn’t rendering the same across all the pages. The vertical position of the “main-content” and “aside” DIVs are displaying ok on the Home, Manta Ray, Whale Watching and Blog pages. The problem lies with the Dolphin and Our Boat pages where the “main-content” and “aside” DIVs are displaying higher on the page causing them to overlap the “main-navigation” DIV.

Coral Reef Snorkel Adventures

I must be doing something different on those pages that causing the problem but it’s eluding me. I appreciate any input anyone can provide.

Thanks,

jr

[noahgelman]

Your #masthead-images div has a different height on different pages because there isn’t a set height on it. The pictures on the Dolphins pages are smaller than on the Manta Rays page so the #masthead-images div is shorter causing the #main-content div to display higher up.

Give it a set height and adjust the margin-top on the main content div to line everything up.

Or you can give the header a set height and give it overflow:hidden. Then adjust the height so everything is visible, then adjust the margin-top on the main content div to line everything up.

Either way works

[noahgelman]

Well we came to the same conclusion which is awesome

[cre8tive1]

Ah yes, that was dumb of me. How do you both diagnose this so quickly? I’m sorely out of practice with coding.

Thanks,

jr

[noahgelman]

Pro skillz son, awwww yeah

Really though, if you look at enough websites you can how they’re built without looking at the code. So if something goes wrong you can pretty easily spot the area with the conflict, and then you use firebug to examine the area to find the specific div, id, class or style or whatever that is causing the issue.

[chrisburton]

Pro skillz son, awwww yeah

ahaha!

[Author]

Posts