Porém, encontrei um problema de incompatibilidade, ao fazer um menu.
No Internet Explorer funcionou perfeitamente, mas no FireFox, a medida da largura parece que aumentou e fica um espaço entre os títulos das seções. Vejam o código completo que utilizei:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Menu</title>
<style>
#navcontainer { width: 153px; }
#navcontainer ul
{
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
}
#navcontainer a
{
display: block;
width: 153px;
background-color: #C0C0C0;
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 4px;
PADDING-TOP: 4px;
BORDER-BOTTOM: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-RIGHT: #000000 1px solid;
}
#navcontainer a:link, #navlist a:visited
{
color: #FF0000;
text-decoration: none;
TEXT-ALIGN: left
}
#navcontainer a:hover
{
background-color: #CCCCFF;
color: #000000; FONT-WEIGHT: bold
}
#title { width: 153px; }
#title ul
{
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 12px;
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
TEXT-ALIGN: center
}
#title p
{
display: block;
width: 153px;
background-color: #000000;
PADDING-RIGHT: 2px;
PADDING-LEFT: 2px;
PADDING-BOTTOM: 4px;
PADDING-TOP: 4px;
BORDER-TOP: #FF0000 1px solid;
BORDER-BOTTOM: #FF0000 1px solid;
BORDER-LEFT: #FF0000 1px solid;
BORDER-RIGHT: #FF0000 1px solid;
}
</style>
</head>
<body topmargin="0" leftmargin="0">
<div id="title"><ul id="titlelist"><p>Título da Seção</p></ul></div>
<div id="navcontainer">
<ul id="navlist">
<a href="http1" title="link title1"><font color="#000000"><b>text1</b></font></a>
<a href="http2" title="link title2"> text2</a>
<a href="http3" title="link title3"> text3</a>
<a href="http4" title="link title4"> text4</a>
<a href="http5" title="link title5"><b><font color="#000000">text5</font></b></a>
<a href="http5" title="link title5"> text5</a>
<a href="http5" title="link title5"> text5</a>
</ul>
</div>
<div id="title"><ul id="titlelist"><p>Título da Seção</p></ul></div>
<div id="navcontainer" style="width: 153; height: 20">
<ul id="navlist">
<a href="http5" title="link title5"> text5</a>
<a href="http5" title="link title5"> text5</a>
<a href="http5" title="link title5"> text5</a>
<p style="margin-top: 0; margin-bottom: 0">
</ul>
</div>
</body>
</html>
Com esse código, no IE fica assim (correto):
Porém no FireFox ou navegadores semelhantes como Opera (apresenta erro):
Sei que há diferenças entre os navegadores, geralmente ocorrem problemas entre o IE e FF ou IE e Opera, pois a maneira em que o IE interpreta (de forma incorreta):
No FF, a dimensão final da caixa é o width + padding. No IE, é somente o width... o padding é aplicado "internamente" a essa largura, mantendo a que especificou como largura final da caixa. Dessa forma o FF, opera, etc, fazem o correto, que é ACRESCENTAR e não DIMINUIR, pois o padding é um acréscimo.
Enfim, levando em consideração o código que utilizei e já sabendo a maneira que os navegadores interpretam, eu não consegui resolver este problema, pois ou funciona perfeitamente no IE ou perfeitamente no FF, Opera...
Haveria alguma maneira de eu resolver este problema de incompatibilidade. Alguém poderia me mostrar um exemplo de hack para o IE para resolver isso?
Obrigado.
