Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS Padding problem compatibility between IE and FF

Posted on 2006-03-20
19
Medium Priority
?
521 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
0
Comment
Question by:s2000_com
  • 8
  • 7
  • 4
19 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16237291
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16237294
-- -> -r-
0
 
LVL 15

Expert Comment

by:Tomeeboy
ID: 16237312
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 49

Expert Comment

by:Roonaan
ID: 16237372
margin should have nothing to do with the size of the border.

-r-
0
 

Author Comment

by:s2000_com
ID: 16239568
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
 

Author Comment

by:s2000_com
ID: 16239588
The upper side of the border is thicker than the others only under IE !?!??
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16239668
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
 
LVL 15

Accepted Solution

by:
Tomeeboy earned 1000 total points
ID: 16239863
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16239903
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
 
LVL 15

Expert Comment

by:Tomeeboy
ID: 16239932
Well, I added height to the code and it seemed to work just fine in both Firefox and IE... am I missing something?
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16239999
I think, I am missing something then. :-)

-r-
0
 

Author Comment

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

0
 

Author Comment

by:s2000_com
ID: 16240546
Check the same URL : I've added the fix of Tomeeboy
0
 

Author Comment

by:s2000_com
ID: 16240595
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 16240606
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
 
LVL 15

Expert Comment

by:Tomeeboy
ID: 16240630
Changing the padding to:

padding: 3px 3px 3px 3px;

Seems to fix it for me.
0
 

Author Comment

by:s2000_com
ID: 16240987
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
 
LVL 49

Assisted Solution

by:Roonaan
Roonaan earned 1000 total points
ID: 16241044
Try #3, but add line-height:20px;

-r-
0
 

Author Comment

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

Thanks guys ! Points are splitted....
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month14 days, 20 hours left to enroll

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question