Foros del Web » Creando para Internet » HTML »

internet explorer 7 y float right

Estas en el tema de internet explorer 7 y float right en el foro de HTML en Foros del Web. Hola. Tengo un código que funcionaba bastante bien hasta que vino ie7 a complicarme la vida. Se trata de una especie de entrada de un ...
  #1 (permalink)  
Antiguo 02/02/2011, 07:42
 
Fecha de Ingreso: febrero-2011
Mensajes: 3
Antigüedad: 6 años, 10 meses
Puntos: 0
Pregunta internet explorer 7 y float right

Hola.
Tengo un código que funcionaba bastante bien hasta que vino ie7 a complicarme la vida.
Se trata de una especie de entrada de un índice típico de un libro, dónde el número de la página debe ir pegado a la derecha para que estén todos alineados.
El código es así:

Código HTML:
 <div style="text-align:justify;padding:1% 0.625em 1% 0.75em;">
		<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mollis nulla. Nulla facilisi. Duis convallis elit nec ligula congue feugiat. Praesent erat velit, ullamcorper luctus aliquam eget, sagittis vel lectus. Cras placerat gravida feugiat. Etiam suscipit condimentum lorem, id facilisis ante facilisis ac. Phasellus quam libero, semper eu malesuada sed, pellentesque vitae</span>
		<span style="float:right;color:#0000FF">123456</span>
	</div> 
Funciona bien en Firefox, pero en IE el texto de la derecha me lo desplaza hacia abajo.
He probado a cambiar el span por un div, o incluso ponerlo como un div aparte pero no ha habido forma.
Es posible que haya salido ya este tema en el foro pero no encuentro nada que funcione.
Gracias y un saludo.
  #2 (permalink)  
Antiguo 02/02/2011, 10:59
Avatar de Kanashin  
Fecha de Ingreso: enero-2011
Mensajes: 45
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: internet explorer 7 y float right

No sé si tendrá que ver, pero ¿por qué pone el párrafo dentro de un span?
  #3 (permalink)  
Antiguo 02/02/2011, 11:43
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: internet explorer 7 y float right

Código HTML:
Ver original
  1. <div style="text-align:justify;padding:1% 0.625em 1% 0.75em;">
  2. <span style="float:right;color:#0000FF">123456</span>
  3.         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mollis nulla. Nulla facilisi. Duis convallis elit nec ligula congue feugiat. Praesent erat velit, ullamcorper luctus aliquam eget, sagittis vel lectus. Cras placerat gravida feugiat. Etiam suscipit condimentum lorem, id facilisis ante facilisis ac. Phasellus quam libero, semper eu malesuada sed, pellentesque vitae</span>
  4.        
  5.     </div>
Invierte el orden de los <span> o igual establece un ancho a los dos y flotalos uno a la izqueirda y otro a la derecha.
  #4 (permalink)  
Antiguo 03/02/2011, 07:18
 
Fecha de Ingreso: febrero-2011
Mensajes: 3
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: internet explorer 7 y float right

Cita:
Iniciado por alexk Ver Mensaje
Código HTML:
Ver original
  1. <div style="text-align:justify;padding:1% 0.625em 1% 0.75em;">
  2. <span style="float:right;color:#0000FF">123456</span>
  3.         <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mollis nulla. Nulla facilisi. Duis convallis elit nec ligula congue feugiat. Praesent erat velit, ullamcorper luctus aliquam eget, sagittis vel lectus. Cras placerat gravida feugiat. Etiam suscipit condimentum lorem, id facilisis ante facilisis ac. Phasellus quam libero, semper eu malesuada sed, pellentesque vitae</span>
  4.        
  5.     </div>
Invierte el orden de los <span> o igual establece un ancho a los dos y flotalos uno a la izqueirda y otro a la derecha.
Inviertiendo el orden en Firefox y en IE aparece el número a la derecha de la primera línea, en vez de a la derecha de la última.
Haciendo flotar uno a la izquierda y otro a la derecha y asignando un ancho no se consigue lo que yo deseo, y es que el párrafo "envuelva" al número, sino que se truncan las líneas del párrafo al ancho establecido y el número se queda solo en el margen derecho.

Gracias por contestar.
  #5 (permalink)  
Antiguo 03/02/2011, 08:39
 
Fecha de Ingreso: enero-2011
Mensajes: 4
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: internet explorer 7 y float right

Segun mi opinion, para que puedas aplicar un estilo Css corecto a tu bloque <div> tienes que poner el texto y el numero de la pagina en interior de unos parrafos <p>, como en este ejemplo


Código HTML:
<div id="EX1">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mollis nulla. Nulla facilisi. Duis convallis elit nec ligula congue feugiat. Praesent erat velit, ullamcorper luctus aliquam eget, sagittis vel lectus. Cras placerat gravida feugiat. Etiam suscipit condimentum lorem, id facilisis ante facilisis ac. Phasellus quam libero, semper eu malesuada sed, pellentesque vitae</p>
		<p id="nrPagina1">123456</p>
</div> 
Luego puedes intentar a aplicar los estilos como es estos modelos

<p>div#EX1 {
padding:10px;
border:1px solid #000;}</p>

<p>p#nrPagina1 {
float:right;
padding-right:25px;
color:#0000FF;}</p>

o

Código HTML:
<div id="EX2">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mollis nulla. Nulla facilisi. Duis convallis elit nec ligula congue feugiat. Praesent erat velit, ullamcorper luctus aliquam eget, sagittis vel lectus. Cras placerat gravida feugiat. Etiam suscipit condimentum lorem, id facilisis ante facilisis ac. Phasellus quam libero, semper eu malesuada sed, pellentesque vitae</p>
		<p id="nrPagina2">123456</p>
</div> 
div#EX2 {
padding:10px;
border:1px solid #000;}

p#nrPagina2 {
margin-left:1000px;
padding-right:25px;
color:#0000FF;}
  #6 (permalink)  
Antiguo 04/02/2011, 03:28
 
Fecha de Ingreso: febrero-2011
Mensajes: 3
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: internet explorer 7 y float right

Cita:
Iniciado por DanGrosu Ver Mensaje
Segun mi opinion, para que puedas aplicar un estilo Css corecto a tu bloque <div> tienes que poner el texto y el numero de la pagina en interior de unos parrafos <p>, como en este ejemplo


Código HTML:
<div id="EX1">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mollis nulla. Nulla facilisi. Duis convallis elit nec ligula congue feugiat. Praesent erat velit, ullamcorper luctus aliquam eget, sagittis vel lectus. Cras placerat gravida feugiat. Etiam suscipit condimentum lorem, id facilisis ante facilisis ac. Phasellus quam libero, semper eu malesuada sed, pellentesque vitae</p>
		<p id="nrPagina1">123456</p>
</div> 
Luego puedes intentar a aplicar los estilos como es estos modelos

<p>div#EX1 {
padding:10px;
border:1px solid #000;}</p>

<p>p#nrPagina1 {
float:right;
padding-right:25px;
color:#0000FF;}</p>

o

Código HTML:
<div id="EX2">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mollis nulla. Nulla facilisi. Duis convallis elit nec ligula congue feugiat. Praesent erat velit, ullamcorper luctus aliquam eget, sagittis vel lectus. Cras placerat gravida feugiat. Etiam suscipit condimentum lorem, id facilisis ante facilisis ac. Phasellus quam libero, semper eu malesuada sed, pellentesque vitae</p>
		<p id="nrPagina2">123456</p>
</div> 
div#EX2 {
padding:10px;
border:1px solid #000;}

p#nrPagina2 {
margin-left:1000px;
padding-right:25px;
color:#0000FF;}
Pero entonces se pone el número en una línea nueva que es precisamente lo que no quiero.
Yo no creo que esté haciendo en principio nada mal, sino que simplemente IE7 hace lo que le da la real gana y me preguntaba si alguno ha tenido este problema antes.
He visto casos parecidos en otros foros pero las soluciones que se proponen no me están funcionando.

Etiquetas: explorer, float:right, internet
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:36.