width 100% ie

[andoniroy]

este es mi problema: estoy haciendo una web donde tengo una capa pegada al borde de arriba del navegador. Le puse width:100% y en IE no me la dimensiona entera.

Aqui esta el codigo CSS:

Código CSS:

.tb {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: #000;
}
 

[gdls]

No utilices porcentaje, utiliza Pixeles. asi seria mejor y mas compatible.

[IsaBelM]

usa la regla !important. también prueba con la propiedad min-width

[fishdesign]

Quítale el width y, en teoría (ya se sabe como es IE), debería cogerte todo el ancho de la ventana de manera automática.

Un saludo

[IsaBelM]

Iniciado por fishdesign

Quítale el width y, en teoría (ya se sabe como es IE), debería cogerte todo el ancho de la ventana de manera automática.

Un saludo

sí, es lo que tiene ie. que es así de caprichoso. de donde sacas esos??

.tb {
position: absolute;
top: 0px;
left: 0px;
/*width: 100%;*/
height: 50px;
background-color: #000;
}


<div class="tb">
el width es este
</div>

el largo de un bloque se adapta; o al valor de la propiedad width, al largo del contenedor (width con unidades relativas) o al largo del contenido

edito: la única manera, que yo conozco, de hacer que el bloque ocupe el 100% del largo sin usar la propiedad width

* {
margin: 0;
padding: 0;
position: relative;
}

html, body {
width: 100%;
}

.tb {
positon: absolute;
top: 0px;
left: 0px;
height: 50px;
background-color: #000;
}

[fishdesign]

@IsaBelM
Aquí te dejo un ejemplo de un screenshot de un layout que maqueté no hace mucho.
Es IE8 (también he hecho la prueba en Vista de Compatibilidad y se ve exactamente igual) y la imagen de ese mismo screen es cross-browser.

http://i54.tinypic.com/jacqcw.png

El código es tan simple como el efecto que queremos:

Código CSS:

.top{height: 17px; background-color:#5c5c5c;}
 

En mi ejemplo, el html sería:

Código HTML:

<div id="subwrapper">
    <div class="top"></div>
    <div class="bck"></div>
</div>
 

El id "subwrapper" no tiene ninguna propiedad, por lo que el class "top" no está heredando nada.

@andoniroy
El top y left en 0px tal y como has puesto en tu primer código no debería estar, ya que previamente deberías haber hecho un css reset, por lo que no sería necesario.

[frank_harbey12]

k tal.

Prueba con este codigo:

body{margin:0;overflow-y:auto}

#tb {
position:absolute;
width: 100%;
height: 50px;
margin:0px;
background: #000
}

No te recomiendo que uses pixeles ya que como sabes actualmente se manejan diferentes resoluciones.

[IsaBelM]

Iniciado por fishdesign

@IsaBelM
Aquí te dejo un ejemplo de un screenshot de un layout que maqueté no hace mucho.
Es IE8 (también he hecho la prueba en Vista de Compatibilidad y se ve exactamente igual) y la imagen de ese mismo screen es cross-browser.

http://i54.tinypic.com/jacqcw.png

El código es tan simple como el efecto que queremos:

Código CSS:

.top{height: 17px; background-color:#5c5c5c;}
 

En mi ejemplo, el html sería:

Código HTML:

<div id="subwrapper">
    <div class="top"></div>
    <div class="bck"></div>
</div>
 

El id "subwrapper" no tiene ninguna propiedad, por lo que el class "top" no está heredando nada.

has hecho trampa se te ha olvidado las propiedades: position, top y left

edito: incluso sabes por que funcionó esto

* {
margin: 0;
padding: 0;
position: relative;
}

html, body {
width: 100%;
}

.tb {
positon: absolute;
top: 0px;
left: 0px;
height: 50px;
background-color: #000;
}

por que no la propiedad position era rechazada ya que no está bien escrita. así que para resumir al final se ha de usar la propiedad width

[fishdesign]

El top y left están a 0px en el reset, pero en ningún caso se pone porcentaje ni se indica un ancho y respecto al position, no hay nada de él en ese reset.
Así que no veo eso de las "trampas" xD

[andoniroy]

Iniciado por frank_harbey12

k tal.

Prueba con este codigo:

body{margin:0;overflow-y:auto}

#tb {
position:absolute;
width: 100%;
height: 50px;
margin:0px;
background: #000
}

No te recomiendo que uses pixeles ya que como sabes actualmente se manejan diferentes resoluciones.

¡¡GRACIAS, ME FUNCIONO A LA PERFECCION!! claro ahora entiendo, me fije que en IE en un textarea me mostraba la barra de scroll vertical, mientras que en el resto de navegadores no. supongo que por la misma razon habria ese espacio en blanco cuando hacia width:100%.

Gracias al resto de gente (gdls, IsaBelM y fishdesign) por haberme ayudado.

Bueno a gdls no tanto porque solo me dijo:

Iniciado por gdls

No utilices porcentaje, utiliza Pixeles. asi seria mejor y mas compatible.

A esto te digo lo que me ha dicho frank_harbey12 no todo el mundo usa la misma resolucion, unos pueden tener un ancho de 1280 y otros uno de 1024, y otros otra, por eso he usado porcentaje.

[fishdesign]

Vuelvo a decir que no es necesario usar % y es más, no es nada recomendable.
Si puedes evitarlo, porque usarlo?

Es super sencillo hacer esto y te vas a ahorrar poner propiedades de más y que quizás te den problema.


Para los que creen que no es posible.

Copien el siguiente código en un html y abranlo ;)

Queda demostrado que no es necesario ni siquiera el uso de la palabra "width" en todo el código y mucho menos porcentajes.

Código HTML:

<html>
<head>
    <style>
        html{margin:0;padding:0;vertical-align:baseline;} /*Hack para ajustar el div al top, pero no influye en su ancho */
 
        body{background-color: #f6f6f6;}
        .top{height: 30px; background-color: #000000;}
        .content{}
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="content">Lorem ipsum dolor sit amet</div>
</body>
</html>
 

andoniroy te recomiendo que uses un reset, ya que te puede salvar de muchos errores y te ayudará en crear una web visible para todos los navegadores.


Un saludo

[zerokilled]

buenas...

@fishdesign,
como ya te dijo @isabelm. estas obviando el factor de que el elemento -de acuerdo al autor- tiene posicion absoluta. en este caso, el elemento con tal propiedad tiene un flujo distinto al resto de los elementos. lo que significa, que ya no se deja llevar por las mismas normas. cuando un elemento tiene posicion absoluta, las dimensiones del elemento se adaptan de acuerdo a su contenido si carece de la propiedad width. por tanto, hay dos soluciones para que el elemento se adapte al ancho del navegador. usando la propiedad width, obligadamente debes asignar como valor 100%. la otra alternativa, que al menos me funciona en firefox3+, chrome e iexplorer8, es con la propiedad left y right. para este caso, asignando el valor cero.

[fishdesign]

zerokilled, no había leído eso.
Así que si tiene posición absoluta, pues cambiará.

No obstante también habría que ver el por qué tiene posición absoluta, ya que quizás no lo necesite.

[andoniroy]

Iniciado por fishdesign

zerokilled, no había leído eso.
Así que si tiene posición absoluta, pues cambiará.

No obstante también habría que ver el por qué tiene posición absoluta, ya que quizás no lo necesite.

Uso posicion absoluta porque en el ejemplo que puse solo uso una capa pegada al borde de arriba del navegador, sin embargo en la pagina que estoy haciendo tengo dos capas practicamente iguales, una arriba y otra abajo, las dos con position:absolute, la de arriba con top:0px y la de abajo con bottom:0px

Si hay otra forma mejor de hacerlo soy todo oidos, debo decir que cuando di programacion web me lo enseño una profesora que no sabia mucho, claro que despues de eso segui aprendiendo por mi lado y mejore bastante, pero hay algunas cosas de las que me enseñaron que sigo usando (position:absolute es una).

[fishdesign]

Si lo quieres fijo no vas a tener otra opción me temo.

No obstante, si ves que te da problemas, puedes sacar el ancho de la ventana con JS y te devolverá el valor en px...o si ya usas jQuery, con .width();

[IsaBelM]

Iniciado por fishdesign

Si lo quieres fijo no vas a tener otra opción me temo.

No obstante, si ves que te da problemas, puedes sacar el ancho de la ventana con JS y te devolverá el valor en px...o si ya usas jQuery, con .width();

dios, no das tu brazo a torcer. como le recomiendas implicar javascript o jquery para hacer eso?? sabes que hay gente que navega con javascript deshabilitado?? sabes que has de cargar una librería de no menos de 25kb?? por cierto, que navegador tiene problemas con las unidades relativas??