problema con <hr /> e IE

**blur** · 25-04-2011, 18:00

ciao,

ho 5 div box allineati: 2 sopra e 3 sotto.
Separo i 2 superiori dai 3 inferiori con una linea <hr /> dopo aver dato un clear:both tra il primo e il secondo blocco div.
come da immagine sotto, con IE7 e 9 non viene rispettato il margine superiore. cioè il margine superiore è maggiore a quello inferiore come dovrebbe essere e come si vede, giustamente, con FF e Chrome.

CSS:

.box {
text-align:left;
width: 226px;
Height:160px;
float: left;
position:relative;
background: #fef6df;
border:1px solid #fdcb0a;

}

.box1 {
text-align:left;
width: 346px;
height:160px;
float: left;
position:relative;
background: #fef6df;
border:1px solid #fdcb0a;

}

hr {color:red; background-color:red; border:0px solid red; height:1px;}

.clear {clear:both}

e l'HTLM:

<div class="box1">Testo1</div>
<div class="box1">Testo2</div>
<div class="clear"></div>
<hr />
div class="box">Testo1</div>
div class="box">Testo2</div>
div class="box">Testo3</div>

ho utilizzato il clear:both perchè altrimenti non viene visualizzata la linea <hr />
Altrimenti mi bastava aggiungere un margin-bottom al box1

soluzioni?
grazie!

**cdjjj** · 26-04-2011, 10:04

hai provato ad utilizzare un css reset? sembra il tipico problema in cui ogni browser fa un poco come gli pare...

**blur** · 26-04-2011, 10:50

ho provato ad utilizzare le tecniche del css reset descritte qui ma non hanno dato nessun risultato...

è incredibile come ancora Explorer 9 ( e dico il 9!!!) dia problemi di visualizzazione

altre soluzioni???

**cdjjj** · 26-04-2011, 12:07

IE9 ancora non l'ho provato, sto con XP, mi dispiace.
non si smentiscono mai a micro...
comunque, utilizzando questo minimo "reset"

*
{margin: 0; padding: 0; border: 0 none; outline: 0 none;}
body
{width: 100%; height: 100%; line-height: 1; font-size: 14px;}

aggiungendo

.box
{margin-top: 12px;}
.box1
{margin-bottom: 12px;}

e cambiando hr in questo modo

hr
{width: 100%; height: 1px; background: #f00; border: 0 none; clear: both;}

mi si vede uguale in FF4, IE8, Chroome 10 e Opera 11.10 su XP sp3

**blur** · 26-04-2011, 12:34

vabbè il problema si verifica anche con xp e ie7.

IE8 non ce l'ho perchè ho fatto l'aggiornamento al 9

**cdjjj** · 26-04-2011, 12:41

ops, scusa, ho modificato la risposta prima, sono un poco lento...
vedi se ti serve quello che ti postato prima
dimenticavo, ho tolto il div con .clear, passandolo direttamente a hr

**blur** · 26-04-2011, 14:16

allora:

CSS

*{margin: 0; padding: 0; border: 0 none; outline: 0 none;}
body
{width: 100%; height: 100%; line-height: 1; font-size: 14px;}

.box
{margin-top: 6px;}
.box1
{margin-bottom: 6px;}

.box {
text-align:left;
width: 226px;
Height:160px;
float: left;
position:relative;
background: #fef6df;
border:1px solid #fdcb0a;

}

.box1 {
text-align:left;
width: 346px;
height:160px;
float: left;
position:relative;
background: #fef6df;
border:1px solid #fdcb0a;

}

hr {width: 100%; height: 1px; background: #f00; border: 0 none; clear: both;}

HTML rimane invariato togliendo il clear:both dal div

RISULTATO: IE ancora mi mostra una differenza nel margin-top e bottom rispetto a FF e Chrome

**cdjjj** · 26-04-2011, 16:04

mi dispiace, non so che dirti, non ho ne IE7 ne IE9 per fare prove.
ti posto intero il codice che mi funziona

codice:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>...</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
*
{margin: 0; padding: 0; border: 0 none; outline: 0 none;}
body
{width: 100%; height: 100%; line-height: 1; font-size: 14px;}
.box
{text-align: left; width: 226px; height: 160px; float: left; position: relative; background: #fef6df; border: 1px solid #fdcb0a; margin-top: 6px;}
.box1
{text-align: left; width: 346px; height: 160px; float: left; position: relative; background: #fef6df; border:1px solid #fdcb0a; margin-bottom: 6px;}
hr
{width: 100%; height: 1px; background: #f00; border: 0 none; clear: both;}
</style>
</head>

<body>
<div class="box1">Testo1</div>
<div class="box1">Testo2</div>
<hr />
<div class="box">Testo1</div>
<div class="box">Testo2</div>
<div class="box">Testo3</div>
</body>

</html>

**Prill** · 26-04-2011, 17:49

@blur, copiando e incollando il tuo codice di partenza in una pagina con Doctype completo, Explorer si comporta come voluto. Lo spazio indesiderato appare in quirks mode (IE 7 va in quirks mode anche se hai un Doctype ma prima di esso lasci spazi vuoti o inserisci commenti, IE 6 anche col prologo xml).
Peraltro se hai un div per il clear puoi anche evitare l'hr e rendere il filetto con un bordo, inferiore o superiore, sul div stesso

Discussione: problema con <hr /> e IE

Strumenti discussione

Ricerca discussione

Visualizza

problema con <hr /> e IE

Permessi di invio