Estoy tratando de hacer un simple html y CSS cosita :
Tengo una enorme div con posición relativa, y luego un montón de enlaces que contiene una posición de absoluta ..

funciona bien en FF y chrome, pero muy mal en IE.

parece que en es decir, el posicionamiento es mala, y también de no obtener la «margin: 0 auto;» cosita..

este es mi código :

HTML:

<div class="wpr">
<a href="http://www.leumi.co.il/" target="_blank" id="leumi"></a>
<a href="http://www.oren-ins.co.il/" target="_blank" id="oren"></a>
<a href="http://www.energy.org.il/" target="_blank" id="energy"></a>
<a href="http://www.lionorl.co.il/" target="_blank" id="leon"></a>
<a href="http://www.calcalist.co.il/" target="_blank" id="yit"></a>
<a href="http://www.yit.co.il/" target="_blank" id="calcalist"></a>
<a href="https://events.eventact.com/runreg/event/regform.aspx?event=4243&company=204&form=1617&account=0&lang=he&login=562974333928" target="_blank" id="register"><img src="sign.gif" alt="register" /></a>

CSS:

.wpr
    {

        background: url('bg_page.gif') no-repeat 0 0 ;
        width: 980px; height: 643px; margin: 0 auto; position: relative;
        }

        #leumi{ position: absolute;  top: 181px; right:96px ; width: 102px; height: 30px; }
        #oren{ position: absolute;  top: 176px; right:227px ; width: 139px; height: 43px; }
        #energy{ position: absolute;  top: 176px; right:380px ; width: 139px; height: 43px;}
        #leon{ position: absolute;  top: 510px; right:812px ; width: 139px; height: 43px; }
        #calcalist{ position: absolute;  top: 584px; right:841px ; width: 139px; height: 43px;}
        #yit{ position: absolute;  top: 579px; right:0px ; width: 139px; height: 43px; }
        #register{ position: absolute;  top: 444px; right:808px ; width: 139px; height: 43px; }
  • Han cerrado el div elemento?
InformationsquelleAutor thormayer | 2012-08-08

4 Comentarios

  1. 2

    Funciona bien en Chrome & FireFox, debido a que corrija automáticamente el código HTML. así que si usted comete un error, como que no se cierre de una <div> van a cerrar por usted.
    Es decir no va a cerrar, y muestra un incorrecto diseño, no es lo que esperaba.
    En ese caso, es decir, es el único navegador que ¿cómo es correcto, sino porque de todos los ataques, todo el mundo pensaría que IE es el navegador que manejan es incorrecta.

    Y para doctype, utilice esto:

    <!doctype html>

    Tu código CSS es que falta algo, <a> es un elemento en línea, por lo que la altura en el ancho no funcionará a menos que la hacen un elemento de bloque.

    .wpr a {display: block;}
  2. 0

    Que tipo de documento y es decir, la versión estás usando?

    Trate de usar;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. 0

    Parece que funcionó para mí, si estoy teniendo una etiqueta de ajuste..
    eso no es la manera más elegante de resolver, pero funcionó.

    Aquí está el código:

        <table align="center" >
    <tr>
    <td>
    <div class="wpr">
        <a href="http://....il/" target="_blank" id="leumi"></a>
        <a href="http://...co.il/" target="_blank" id="oren"></a>
        <a href="http://....il/" target="_blank" id="energy"></a>
        <a href="http://..." target="_blank" id="leon"></a>
        <a href="http://../" target="_blank" id="yit"></a>
        <a href="http://..." target="_blank" id="calcalist"></a>
        <a href="https://events.eventact.com/runreg/event/regform.aspx?event=4243&company=204&form=1617&account=0&lang=he&login=562974333928" target="_blank" id="register"><img src="sign.gif" alt="register" /></a>
    </div>
    
    </td>
    </tr>
    </table>

    CSS :

        table 
    {
        margin: 0 auto;
        width: 980px;
        border-collapse: collapse;
        border-spacing: 0;
    }
        .wpr
        {
    
            background: url('bg_page.gif') no-repeat 0 0 ;
            width: 980px; height: 643px; position: relative;overflow:hidden;
        }
    
            #leumi{ position: absolute;  top: 181px; right:96px ; width: 102px; height: 30px; }
            #oren{ position: absolute;  top: 176px; right:227px ; width: 139px; height: 43px; }
            #energy{ position: absolute;  top: 176px; right:380px ; width: 139px; height: 43px;}
            #leon{ position: absolute;  top: 510px; right:812px ; width: 139px; height: 43px; }
            #calcalist{ position: absolute;  top: 584px; right:841px ; width: 139px; height: 43px;}
            #yit{ position: absolute;  top: 579px; right:0px ; width: 139px; height: 43px; }
            #register{ position: absolute;  top: 444px; right:790px ; width: 139px; height: 43px; }

Dejar respuesta

Please enter your comment!
Please enter your name here