homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Adding css code superimposes one section on another
Trying to figure our strange phenomonen...

Msg#: 4471350 posted 9:40 pm on Jun 30, 2012 (gmt 0)

I'm having a strange problem with CSS for a header section which I can't figure out. I should say this is for the header of a vbulletin forum so there may be complications there, but even so, the css problem seems fairly simple, if only I had the right knowledge...

I have this code in my main html page:

<div id="headerimage">
<img src="http://www.example.com/images/image1.jpg" alt="Header Image" width="700" height="50" />

<div id="navigationlinks">
<p><a href="http://www.example.com">Home</a> |
<a href="http://www.example.com/one.htm">Section One</a> |
<a href="http://www.example.com/two.htm">Section two</a> |

And this code in my css:


What the code produces is the header image with the navigation links superimposed over the top of the image. This isn't what I want - I want the image at the top and then the links underneath.

However, when I remove this line:


the code works fine, and I get the image at the top and the links underneath, rather than the second div superimposed over the first one.

And I can't for the life of me figure out why...is there some rule of css that might be producing this phenomonen? I could just leave the code without the #headerimage line, but I feel like I need to understand why it is working this way.

Any help gratefully received!



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4471350 posted 12:57 am on Jul 1, 2012 (gmt 0)

Get the obvious stuff out of the way first. Does your code say anything about divs in general-- that is

div {blahblah, et cetera}

--or about divs with an id property--

div[id] {blahblah}

-- or about things-in-general with an id property?


(But don't quote me on that last bit of syntax.)

Second: Does the page include any inherited CSS from somewhere "upstairs"? That includes things the browser will do on its own, unless given instructions to the contrary. It's a good idea to spell out your defaults, even if that's what 9 out of 10 browsers would do anyway:

hr {text-align: center}
seems a waste of time and space until you run into the one browser that thinks hr's should be left-aligned.

Having to say

div, p, blockquote, table, ul, h1, h2 et cetera {diaplay: block;}

may seem a bit over the top, but it can't hurt. (Especially when, like me, you expect your table cells to be top-aligned and your headers to be centered-- unless you specifically declare otherwise.)

Uhm. What was the question again?


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4471350 posted 5:32 am on Jul 1, 2012 (gmt 0)

This is the kind of situation where a browser plug-in/tool can be a real help. Try the F12 Developer Tools in IE or Firebug in Firefox. Then you can inspect individual elements and see exactly what the CSS settings are and where they came from.


WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4471350 posted 5:43 pm on Jul 1, 2012 (gmt 0)

That CSS alone won't be the cause, you likely have a float or absolute positioning somewhere that is taking the elements out of the natural document flow, causing the overlap. As mentioned, Firebug. :-)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved