Why does the nav bar move in a browser??

Question

Please help!  In dreamweaver the nav bar looks perfect and is over the top of the blue line under the picture header but when I put it in a browser, it moves as you can see from my link!!
test site
Please can anyone tell me why??  I have a feeling it will be a CSS positioning thing but I am very very new to this so do not know how to rectify!
Thanks if you can help!

Answer 1

Look this is not a good solution, it just hacks around the issue.
Add this to the css style:
#header p {
padding: 60px 0 0 0;
margin: 0;
Then you need to go into code view and change these code lines:
<div id="container">
  <div id="header"><br >
    <p align="right"><br >Complete Energy Certificates Ltd </p>
    <p align="right">&nbsp;<br><br >
    </p>
    <div align="center">
To this:
<div id="container">
  <div id="header">
<p align="right">Complete Energy Certificates Ltd </p>
    <div align="center" style="margin-top: 71px;">
Now let me explain. You're trying to position elements using <br> tags which will not work. The solution I provided is a sticking plaster one and may fail in some browsers because it still relies on guess work.
A far better option would be to rebuild that top section of your page into a solid structure.
A <div> which contains the grass bank and sky image but NOT the blue line that your navigation sits on. You can set this <divs> height to the height of the image and then include your text 'Complete Energy Certificates Ltd' within it.
Like:
<div id="header">
<p>Complete Energy Certificates Ltd</p>
</div><!-- we close the header -->
Now set some css:
.twoColElsLtHdr #header {
background-color: #FFF;
background-image: url(images/header2.jpg);
background-repeat: no-repeat;
background-position: center;
font-size: 12px;
height: 205px; /* make the height the same as that of the background image */
Move your 'Complete Energy Certificates Ltd' text into position by setting some top
and right padding on the paragraph tag:
.twoColElsLtHdr #header p {
margin: 0;
padding: 60px 10px 0 0;/*top,right,bottom,left*/
text-align: right;
Next introduce a navigation <div> right after the 'header' <div> and put all the table code relating to yuor menu in it:
<div id="header">
<p>Complete Energy Certificates Ltd</p>
</div><!-- we close the header -->
<div id="navigation">
<!-- all table code for navigation goes here -->
</div><!-- we close the navigation -->
Style your naviagtion <div> to have a blue background that matches the menu images:
#navigation {
background-color: #XXX;
Think of contruction as simple building blocks.