Webseite umstellen auf CSS

--Sirius--

Lt. Junior Grade
Dabei seit
März 2005
Beiträge
359
Hallo,

ich dachte eigentlich mit CSS könnte man das Layout in verschiedenen Browsern angleichen. Aber leider musste ich nun feststellen das trotzdem praktisch alle formatierungen anders interpretiert werden. Dazu kommt das der IE 6 vieles nicht versteht und dadurch alles noch komplizierter wird.
Mein aktuelles Problem ist folgendes:
HTML:
      <table border="0" >
      <tr>
      <td colspan="2"><br />
      <h3>aktuell</h3>
      <hr />
      </td>
      </tr>
      <tr>
      <td>
      <img src="kompakt-menu.gif" /> 
      </td>
      <td width="95"><strong>kompakt</strong></td>
      </tr>
      <tr>
      <td colspan="2">
      <h3><a href=".....
Das ist ein Menü, mit einem Menüpunkt ("aktuell") und einem Unterpunkt ("kompakt"). Zwischen den beiden ist eine Trennlinie. Das Problem ist das der IE zwischen aktuell und dem gif einen wesentlich größeren Abstand macht als Firefox und ausserdem einen zu geringen zum nächsten Hauptmenüpunkt. Was kann man da machen?
Was kann man eigentlich ganz allgemein machen, wenn die die Browser alles anders darstellen? Am liebsten wird ich ja den XHTML-Parser benutzen, also den MIME-TYP "application/xhtml+xml" nehmen aber das versteht ja der blöde IE wieder nicht richtig :(
 

krizzelfix

Commander
Dabei seit
Sep. 2005
Beiträge
2.626
Hallo --Sirius--,

hast du irgendwelche Abstände für Images definiert oder ähnliches?

Würde am anfang jeder CSS Datei auch noch
HTML:
* {
  margin: 0px;
  padding: 0px;
}
einfügen.

Und etwas mehr Quellcode wäre sehr hilfreich.

MFG

tewes
 

Loopo

Admiral
Dabei seit
Juli 2002
Beiträge
7.610
also erstens verwenden die beiden Browser schon unterschiedliche Größen für die <h3> etc. Tags, also nimm statt dessen zb
HTML:
<div class="h3">aktuell</div>
und dann im CSS Teil
HTML:
div.h3 { font-size: 20px; }
dann wird auch die horizontale Linie unterschiedlich hoch sein, also im CSS Teil definieren:
HTML:
hr { height: 2px; }
generell gilt, je genauer du alle Sachen vordefinierst, desto weniger Spielraum haben die Browser die Seite unterschiedlich auszugeben
 

--Sirius--

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
März 2005
Beiträge
359
So, hab jetzt mir ein neues Menü gebastelt. Das alte hatte ich nämlich übernommen und deshalb nicht verstanden. Jetzt ist alles mit CSS gemacht und sieht auch in FF und IE identisch aus.

So siehts aus:
HTML:
 <table class="menue">
      <tr>
      <td class="menuepunkt">aktuell<hr /><div class="kleinmenue">  <img src="kompakt-menu.gif" />  kompakt</div>
      </td>
      </tr>
      <tr>
       <td class="menuepunkt">der verein
      </td>
      </tr>
      <tr>...
und bei CSS:
HTML:
.menue { width:100px; margin:15px; }
.menuepunkt { padding: 10px 5px 10px 5px; font-size: 20px; }
.kleinmenue { font-size: 13px; font-weight:bold; }
Das man die Schriftgröße der Überschriften selbst bestimmt, werde ich auch beachten.
Vielen Dank für die Antworten.

Edit: Eine Frage noch: Ich habe mehrmals "<div align="center">" im Quelltext zu stehen. Macht man wenn man tatsächlich das ganze Design mit CSS macht ein "<div class="center">" und bei css: ".center { text-align: center }" draus? Und bei den verschiedenen Hintergrundfarben dasselbe?
 
Zuletzt bearbeitet:

Benj

Lt. Commander
Dabei seit
Okt. 2005
Beiträge
1.807
Meine Güte, wenn ich schon lese, dass hier <h3>-Tags durch so einen Murks wie <div class="h3"> ersetzt wird, platzt mir gewissermaßen der Kragen. Nahezu alle Tags haben nicht nur ein bestimmtes Aussehen, sondern auch eine bestimmte Funktion. Die Funktion von <div> ist einfach das Hinzufügen einer beliebigen Ebene. Die Header-Tags (h1 bis h6) sollen jedoch die logische Struktur des Dokuments vorgeben.
Dieses Kiddie-Gerücht, dass jetzt alles per CSS gemacht wird, was ja total 1337 ist, findet hier definitiv keine Anwendung. Und wenn man für das h3-Tag die Schrift festlegt (sowohl Größe als auch die Art etc.), wird es auch in jedem Browser gleich angezeigt. Zudem ist es noch barrierefrei.
 

Zweipunktnull

Commander
Dabei seit
Dez. 2004
Beiträge
2.546
Zitat von Benj:
Dieses Kiddie-Gerücht, dass jetzt alles per CSS gemacht wird, was ja total 1337 ist, findet hier definitiv keine Anwendung.
Doch. Schlicht und einfach doch.
ALLES wird per CSS gemacht. Auch das Attribut align ist als deprecated eingestuft und soll in Zukunft komplett entfallen.
Vielleicht sieht es im ersten Moment nach etwas mehr Arbeit aus, aber im Grunde ist es viel besser, wirklich ALLES mit CSS zu machen. Das ist auch kein Kiddiegerücht, sondern die offizielle aktuelle Empfehlung des World Wide Web Consortiums.
 
Top