Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Location
    Belfast, Ireland/UK
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy CSS border/padding problems in Firefox/Opera/others

    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:
    CSS border/padding problems in Firefox/Opera/others-css-padding-screen.png

    CSS code for the box is as follows:
    Code:
    #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?

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Code:
    p.prefix {
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    font-weight:bold;
    margin-top:0pt;
    padding:10px;
    }
    eliminate the margin-top of this class

  • Users who have thanked jlhaslip for this post:

    tonyfurnell (10-03-2007)

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    He beat me damn :S

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Location
    Belfast, Ireland/UK
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excellent, thanks a million jlhaslip! And within 8 minutes too 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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •