El siguiente código HTML se ve como obligatorio en Firefox 2 & 3 e IE7. El botón Left
está a la izquierda, el botón Right
está a la derecha y el texto en el medio está ... ¡en el medio!Problema de diseño de IE6: posicionamiento absoluto
Sin embargo, en IE6, el botón Left
está desalineado: aparece centrado.
¿Alguien puede sugerir por qué?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout problem!</title>
<style type="text/css">
DIV#Footer
{
padding: 10px;
color: #fff;
background-color: #484848;
position: relative;
text-align: center;
}
DIV#Footer INPUT
{
margin: 5px 15px;
position: absolute;
top: 0px;
}
DIV#Footer INPUT.right
{
right: 0px;
}
DIV#Footer INPUT.left
{
left: 0px;
}
</style>
</head>
<body>
<div id="Footer">
<input class="left" type="button" value="Left" />
Some text in the middle
<input class="right" type="button" value="Right" />
</div>
</body>
</html>
(He estado usando la herramienta de desarrollador de IE para tratar de analizar y solucionar este problema, en vano ...)
¡Eso es bastante peverso! Gracias Jonas. Eso funciona casi a la perfección, ya que parece empujar el ancho de mi div que contiene en un par de píxeles en IE6. –
Establecer el zoom cambiará el cursor. Puede que desee limitar esto a IE6 solo anteponiendo un _ a la regla. –
No veo ningún problema de cambio de cursor Bjorn –