CSS Padding problem compatibility between IE and FF

Hi Gurus !

I rate this Q to 500 cuz' this makes me crazy and it's urgent (Have to publish asap) :-)

Is somebody can explain me why the appearance is different between Internet Explorer 6.0 and FF 1.5 with the following style code. The border in IE is larger than in FF : Why ?

.mynav
{
      font-family: Verdana, Arial, Helvetica, sans-serif;
      padding: 3px 4px 3px 4px;
      border: 1px #004E8C solid;
      text-decoration: none;
      font-weight: bold;      
      font-size: 10px;
      color: #FFFFFF;
      text-align: center;
      background-color: #004E8C

}

a.mynav:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration: none}
a.mynav:visited {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration: none}
a.mynav:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration: none; background-color: #336699}
a.mynav:active {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; text-decoration: none}

TIA,

Phil
s2000_comAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
Hi Phil,

This would mainly depend on the doctype you are using. When msIE is running in quirksmode and not using the correct box model you run, there are many difference in the way code renders in IE, or in Firefox.

Do you have a doctype, and if not, try to add this to the very top of your html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">

--
0
RoonaanCommented:
-- -> -r-
0
TomeeboyCommented:
You may want to try adding:

margin: 0px;

To the .mynav style.   If that doesn't help, could you be a little more specific about what it's doing?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RoonaanCommented:
margin should have nothing to do with the size of the border.

-r-
0
s2000_comAuthor Commented:
Roonann : I have this on the top of the page : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. Your suggestion doesn't resolve the problem....

Tomeeboy : no change with margin.

Here is a sample (extraction from the production) : http://www.pkl.ch/en/testcss.html

Any other tips ?
0
s2000_comAuthor Commented:
The upper side of the border is thicker than the others only under IE !?!??
0
RoonaanCommented:
Try setting the line-height property and setting it to 16px or something:

line-height:16px;

It might be that you have to remove the top and bottom padding though.

-r-
0
TomeeboyCommented:
Okay, didn't realize what exactly you were having a problem with until seeing the example.  Your problem is that the table row containing your links is set to a height of 20, but your links aren't tall enough to fill that in.  Try adding this to the CSS for .pklnav:

height: 20px;

See if that gives you the desired effect.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RoonaanCommented:
You can't assign height to inline-type elements. You would then have to switch to display:block or just set the line-height as proposed.

-r-
0
TomeeboyCommented:
Well, I added height to the code and it seemed to work just fine in both Firefox and IE... am I missing something?
0
RoonaanCommented:
I think, I am missing something then. :-)

-r-
0
s2000_comAuthor Commented:
Tomeeboy : With height: 20px;, it's working BUT now the rest of the row is okay in IE but NOTin FF (thiner) !?!?

0
s2000_comAuthor Commented:
Check the same URL : I've added the fix of Tomeeboy
0
s2000_comAuthor Commented:
The original page without the fix : http://www.pkl.ch/en/testcss_ori_1.html

If you compare the height is also different in IE between both samples....
0
RoonaanCommented:
You have to remove the padding. FireFox ads it to the total height, while Internet explorer doesn't

change it to:
padding: 0px 4px 0px 4px;

-r-
0
TomeeboyCommented:
Changing the padding to:

padding: 3px 3px 3px 3px;

Seems to fix it for me.
0
s2000_comAuthor Commented:
Refresh the same URL ( http://www.pkl.ch/en/testcss.html ), I implemented all the solutions you wrote in the same page : none is working correctly in IE and FF !!!!

The last one (4) is okay under IE but under FF, the rest of the row is thiner !?!?

Sorry guys but it's not yet fixed for me... You can copy-paste and try in local if you prefer...

Thanks in advance,

Phil
0
RoonaanCommented:
Try #3, but add line-height:20px;

-r-
0
s2000_comAuthor Commented:
OKay ! It's working on IE + FF by changing the height also in the <TR> tag !

Thanks guys ! Points are splitted....
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.