Darstellungsprobleme mit Div beim IE

[general_xxx]

Hallo,

Ich bin gerade dabei, eine Nährwerttabelle zu erstellen. Vorzugsweise habe ich sie mit aus div-tags zusammen gestellt. Tja... und wenn man müde ist, unterlaufen einem so manche fehler ^^. Jedenfalls habe ich mich ran gesetzt und diese Tabelle ersellt. Zum "zwichendurch prüfen", ob ich auch alles richtig gemacht habe, hab ich leider immer nur den Firefox benutzt. Am Ende, als ich am vorläufigen Ende war, habe ich mir gedacht: "Guck ich mal, ob der IE das auch so 'verseteht' wie der Mozilla" und öffnete das Dokument mit dem IE.

Und es war ziemlich verunstaltet. Da ich leider net zwichendurch geguckt habe, weiß ich jetzt net wo ich den Fehler gemacht habe und bin nun ziemlich aufgeschmissen, weil ich die ganze Arbiet nicht unbedingt von vorne machen möchte.

Ich hänge die html Datei am besten mal an, wäre nett, wenn ihr euch das mal bei firefox und beim IE angucken könntet ;ugl

Thx 4 Help!

 

[csstester]

Äh, hallo, aber das sieht ja eindeutig nach Tabellendaten aus, also wohl auf ein Mißverständnis gestoßen.

Tabellen sollen nicht zum Layouten benutzt werden, zum darstellen von Tabellarischen Daten sind sie aber explizit gemacht wurden... völliger nonsens das mit div´s umsetzen zu wollen.

Gruß
csstester

 

[neuroleptika]

Als Tabelle
html

<table id="naerwerttabelle">
  <tr class="erste_zeile">
  <th colspan="2" class="erste_spalte">
  <span class="float_links">N&auml;hrwerte</span>
  <span class="float_rechts">100g</span></th> 
  <th class="zweite_spalte">
  <span class="float_links">Portion</span>
  <span class="float_rechts">30g</span>
  </th> 
  <th>%GDA</th> 
  </tr>

  <tr class="gelb">
  <td class="border_links">Brennwert</td> 
  <td class="rechts_ausrichten">195kJ/46kcal</td>
  <td class="border_links rechts_ausrichten">195kJ/46kcal</td> 
  <td class="border_rechts_links rechts_ausrichten">17%</td> 
  </tr>

  <tr>
  <td class="border_links">Eiweiß</td> 
  <td class="rechts_ausrichten">195kJ/46kcal</td> 
  <td class="border_links rechts_ausrichten">195kJ/46kcal</td> 
  <td class="border_rechts_links rechts_ausrichten">17%</td> 
  </tr>
</table>

css

  #naerwerttabelle {
border-collapse: collapse;
}

  #naerwerttabelle th {
border: 1px solid #000;
font-weight: normal;
font-size: 14px;
text-align: left;
padding: 0 5px 0 5px;
}



  #naerwerttabelle th .float_links {
 float: left;
}

#naerwerttabelle th .float_rechts {
float: right;
}

  #naerwerttabelle .erste_spalte {
width: 250px;
}

  #naerwerttabelle .zweite_spalte {
width: 90px;
}

  #naerwerttabelle td {
font-size: 12px;
padding: 0 5px 0 5px;
}

  #naerwerttabelle .rechts_ausrichten {
text-align: right;
}


#naerwerttabelle .border_links {
border-left: 1px solid black;
}

#naerwerttabelle .border_rechts {
border-right: 1px solid black;
}

#naerwerttabelle .border_rechts_links {
border-right: 1px solid black;
border-left: 1px solid black;
}

#naerwerttabelle .gelb {
background-color: #FFFDDA;
}

Wenn die Tabellendaten aus einer Abfrage-Schleife stammen dürfte die Umstellung nicht lange dauern.
Ansonsten noch mal nachfragen.

 

[Efchen]

Findest Du, neuroleptika, nicht eigentlich auch, dass es eine schlechte Idee ist, IDs und Klassennamen so zu wählen, dass die Namen auf Layout/Design hinweisen anstatt auf Struktur? Findest Du es nicht auch blöd, wenn Du eine Box "links" nennst und die im nächsten Redesign auf die rechte Seite stellst?

 

[neuroleptika]

Findest Du, neuroleptika, nicht eigentlich auch, dass es eine schlechte Idee ist, IDs und Klassennamen so zu wählen, dass die Namen auf Layout/Design hinweisen anstatt auf Struktur?

Ich kenne mich mit Nährwerten nicht besonders gut aus.
Sinnvolle Klassennamen kann der Author sicher besser vergeben.

Ich dachte es könnte für ein Beispiel übersichtlicher sein, wenn mann an den Klassennamen schon erkennt was sie bewirken sollen.

Meistens macht es auch Sinn die Elemente in der gleicher Richtung zu floaten wie sie im Quelltext stehen (zumindest in Tabellen).

 

[Loon3y]

Denke mal das war nur zur veranschaulichung für anfänger ;) Wäre doch dann schwerer durchzusteigen wenn man erst guggen muss "xyz" ist links und "abc" ist rechts...da sieht man doch eher aufm ersten blick "links" ist links und "rechts" ist rechts...Wie ers dann umbenennt ist seine sache :-)

Aber gut das du es erwähnst ;)

 

[Efchen]

"Trennung von Inhalt und Layout" umfasst auch die geeignete Wahl von Klassennamen. Und je strikter man trennt, desto leichter wirds, desto übersic htlicher wirds, und desto flexibler ist die Site und desto einfach wird das Redesign.

 

[general_xxx]

Hallo,

thx erstmal für eure Antworten!

Ich werde denn wahrscheinlich ne Tabele benutzen, thx.

Die Klassen habe ich mit absicht leicht verständlich benannt, damit es leichter wird das Problem zu klären, sonst haben die auch andere Namen.

Thx für eure Antworten!!!

Achso, extradank an den neuroleptiker, thx 4 code ;-)