Hello everyone, I'm designing something and I have an issue when I load my design at firefox/safari/chrome/whatever and IE I have the following code: <div style="width:170px; text-align:justify; position: relative; overflow: hidden; padding-right: 16px; float: left;"> <h2 align="center"> XXXXXXXX</h2> <p>Prepárate para descuentos entre el 50% - 90% de lo mejor que hacer en tu ciudad: Restaurantes, bares, Spas, Teatros, hoteles, Eventos, Cursos...</p> </div> <div style="width:170px; text-align:justify; position: relative; overflow: hidden; padding-right: 16px; float: left;"> <h2 align="center"> XXXXXXXX</h2> <p>¡Una de las cosas más divertidas de XXXXXXXX es que formemos un gran grupo para conseguir los mejores descuentos!. Asà que pásalo a tus amigos por email, Facebook, Twitter, o como sea.</p> </div> <div style="width:170px; text-align:justify; position: relative; padding-right: 16px; overflow: hidden; float: left;"> <h2 align="center">XXXXXXXX</h2> <p>Quiéres que consigamos una oferta increÃble de tu sitio favorito? Mándanos un email a XXXXXXXX y les uniremos a las ofertas de XXXXXXXX.</p> </div> Code (markup): the problem is with the argument text-align:justify (and may be padding-right). I'm sending here 2 screenshots so you can see how it works with IE and with the rest (IE texts are justified different, and also the they seem to be with a different width size :S). IE does not justify the same way ff does, or may be is the padding thing? I don't know, please if you can help me I would be more than happy! PS: I'm going to create a class for those styles, this is just a draft screenshots:
First of all, avoid inline coding. Use the following HTML <div id="minicont"> <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> Code (markup): and CSS #minicont { width: 558px; border-top: 1px solid #ccc; margin: 0 auto; /* or float: left; if it's really needed */ } .block { width: 170px; padding: 8px; float:left; text-align: justify; display: block;} Code (markup): it's pure math: (.block+ 2 x padding)*3=#minicont Hope it helps!
Validate for your list of html errors. Use Firefox/Chrome/Opera/Safari as your reference for how things should work. Then hack IE.
[ QUOTE=Pintoria;13624433]First of all, avoid inline coding. Use the following HTML <div id="minicont"> <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div> Code (markup): and CSS #minicont { width: 558px; border-top: 1px solid #ccc; margin: 0 auto; /* or float: left; if it's really needed */ } .block { width: 170px; padding: 8px; float:left; text-align: justify; display: block;} Code (markup): it's pure math: (.block+ 2 x padding)*3=#minicont Hope it helps![/QUOTE] I discovered the solution about 1 minute after I publish this thread hahaha, thank you so much anyway... fyi, I created a rule for IE and edited the width size.