CSS border/padding problems in Firefox/Opera/others [Archive]

tonyfurnell

10-03-2007, 05:04 PM

I'm currently giving myself a crash course in CSS to try and update a local club's web site -- ultimately I'd like to have a non-tables site, but I'm getting the usual couple of teething troubles.

The page I'm working on is at http://quis.qub.ac.uk/caving/ndigging.php
The original page is: http://quis.qub.ac.uk/caving/ndigging.htm
(ignore the bugginess of second page, it was compiled poorly in CSS and I won't be needing it once the PHP page is finished)

When viewing the new page in Mozilla/Opera/Firefox, the size of the top border of the main div, "#frame" (the black background/surround) is increased -- while the page looks fine in IE and a few other browsers.

Screenshot from FF:
5726

CSS code for the box is as follows:
#frame {
position:relative;
width:792px;
margin-right:auto;
margin-left:auto;
top:10px;
text-align:left;
background:#000000;
border: 4px solid #000000;
}Now, when I change border to 0px, there's no border, just like normal. as soon as I add any border width (even 1px) the top border shoots up to 10px in size.

I've tried interchanging border code for padding, but exactly the same thing happens. Can anyone tell me where I'm going wrong?

tonyfurnell

10-03-2007, 05:27 PM

Excellent, thanks a million jlhaslip! And within 8 minutes too :thumbsup: I've been banging my head against this one for the past day.

Strange that it needed to be specified; there was no margin value included previously -- any idea why there would have automatically been a margin present in FF/Opera etc?