http://www.gillianarcherdesign.co.uk/

It appears as I want in later versions of IE but have issues with firefox

It seems to be problems with margins

Also have reports that the background image - the faded box does not appear & not sure why really

I am also unsure why my font looks different in firefox too

* {margin: 0; padding: 0;}

body {
scrollbar-face-color: #FDF5E6;
scrollbar-arrow-color: #AB865E;
scrollbar-track-color: #FDF5E6;
scollbar-highlight-color: #AB865E;
scrollbar-darkshadow-color: #FDF5E6;
scrollbar-3dlight-color: #FDF5E6;
scrollbar-shadow-color: #AB865E;
font-family:Arial, Helvetica, sans-serif;
margin-top:2px;
color:#003333;
list-style-type: circle;
font-size:100%;
background-color:#B3CE6D; /*#445D1E;*/
/*background-image:url(../Graphics/Backgrounds/032-background-500.jpg);
background-repeat:no-repeat;*/}

body,input
{
font-size: 85%;
font-family: Arial, Helvetica, sans-serif;
color: #003300;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #B96D00;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}


h1 span
{
font-weight: normal;
}

h1,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}

h1
{
font-size: 1.35em;
padding-right: 34px;
background-image:url(../Graphics/Misc/db1-3.gif);
}
/* ------ Page Layout Id's ------------ */
#wrapper2{
width:800px;
position:relative;
margin: 0 auto;
z-index: 1;
}
/* ------ Background Area - Graphics ------------ */

#header { height:68px; }
#linksbar { height:51px;
background-image:url(../Graphics/layout11-slices/Transparent-box2_r1_c1.png); background-repeat:no-repeat; }
#middle { height:420px; background-image:url(../Graphics/layout11-slices/layout11_r2_c1.png);
background-repeat:no-repeat; }
#middle-repeat { background-image:url(../Graphics/layout11-slices/Transparent-box2_r2_c1.png); background-repeat:repeat-y;}
#footer-graphic { height:70px; background-image:url(../Graphics/layout11-slices/Transparent-box2_r3_c1.png); background-repeat:no-repeat;}

#picture-panel
{
position: relative;
margin: 0 auto;
width:650px;
}
#picture-panel2
{
margin: 0 auto;
width:733px;
}

/* ------ Inside Area Layout ------------ */
#links {width: 680px;
height:25px;
padding-top:9PX;
background-color:#FFFFCC;
filter: progidXImageTransform.Microsoft.BasicImage(opaci ty=.8);
opacity: .8;
text-align:center;
margin-left: 55px;
margin-top:8px;
font-size:90% }

#Column1, #Column2
{ float:left;
z-index: 2;
margin-top: 8px;
}
#Column1 {
width: 510px;
padding: 3px;
/*background-color:#FFFFFF;
filter: progidXImageTransform.Microsoft.BasicImage(opaci ty=.9);
opacity: .9; /*border:1px solid #2C7FB6;*/
text-align:left;
margin-left: 8px;}

#Column2 {
width: 150px;
padding: 5px;
/*background-color:#FFFFFF;
filter: progidXImageTransform.Microsoft.BasicImage(opaci ty=.9);
opacity: .9; /*border:1px solid #2C7FB6;*/
text-align:left;
margin-left: 60px;}

#column-main {
width: 720px;
padding:5px;
margin-left:35px;}

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

/* -------------------- Menu styles ------------------------ */
#menu {
width: 730px;
height:25px;
padding-top:9PX;
background-color:#FFFFCC;
filter: progidXImageTransform.Microsoft.BasicImage(opaci ty=.8);
opacity: .8;
/*background-image:url(../graphics/Layout-2008/layout_r2_c1.png); */
color:#1D3B3B;
text-align:center;
font:normal 11px Verdana;
/*font-family:Verdana, Arial, Helvetica, sans-serif; */
line-height:1.7em;
font-weight: bold;
margin-left: 35px;
margin-top:8px;}

#menu a { color:#1D3B3B;}
#menu a:hover {color: #6699CC}

/* drop down menu styles for drop down menu ************************** */
#dropmenudiv{
position:absolute;
border:0px solid black;
border-bottom-width: 0;
font:normal 11px Verdana;
line-height:16px;
z-index:100;
color: #FFF03C/*#336699;#CC9966*/;
}
.dropmenudiv a:link {font-size: 10px; color: #1D3B3B/*#CC9966*/; text-decoration: none;font-weight: bold;}
.dropmenudiv a:visited {font-size: 10px; color: #000000; text-decoration: none;font-weight: bold;}
.dropmenudiv a:active {font-size: 10px; color: #000000; text-decoration: none;font-weight: bold;}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
color:#FFFFFF /*#FFFFFF#CC9966*/
}

#dropmenudiv a:hover{ /*hover background color*/
background-color:#FFFFCC;/*CC9966* #15406C */;
color:#1D3B3B;
}

/* ------ Page styles classes ------------ */
.green-header { font-size:110%; font-family: Arial, Helvetica, sans-serif; font-weight:normal; background-color:#95B56A; color:#FFFFCC;}

.source-image {
width:100%;
position:absolute;
top:0px;
left:0px;
z-index: 0;
}

/* ------ HTML tags defined ------------ */
p { font-size:90%; padding-left:2px; text-align:justify; padding-right:5px;}
a {color:#504651; text-decoration:none;}
a:hover { text-decoration:underline;}
h2 { margin:0px; padding-bottom: 10px; font-size:170%; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal;}
h3 { font-size:130%; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal; padding-bottom:1em;}
legend { color:#FFFFFF; font-size:110%; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:normal;}

#Column2 h2 {color:#1D3B3B;
text-align:left;
font:normal 90% Verdana;
line-height:1.7em;
background-color:#95B56A;
font-weight:bold;
padding:2px;}

img.clean
{
border: solid 0px #6F5230;
}
img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
padding:2px;
}

img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;}

.contentarea
{
padding-top: 1.3em;
}
.contentarea table
{ font-weight:bold;
}

/* -------------------- Footer styles ------------------------ */
#footer { width: 730px;
height:25px;
padding-top:9PX;
color:#1D3B3B;
text-align:center;
font:normal 11px Verdana;
/*font-family:Verdana, Arial, Helvetica, sans-serif; */
line-height:1.7em;
font-weight: bold;
margin-left: 35px;
font-size:100%}

#footer a { color:#1D3B3B;}
#footer a:hover {color: #6699CC}

/* -------------------- EndLinks Menu styles ------------------------ */
#endlinks {
width:820px;
margin: 0 auto;
height:20px;
padding-top:0px;
color:#1D3B3B;
text-align:center;
font:normal 11px Verdana;
/*font-family:Verdana, Arial, Helvetica, sans-serif; */
line-height:1.7em;
font-weight: bold;
margin-top:0px;}

#endlinks a { color:#FFFFFF;}
#endlinks a:hover {color: #6699CC}

.hlinks { visibility:hidden; color:#000000; position:relative; text-align:center}

I know there is some redundant CSS code - I have not used the drop menu & also as been working changed some code & not removed from all my CSS - I will clean it up I promise - plus don't scream at me I know I still have tables for content I wanted to get it up & working before I sorted that out xxx

I'm seeing the faded box in Firefox 3.0.5 in WinXP. What version/OS does the problem show up under ?

As for the #linksbar in FF, you're seeing margin-collapse (not a bug). Add padding-top: 1px to #linksbar and the bar will go to where it belongs. You will then have to adjust adjust the height to 50px instead of 51px on that same div.

I did see that the faded box background IS missing in IE6.

Hello LadynRed once again

I will ammend the code on the menu

Do you know why the faded box is missing in IE6??? Any clues ?

Hope you are well. Tonya