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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox Padding Query

    I have a number of sites that have the following code:

    A.navmenu
    {
    font-family : Arial, san-serif;
    font-size : 10px;
    color : #3785B6;
    text-decoration : none;
    font-weight: bold;
    height: 31px;
    background-color: #FFFFFF;
    padding: 10px 10px 3px 15px;
    border-bottom: 1px solid #ffffff;
    display: block;
    background-image: url(images/but_back.gif);
    background-repeat: no-repeat;
    text-justify: distribute;
    }

    A.navmenu:hover
    {
    font-family : Arial, san-serif;
    font-size : 10px;
    color : #FFA100;
    text-decoration : none;
    font-weight: bold;
    height: 31px;
    background-color: #ffffff;
    padding: 10px 10px 3px 15px;
    border-bottom: 1px solid #ffffff;
    display: block;
    background-image: url(images/navb1.gif);
    background-repeat: no-repeat;
    TEXT-DECORATION: underline;
    text-justify: distribute;
    }
    Which works excellent in IE but when viewed in Firefox the padding pushes the images apart by the pixels (outwardly) rather than (inward with the text).

    This is a newbie so be gentle.

    Really would appreciate a fix.

    TIA-Mindfix.

  • #2
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi there,

    It's actually working the way it's supposed to in Firefox. It's called the CSS Box Model, and it lays out the way margins and padding affect the "box" that elements take space in. Margins, border, and padding are added to the content width rather than fill the space inside of it. IE gets it wrong and uses the other method, unless you are using a strict doctype and IE6.

    So, an image that has a 100px width, with "padding: 15px," "margin: 10px," and "border: solid 1px #000" applied has a total width of 152px (10px margin on the left, 1px border, 15px padding, 100px image, 15px padding on the right, 1px border, 10px margin).

    I forget where the link is, but if you search Google for the "Box Model Hack" you'll get a great explanation and workaround for IE. Hope this helps...


  •  

    Posting Permissions

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