✔ <hr> Prob im IE

[Denniz]

Hallo Leute,

ich brauche das hr tag zur formatierung meines Kontaktformulars.
Habe es folgendermaßen gestylet:

hr { 
   clear:both; 
   border:0px; 
   height:0px;  
}

Im FF wird die linie nicht mehr dargestellt und der Abstand zwischen den Input Feldern ist minimal. So soll es sein.

Im IE 6/7 bleibt die linie dagegen sichtbar und zwischen den Input feldern ist sehr viel Luft.
Gibts es möglichkeit das es im IE genauso aussieht wie im FF?

link

Gruß
Denniz

 

[Maik]

Hi,

wofür benötigst du das hr-Element, wenn a) die horizontale Linie überhaupt nicht dargestellt werden soll und b) die clear:both-Eigenschaft auf das label-Element .leftside angewendet wird?

Ansonsten verwende statt dem hr-Element das div-Element:

div.clear {
   clear:both;
}

<form method="post" id="formname" action="/test/css/index3.php" >
  <fieldset >
  <legend > Lassen Sie bitte eines oder beide der erforderlichen Felder frei und klicken Sie "Absenden". </legend>
  <label for="fullname" class="leftside" >Vor-und Nachname <br /> </label>
  <input id="fullname" type="text" name="fullname" size="30" />
  <div class="clear"></div>
  <label for="emailaddresse" class="leftside">E-Mail-Adresse <br /></label>
  <input id="emailaddresse" type="text" name="emailaddresse" size="30" />
  <div class="clear"></div>
  <label for="telefonnummer" class="leftside"> Telefonnummer <br /></label>
  <input id="telefonnummer" type="text" name="telefonnummer" size="15" />
  <div class="clear"></div>
  <label for="absenden"> </label>
  <input class="schalter" type="submit" name="absenden" value="Absenden" />
  <label for="reset"> </label>
  <input class="schalter" type="reset" value="Löschen" name="zurückstellen" />
  </fieldset>
</form>

 

[Denniz]

Hi,
klar hast recht mit dem clearing div.
Nach dem Posting hab ich es auch so gemacht.
Wollte es nur interessenshalber mal wissen ob es im IE möglich ist da
ich mir das Formular von dieser website http://www.mediaevent.de/xhtml/form.html abgeschaut habe und dort auch mit dem hr tag gearbeitet wurde,
auch wenns etwas unlogisch erscheint.

 

[dsturm]

Na da meld' ich mich kurz nochmal zu dem Thema, auch wenns schon etwas her ist:

Ich schlage mich gerade mit dem gleichen Problem herum. Ein <hr> ist semantisch gesehen, meiner Meinung nach, besser geeignet als ein <div>, außerdem stellt ein <hr> bei der css-losen Darstellung eine bessere Trennung des Layouts dar, was, zumindest bei mir, häufig nach einem clearing gewollt ist.

Wohl ein wenig hilfreicher Comment, da ich bisher auch noch kein Lösungsweg gefunden hab, allerdings würde ich mich freuen, falls einer für die Alternative etwas gefunden hat.

Ansonsten wäre noch anzumerken, dass hier eine markup-freie Lösung angesprochen wird: http://positioniseverything.net/easyclearing.html

Weiterhin hatte ich bei YAML(http://www.yaml.de/artikel/xhtml/clou.html) diese Lösung gefunden:

hr.clear_columns 
{	
  clear: both; 
  float: left; 
  content: "."; 
  display: block;  
  height: 0; 
  line-height: 0px; 
  visibility: hidden; 
  border: 0; 
  padding: 0;
  margin: -1.1em 0 0 0; /* erforderlich damit kein Leerraum zwischen Spalten und Footer entsteht */
}