FF vs IE

having problims with them

[Jimmymm]

I am very new in this world, but itīs going be my job for several years. For the moment only i can apport is question and i hope in a couple of month to help to anyone.
Here is my problem and my code:
The text works different in ff and ie, for example the class fitst_letter doesnīt work in ff but ie.
The width in both case are differents so the text-line.
I hope anyone can help. Thanks.
/* Menu */
.FondoMenu{background-color:#DEDBDE;heigt:auto;padding-left:3px;width:100%;border-right:1px solid #DEDBDE;}
.Menu {list-style:none;margin:0;padding:0;}
/*html>body .Menu{list-style:none;margin:1px;padding:1px;}*/
.Menu ul {list-style:none;margin:0;padding:0;}
/*html>body .Menu ul{list-style:none;margin:1px;padding:1px;}*/
.Menu li {list-style:none;margin:0;padding:0;border:0;}
/*html>body .Menu li{list-style:none;margin:1px;padding:1px;}*/
/* Nivel 1 */
.Menu li {border-bottom:1px solid #B5B2B5;border:1px solid green;}
/*html>body .Menu li {height:25px;border:1px solid green;}*/
.Menu li .item {position:relative;background: #fff url('../Images/GbFondoMenu1Santander.gif') repeat-x;margin-left:10px;border-bottom:1px solid #EBEBEB;}
/*html>body .Menu li .item {position:relative;background: #fff url('../Images/GbFondoMenu1Santander.gif') repeat-x;margin-left:10px;border-bottom:1px solid #EBEBEB;}*/
.Menu li .item a {font:11px verdana;text-decoration:none;color:#666666;padding:2px 6px 0px 6px;text-align:right;width:100%;}
/*html>body .Menu li .item a {font:11px verdana;text-decoration:none;color:#666666;padding:2px 6px 0px 6px;text-align:right;width:100%;}*/
.Menu li .item a:first-letter {font-size:200%;}
/*html>body .Menu li .item a:first-letter {font-size:200%;}*/
.Menu li .item .Icono {position:absolute;left:-12px;top:-1px;width:11px;height:19px;}
/*html>body .Menu li .item .Icono {height:23px;}*/
.Menu li .item .FlechaArriba {background-position: -63px 2px;}
/*html>body .Menu li .item .FlechaArriba {background-position: -63px 2px;}*/
.Menu li .item .FlechaAbajo {background-position: -40px 2px;}
/*html>body .Menu li .item .FlechaAbajo {background-position: -40px 2px;}*/

/* Nivel 2 */
.Menu li ul {border:1px solid red;border-top:1px solid #B5B2B5;background-color:#B5B2B5;padding-left:10px;margin-bottom:-1px;}
.Menu li li {border:0;background:#fff;border:1px solid black;}
.Menu li li .item {padding-left:6px;background:#fff;border:0;text-align:left;}
.Menu li li .item a{padding-left:0;text-align:left;background: url('../Images/GbFondoMenu2Santander.gif') bottom repeat-x;line-height:16px;}
.Menu li li .item a:hover{font-weight:bold;}
.Menu li li .item a:active{font-weight:bold;}
.Menu li li .item .Icono {position:absolute;width:11px;height:19px;left:150px;top:-2px;}
.Menu li li .item .FlechaArriba{background-position: -4px 2px;margin-right:6px;}
.Menu li li .item .FlechaAbajo{background-position: -24px 2px;margin-right:6px;}
/* Nivel 3 */
.Menu li li ul {border:0;background:transparent;margin-left:14px;padding:0;padding-bottom:4px;border:1px solid red;}
.Menu li li li {border-bottom:0px solid #fff;margin-left:-14px;padding:0;border:1px solid blue;}
.Menu li li li .item a{background:none;border-bottom: 1px solid #DEDBDE;line-height:16px;margin:0;padding-left:10px;}
.Menu li li li .item a:hover{font-weight:normal;color:#CE0000;}
.Menu li li li .item a:active{font-weight:normal;color:#CE0000;}

[drhowarddrfine]

That's hard to follow. Keep your html and css code seperate and link to a site if you can.

Code for Firefox first. Then adjust it so it will work in IE. IE will screw you up more than anything else because they don't follow the standards correctly in many cases.

[MatthewHSE]

First, welcome to WebmasterWorld, Jimmymm!

That's hard to follow. Keep your html and css code seperate and link to a site if you can.

Actually, here at WebmasterWorld links like that aren't allowed. We prefer code snippets since they will become a permanent part of the board and thus help a lot of people down the road, after an "example" page would be long gone. Also, not allowing links helps prevent the self-promotional spam that pervades so many other tech boards.

With that said, Jimmymm, the code you posted is a little hard to follow. If you post only the relevant portions of your code, you'll find that people are a lot quicker to help than they are if they have to sift through all kinds of code that has nothing to do with the problem.

Code for Firefox first. Then adjust it so it will work in IE. IE will screw you up more than anything else because they don't follow the standards correctly in many cases.

Very good advice. You'll save yourself a lot of trouble to follow this procedure.

Your text size problem is partly due to the fact that you're using relative sizing (200%). I'm a little fuzzy on this topic, but I think the solution is to set a font-size on the body element, normally to 100%. You can then specify font sizes relative to the body font-size.

Be aware that IE handles text sizes in different ways, according to whether it's in standards-compliance mode or not. IE6, in standards mode, will do text pretty much the same as a good browser like Firefox. IE6 in quirks mode, like all previous IE's, tends to do relative font sizes too big (if I remember correctly).