Somewhere in my CSS or code there is a problem - this is an issue between ie & firefox.

The site looks fine in IE - but in firefox the footer is shunted down & I am not sure why

Can anyone help ???

Here is the basic page code

<div id="wrapper">
<div id="header"></div>
<div id="flashline"> header graphic goes here </div>
<div id="linksbar" class="linksbar"><a href="../home.html">Home</a> | <a href="../rooms.html">Our Rooms</a> | <a href="../food+drink.html">Food &amp; Drink </a>| <a href="../self-catering.html">Self Catering</a> | <a href="../corporate.html">Corporate</a> | <a href="../tariffs.html">Tariffs</a> | <a href="../location-links.html">Location &amp; Links </a></div>
<div id="middle"><!-- TemplateBeginEditable name="Middle" -->
<div id="midA">
<p>&nbsp;</p>
<p>space</p>
</div>
<div id="midB">
<h1>Welcome </h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<br class="brclear" />
&nbsp;<!-- TemplateEndEditable --></div>
<!-- end middle section-->
<div id="footer">
<div id="footA">
<p class="footer">Mark &amp; Alexandra Soden<br />
Treherne House &amp; <span class="footer-small">The Malvern Retreat</span><br />
54 Guarlford Road, malvern, Worcestershire<br />
WR14 3QP
</p>
</div>
<div id="footB">
<p class="footerB">Tel / Fax 0044 (0)1684 572445 <img src="../Images/logos/RoutiersLogo.gif" width="60" height="60" align="middle" /> &nbsp; <img src="../Images/logos/fsb-logo.gif" width="60" height="60" align="middle" /></p>
</div>
<br class="brclear" />&nbsp;
</div>
<!--end of page bits-->
</div>
<!-- div ends wrapper-->

Here are the page layout CSS bits

/* ------ Page Layout Id's ------------ */
#wrapper, #header, #linksbar, #footer {
padding-left:0px;}
#wrapper{ width:800px; position:relative;
margin: 0 auto;}
#header { height:134px;
background-image:url(../Images/nov-layout3/layouts_r1_c1.png);}
#flashline { height:100px;
background-image:url(../Images/nov-layout3/layouts_r2_c1.png); }
#linksbar { height:21px;
background-image:url(../Images/nov-layout3/layouts_r3_c1.png); }
#middle { background-image:url(../Images/nov-layout3/layouts_r4_c1.png);
background-repeat:repeat-y; }
#middle-inner { margin:0px; padding:0px; }

#midA, #midB, #midC { float:left;}
#midA { width:250px; padding-left:5px;}
#midB { width:530px; margin-top:4px; padding: 3px 0px 0px 0px; /*background-color:#6E6968;*/}
#midC { width:780px; padding-left:5px; }

#footer { height:94px;
background-image:url(../Images/nov-layout3/layouts_r6_c1.png);
padding: 3px 0px 0px 0px;
background-repeat:no-repeat;}
#endlinks {}

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

This small error is the last thing for me to do !!

Is there CSS for footA and footB ?

are you talking about the background images being shunted down?
if so that is due to padding and its not anything wrong with FF, its wrong with IE, (yay, i just learnt that), NN, Opera, FF, all have that problem.
Im having this problem aswell.
my thread: http://www.webmaster-talk.com/css-forum/112197-padding.html
ive phrased the question differently because i already know the cause of whats shunting it down.

please tell me if i have misunderstood your question.

EDIT: it would be nice if we could have a link to the website you are working on.

THere is now a solution to my problem in my thread so if the problem is the same you should be able to work it out.

Padding in a div does NOT, repeat NOT, affect images set as backgrounds on a div.

Something else is happening, but it's hard to diagnose w/o seeing all the code.

Originally Posted by LadynRed

Padding in a div does NOT, repeat NOT, affect images set as backgrounds on a div.

It did with mine, and I know thats what it was because I tested it, looked at it once with padding: 20px; and once with padding: 0; and changed nothing else and the background moved.

heres the thread I made, in the end we made a seperate DIV and positioned it relatively. click here.

I dont mean to be rude or anything, you are a super moderator, you should know but I have recently had experience with this problem.

I'm sorry, but padding inside a div does not affect a background image, trust me, I use padding on divs with backgrounds every day. The only thing that will affect the position of a background image is the position properties of the background rule and it accepts top, bottom, left, right as well as numeric values to position a background image.

I don't know exactly what was happening with yours, nor what browser was being affected, whatever it was, it wasn't padding. Position:relative can 'cure' a lot of IE's bugs by giving an element 'hasLayout', and that is the reason why your problem was solved - it wasn't the padding.

Here is all the css code as requested - I dont think its padding as I have never experienced that padding issue before.

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:Georgia, "Times New Roman", Times, serif;
margin-top:2px;
color: #FFFFFF;
list-style-type: circle;}

.back-pale {background-image:url(../Images/backgrounds/nov-layout1-back.gif);
background-repeat:repeat;}
.back-dark { background-image:url(../Images/layout/background-gray.gif);
background-repeat:repeat;}
.back-pink1 { background-image:url(../Images/layout/background-pink1.gif);
background-repeat:repeat;}
.dark { background-image:url(../Images/backgrounds/back-small-dark.gif); }

/* ------ Page Layout Id's ------------ */
#wrapper, #header, #linksbar, #footer {
padding-left:0px;}
#wrapper{ width:800px; position:relative;
margin: 0 auto;}
#header { height:134px;
background-image:url(../Images/nov-layout3/layouts_r1_c1.png);}
#flashline { height:100px;
background-image:url(../Images/nov-layout3/layouts_r2_c1.png); }
#linksbar { height:21px;
background-image:url(../Images/nov-layout3/layouts_r3_c1.png); }
#middle { background-image:url(../Images/nov-layout3/layouts_r4_c1.png);
background-repeat:repeat-y; }
#middle-inner { margin:0px; padding:0px; }

#midA, #midB, #midC { float:left;}
#midA { width:250px; padding-left:5px;}
#midB { width:530px; margin-top:4px; padding: 3px 0px 0px 0px; /*background-color:#6E6968;*/}
#midC { width:780px; padding-left:5px; }

#footer { height:94px;
background-image:url(../Images/nov-layout3/layouts_r6_c1.png);
padding: 3px 0px 0px 0px;
background-repeat:no-repeat;}
#endlinks {}

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

/* top right bottom left*/

/* ------ Page styles classes ------------ */
.linksbar { color:#000000; text-align:center;
padding: 4px 2px 1px 2px; font-size:80%;
font-family:Georgia, "Times New Roman", Times, serif; }
.footer { font-family:Georgia, "Times New Roman", Times, serif;
text-align:center; padding: 4px 0px 0px 0px; font-size:80%;}
.footer-small { font-family:Georgia, "Times New Roman", Times, serif;
text-align:center; padding: 4px 0px 0px 0px; font-size:85%;
font-style:italic;}
.footerB { font-family:Georgia, "Times New Roman", Times, serif;
text-align:left; padding: 8px 0px 0px 8px; vertical-align:middle;
font-size:115%;}
#footA, #footB { float:left;}
#footA { width:360px; padding-left:5px;}
#footB { width:420px;}

/* ------ HTML tags defined ------------ */
p { font-size:90%; padding-left:5px; text-align:justify;}

a {color:#333366; text-decoration:none;}
a:hover { text-decoration:underline;}

.tariff { font-size:100%; padding-left:5px;}

.imgclass { z-index:1;}
.flashclass { z-index:2;}
.black { color:#333366;}

.black a{ color:#333366;}
.white { color:#FFFFFF; text-decoration:none;}
.gray { color:5E605F; }

h1 { margin:0px; padding: 3px; font-size:170%;}

legend { color:#FFFFFF; font-weight:bold; font-size:110%;}

I thought padding was about what was placed inside the div not what was placed as background image inside the div ???

my instinct is that its something else - but I am not sure what - I have no illusions that there will be people who say its an IE fault or a firefox fault - wherever the fault problem can be laid is kind of neither here nor there - discrepancies between the two types of browsers are an issue I am getting better at sorting but this has me well um - foxed !!

Originally Posted by tonya

I thought padding was about what was placed inside the div not what was placed as background image inside the div ???

well technically its just supposed to be the content, but as i say, in FF and NN it was resolved that this was my problem.

Well, I finally figured it out. The box was getting pushed down by an 18px top and bottom margin - which is NOT in your code. The solution is to ZERO OUT your margin and padding on ALL elements first and you can do it like this: *{margin: 0; padding: 0;}
Once I did that, the boxes look the same in FF and IE.

I thought padding was about what was placed inside the div not what was placed as background image inside the div ???

You are correct, it has no effect on background images. IE, of course, applies padding differently with it's busted box model.

So where do I put the 0 margin & padding ??

another class in CSS or add it somehow to all elements is that what the * is for ??

sorry to be dumb !!

The * means 'apply to everything', so just put the rule * {margin: 0; padding: 0;} at the top of your CSS file and you're good to go