...

View Full Version : Firefox Padding Query



Mindfix
02-08-2005, 06:39 AM
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.

Mindfix
02-08-2005, 06:40 AM
http://www.california-spinal-cord-injury-lawyers.com/

This is one of the sites.

rmedek
02-08-2005, 08:06 AM
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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum