Adding css code superimposes one section on another

Trying to figure our strange phenomonen...

[arthur22]

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>

<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> |
</div>


And this code in my css:

#headerimage{width:700px;height:50px}
#navigationlinks{width:700px;height:38px}


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:

#headerimage{width:700px;height:50px}

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!

[lucy24]

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?

*[id]

(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?

[rainborick]

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.

[rocknbil]

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. :-)