I have built a website for a customer.

http://www.bitsmail.co.uk/TheDell/index.html
Thanks to LadynRed my CSS use has got considerably better I just suffer from some small issues now mostly related to cross browser compatability.

In this case the site views fine in IE but in Firefox the menu is displaced.

Can anyone suggest an answer

here is my CSS (or the bits that matter anyway)

.a {color:#1D3B3B; text-decoration:none;}
a:hover { text-decoration:underline;}

/* ------ Page Layout Id's ------------ */

#wrapper{ width:750px; position:relative; margin: 0 auto; }
#header{}
#infobar{ background-image:url(../graphics/layout/layout_r5_c1.gif);
background-repeat:no-repeat; margin:0px; height:35px;}
#infobar p{color:#1D3B3B; font-size:70%; text-align:center;}
.infobar{color:#1D3B3B; font-size:70%; text-align:center;}

#page{ background-image:url(../graphics/layout/layout_r3_c1.gif); margin:0px;}
#inner { width:99%;}
.page-inner { float:left; margin:0px 0px 0px 5px; padding: 5px 0px 0px 0px; width:99%;}
#menubar, #main
{float:left; }

/* Menu layout Id's & styles */
#menubar { width: 150px;
background-color:#FFFFFF;
line-height:1.4em;
padding: 3px 5px 3px 0px;
margin-left:6px;
margin-top:5px;
font-size:78%;}
#menubar ul { margin-left:0px;}
#menubar li { list-style:none; margin-left:0px; list-style-position:inside; }
/* top right bottom left*/

.menu {background-color:#FFFFFF;
line-height:1.4em;
padding: 3px 5px 3px 0px;
margin-left:6px;
margin-top:5px;
font-size:78%;
width:145px;}
.menu ul{ margin-left:0px;}
.menu li{ list-style:none; margin-left:0px; list-style-position:inside;}
.menu-link1 {background-color:#FFF03C; color:#1D3B3B;}
.menu-link2 { background-color:#FFF147; color:#1D3B3B;}
.menu-link3 { background-color:#FFF253; color:#1D3B3B;}
.menu-link4 { background-color:#FFF46A; color:#1D3B3B;}
.menu-link5 { background-color:#FFF581; color:#1D3B3B;}
.menu-link6 { background-color:#FFF798; color:#1D3B3B;}
.menu-link7 { background-color:#FFFABA; color:#1D3B3B;}
.sub-menu { padding-left:8px;}

#main { margin-left:5px; margin-right: 2px; width: 557px; padding:4px;}

.columnA, .columnB
{float:left; width:310px; margin-left:20px; padding:2px; }
.columnAA{ padding-left:0px; padding-top:5px;}
.columnAA p{ padding-left:0px;}
.columnA{ padding-left:20px; font-size:12px;}
.columnB{ padding-left:10px; font-size:12px;}
.columnC{ width:720px;
text-align:center;
padding-left:20px;
padding-right:20px;
font-size:12px;
float:left;}

.img-yellow { *border: 1px solid #FF0000; padding:3px;}
.red { color:#FF0000;}

/* footer section */
#footer{ text-align:center; line-height:1.4em;
padding:2px;
background-image:url(../graphics/layout/layout_r6_c1.gif);
font-size:90%;
font-weight:bold;}
#footer2{ text-align:center;
line-height:1.4em;
padding:2px;
font-size:80%;
height:59px;
color:#FFFFFF;
background-image:url(../graphics/layout/layout_r7_c1.gif);
background-repeat:no-repeat;}

#footer p{}/* top right bottom left*/
.footer{ font-size:100%; margin: 0px; padding: 0px; color:#F4FF00; }
#footer2 p{ font-size:80%;}
#footer2 a{ color:#F4FF00;}

#endlinks{ position:relative; margin: 0 auto;
color:#F7FF3C;
text-align:center;
padding:8px;
font-size:70%;
font-family:Verdana, Arial, Helvetica, sans-serif; }
#endlinks a{color:#F7FF3C;}
#endlinks a:hover { color:#FFFFFF;}

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0px;
}

Here is the HTML inside the body section

<div id="wrapper">
<div id="header"><img src="../graphics/layout/layout_r1_c1.jpg" alt="The Dell House Bed and Breakfast Malvern, Worcestershire" width="750" height="130" /></div>
<!-- end header-->
<div id="infobar">
<p class="infobar">The Dell House, Green Lane, Malvern Wells, Worcestershire, WR14 4HU&nbsp; <br />
Phone: 0044 (0) 1684 564448 &nbsp; &nbsp;Fax: 0044 (0) 1684 893974 &nbsp; &nbsp;
Email:<a href="mailto: burrage@dellhouse.co.uk"> burrage@dellhouse.co.uk</a></p>
</div>
<!-- end infobar -->
<div id="page">
<div class="page-inner">
<div id="menubar">
<ul>
<li class="menu-link1"><a href="../index.html">Home</a></li>
<li class="menu-link1"><a href="../Dell-house-area.html">The House &amp; Area </a></li>
<li class="menu-link2"><a href="../B&amp;B-the-dell-page.html"> B&amp;B </a>
<ul>
<li class="sub-menu"><a href="../B&amp;B-your-stay-dell.html">Your stay at The Dell</a> </li>
<li class="sub-menu"><a href="../B&amp;B-bedrooms.html">Bedrooms</a></li>
<li class="sub-menu"><a href="../B&amp;B-tariff.html">Tariff</a></li>
<li class="sub-menu"><a href="../B&amp;B-booking-info.html">Booking Information </a></li>
</ul>
</li>
<li class="menu-link3"><a href="../SC-the-dell-page.html">Self Catering
</a>
<ul>
<li class="sub-menu"><a href="../SC-accommodation.html#CoachHouse">Coach House</a></li>
<li class="sub-menu"><a href="../SC-accommodation.html#OldNursery">The Old Nursery Apt</a> </li>
<li class="sub-menu"><a href="../SC-accommodation.html#Butlers">The Butler's Apt</a></li>
<li class="sub-menu"><a href="../SC-Facilities.html">Facilities</a></li>
<li class="sub-menu"><a href="../SC-Tariff.html">Tariff</a></li>
<li class="sub-menu"><a href="../SC-Booking-form.html">Booking Form SC </a></li>
</ul>
</li>
<li class="menu-link4"><a href="../The-Dell-House-contact.html">Contact</a></li>
<li class="menu-link5"><a href="../The-Dell-House-Directions.html">Directions</a> </li>
<li class="menu-link5"><a href="../specials.html">Extras &amp; Offers </a></li>
<li class="menu-link7"><a href="http://www.metoffice.gov.uk/weather/uk/wm/wm_forecast_weather.html" target="_blank">Weather</a></li>
</ul>
<!-- TemplateBeginEditable name="Left" -->Left<!-- TemplateEndEditable --></div>
<!-- end menubar -->
<div id="main"><!-- TemplateBeginEditable name="Main" --> T<!-- TemplateEndEditable --></div>
<!-- end main -->
<span class="brclear" >&nbsp;</span>
</div>
<!--end page inner class--><div class="brclear" />
</div><!--end page -->
<div id="footer"> How to contact Dell House:</div>
<!-- end footer-->
<div id="footer2">Phone: 0044 (0) 1684 564448 &nbsp; &nbsp;Fax: 0044 (0) 1684 893974 <br />
Email:<a href="mailto: burrage@dellhouse.co.uk"> burrage@dellhouse.co.uk</a><br />
Ian &amp; Helen Burrage, The Dell House, Green Lane, Malvern Wells, Worcestershire,
WR14 4HU</div>
<!-- end footer 2-->
</div><!-- end wrapper-->
<div id="endlinks"><a href="../index.html">home</a> | <a href="../Dell-house-area.html">house &amp; area </a>| <a href="../B&amp;B-the-dell-page.html">B&amp;B</a> | <a href="../B&amp;B-your-stay-dell.html">your stay at The Dell House</a> | <a href="../B&amp;B-bedrooms.html">B&amp;B bedrooms</a> | <a href="../B&amp;B-tariff.html">B&amp;B tariff </a> | <a href="../B&amp;B-booking-form.html">B&amp;B booking info</a><br />
<a href="../SC-the-dell-page.html">self catering</a> | <a href="../SC-accommodation.html#CoachHouse">the Coach House</a> | <a href="../SC-accommodation.html#OldNursery">the Old Nursery Apt </a> | <a href="../SC-accommodation.html#Butlers">the Butlers Apt</a> | <a href="../SC-Facilities.html">SC facilities </a> | <a href="../SC-Tariff.html">SC tariff </a> | <a href="../SC-Booking-form.html">SC booking form</a><br />
<a href="../The-Dell-House-contact.html">contact</a> | <a href="../The-Dell-House-Directions.html">directions</a> | weather </div>

I fixed it all on my own. I found out that if you set the doctype to standard you need to remove all browser standard code defaults.

EG li & ul in ie use a margin setting where in firefox they use padding.

So if you set the defaults to 0px then set the required margin or padding in a custom style you are sorted.

All my CSS needed was this

ul { margin:0px; padding:0px;}
li { margin:0px; padding:0px;}

Yep.. what I usually do is zero out EVERYTHING from the beginning, which you can do this way:

* {margin: 0; padding: 0;}

ha ha the lady of knowledge! hello hello

Thanks for that tip. I will do that in future. Now that I have read what the issue is it makes sense really to ensure that none of the set defaults play with your script at all. To begin with I had no idea why it was happening.

Is it the same thing that makes the most recent version of IE behave differently?

BTW I hope you are well.

Is it the same thing that makes the most recent version of IE behave differently?

Not exactly. IE 6 is the problem here because it is so non-standards compliant and so full of bugs. IE7 is actually better in that MS finally capitulated and listened to the hoarde of screaming designers and they made it better when it comes to standards. It still has some bugs, but nowhere near the infestation of IE 6.