We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

CSS Padding problem compatibility between IE and FF

s2000_com
s2000_com asked
on
Medium Priority
555 Views
Last Modified: 2012-06-27
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
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2006

Commented:
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">

--
CERTIFIED EXPERT
Top Expert 2006

Commented:
-- -> -r-
CERTIFIED EXPERT

Commented:
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?
CERTIFIED EXPERT
Top Expert 2006

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

-r-

Author

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 ?

Author

Commented:
The upper side of the border is thicker than the others only under IE !?!??
CERTIFIED EXPERT
Top Expert 2006

Commented:
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-
CERTIFIED EXPERT
Commented:
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.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
CERTIFIED EXPERT
Top Expert 2006

Commented:
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-
CERTIFIED EXPERT

Commented:
Well, I added height to the code and it seemed to work just fine in both Firefox and IE... am I missing something?
CERTIFIED EXPERT
Top Expert 2006

Commented:
I think, I am missing something then. :-)

-r-

Author

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

Author

Commented:
Check the same URL : I've added the fix of Tomeeboy

Author

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....
CERTIFIED EXPERT
Top Expert 2006

Commented:
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-
CERTIFIED EXPERT

Commented:
Changing the padding to:

padding: 3px 3px 3px 3px;

Seems to fix it for me.

Author

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
CERTIFIED EXPERT
Top Expert 2006
Commented:
Try #3, but add line-height:20px;

-r-

Author

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

Thanks guys ! Points are splitted....
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.