Tabelle formatieren: Probleme mit IE 8

[sunny]

Hallo @ all,

bin nicht so erfahren mit HTML&CSS und hab leider ein Riesenproblem mit IE8 bei dieser Seite:
http://www.heyderundpartner.de/start.html

Habe zwar eine Browserweiche eingebaut:

<!--[if gte IE 8]>  
<link href="css/global1-1-ie8.css" rel="stylesheet" type="text/css">  
<![endif]-->  
<!--[if lte IE 7]>  
<link href="css/global1-1-ie7.css" rel="stylesheet" type="text/css">  
<![endif]-->  

...schaffe es aber nicht, die CSS-Datei so zu anzupassen, dass die Begriffe in der Mitte nicht verschoben aussehen. Wahrscheinlich ist die Lösung mit der Tabelle eh nicht die beste, aber ich wüsste nicht, wie ich das sonst machen könnte.

Hoffe, dass mir hier jemand helfen kann!
Vielen Dank im Voraus!!

Hier ein paar Details:

#content {  
	width: 1280px;  
	height: 386px;  
	background: url(../images/bgr-hp-start-kacheln4_1.jpg) no-repeat center center;  
	margin: 20px 0 20px 0;	  
	}  
  
#navi-links {  
	float: left;  
	width: 18%;  
	margin: 0;  
	text-align: right;  
	list-style: none;  
	padding: 110px 20px 10px 0;  
}  
#navi-links a{  
	text-decoration: none;  
	color: #6F6F6F;  
	font-size: 12px;  
	font-weight: bold;  
	}  
#navi-links li {  
	text-align: right;  
	margin-bottom: 10px;  
	}  
#Navigation1 a{  
	text-decoration: none;  
	color: #6F6F6F;  
	font-size: 12px;  
	font-weight: bold;  
	}  
#Navigation1 li {  
	text-align: left;  
	margin-bottom: 10px;  
	}  
#Navigation1 {  
	list-style: none;  
	padding-top: 80px;  
	padding-left: -10px;  
		}  
#Navigation1 a:hover, #navi-links a:hover {  
	color: #94010F;  
	}  
#rechts {  
	float:right;  
   	width:21%;  
	padding-top: 130px;  
	line-height: 15px;  
	text-align: left;  
}  
  
#inhalt1 {  
	font-size: 12px;  
	height: 370px;  
	width: 741px;  
	margin-bottom: 1px;  
	padding-left: 18px;  
	}  
	}

<div id="inhalt1">  
		<table id="Uebersicht">  
  <tr>  
  <td class="eins"><h2 class="weiss">Globalberechnung</h2><br><h2></h2><br><br><h2></h2></td>  
  <td class="zwei"><h2 class="weiss"></h2><br><h2 class="weiss"></h2><br><h2 class="weiss">Gebührenkalkulation</h2></td>  
  <td class="drei"><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td class="vier"><h2>Ingenieurtechnische</h2><h2>Berechnungen</h2><br><br><h2></h2></td>  
  <td class="fuenf"><h2></h2><br><h2></h2><br><h2></h2></td>  
   </tr>  
  <tr>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td>><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td><h2 class="weiss">Bauhöfe</h2><br><br>  
  <div class="sonder"><h2 class="weiss1">Technische</h2><h2 class="weiss2">Dienste</h2></div></td>  
 <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  </tr>  
  <tr>  
  <td><h2>Software</h2><br><h2>Kommunale</h2><h2>Rechenzentren</h2></td>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  </tr>  
  <tr>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td><h2></h2><br><h2>Hausmeisterpools</h2><br><h2>Amtsbotendienste</h2></td>  
  <td><h2></h2><br><h2></h2><br><h2></h2></td>  
  <td><h2>Personalentwicklung</h2><br><h2>Stellenbewertung</h2><br><h2>Organisation</h2></td>  
  </tr>  
    </table>  
		</div>

[Cheatah]

Hi,

bin nicht so erfahren mit HTML&CSS

das ist ja nichts Schlimmes, aber Du musst diese Information trotzdem nicht von Deinem HTML-Code heraus schreien lassen.

<div id="inhalt1">

  <table id="Uebersicht">  

<tr>
  <td class="eins"><h2 class="weiss">Globalberechnung</h2><br><h2></h2><br><br><h2></h2></td>
  <td class="zwei"><h2 class="weiss"></h2><br><h2 class="weiss"></h2><br><h2 class="weiss">Gebührenkalkulation</h2></td>
  <td class="drei"><h2></h2><br><h2></h2><br><h2></h2></td>[...]

  
Ich habe nicht den geringsten Schimmer, um was für Inhalte es sich hier handelt, aber eines kann ich Dir garantieren: Die Struktur ist definitiv falsch. \*So\* viele Überschriften zweiten Grades kannst Du auf einem Haufen gar nicht haben, insbesondere nicht wenn sie leer sind. Deine Zeilenende-Markierungen sind mit ca. 99,9-prozentiger Sicherheit \*alle\* fehl am Platz, dort wo zwei aufeinander stoßen sogar mit 100-prozentiger Sicherheit. Tabellarisch erscheinen mir die Daten auch nicht, so dass die Tabelle falsch ist, und durchnummerierte Klassen- und ID-Bezeichner sowie solche, die vermutlich der Darstellung wegen gewählt wurden ("weiss"), gehören ebenfalls nicht in den HTML-Code. Das einzige, was von den Code-Massen übrig bleibt, sind 15 Wörter und vielleicht(!) drum herum ein <div>, dem Du beispielsweise die ID "inhalt" geben könntest - den Rest streiche bitte.  
  
Anschließend überlege Dir, um was für Daten es sich eigentlich handelt und prüfe nach, welche Elemente HTML hierfür vorsieht. Überlege Dir, welche Elemente gruppiert werden müssen (<div>), welche über die von HTML vorgegebene Semantik hinaus gleichartig sind (Klassen) und welche bemerkenswert eindeutig sind (IDs). Dann und \*erst\* dann überlege Dir, wie Du die vorhandenen Elemente darstellen möchtest. Betrachte den HTML-Code ab diesem Moment als unverrückbar in Stein gemeißelt.  
  
Cheatah  

-- 
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|  
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html  
X-Will-Answer-Email: No  
X-Please-Search-Archive-First: Absolutely Yes

[Beat]

Das einzige, was von den Code-Massen übrig bleibt, sind 15 Wörter und vielleicht(!) drum herum ein <div>, dem Du beispielsweise die ID "inhalt" geben könntest - den Rest streiche bitte.

Meine Glaskugel blinkt gerade heftigst und meint:
Intendiert ist wohl eine Linkliste, ergo ist <ul> zu verwenden.
Die Listenpunkte können innerhalb der vorgegebenen Ausmasse der <ul> auch absolut positioniert werden.

mfg Beat

[Felix Riesterer]

Liebe(r) sunny,

<!--[if gte IE 8]>

<link href="css/global1-1-ie8.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if lte IE 7]>
<link href="css/global1-1-ie7.css" rel="stylesheet" type="text/css">
<![endif]-->

  
Du willst also das IE7-Stylesheet auch für den IE6 laden lassen? Ist das sinnvoll? Ich habe für IE6 ein eigenes Zusatz-Stylesheet, ebenso für den IE7. Daher notiere ich das so:  
  
~~~html
<!--[if IE 6]>  
    <link href="css/ie6.css" rel="stylesheet" type="text/css">  
<![endif]-->  
<!--[if IE 7]>  
    <link href="css/ie7.css" rel="stylesheet" type="text/css">  
<![endif]-->

Den 7er IE gibt es nur in dieser einen Version (ebenso den 6er), daher kann man auf diese Version direkt prüfen und braucht kein "kleinergleich" oder bei Dir im Falle von IE8 ein "größergleich". Denn so lädst Du offensichtlich im IE8 _beide_ Stylesheets. Wolltest Du das?

...schaffe es aber nicht, die CSS-Datei so zu anzupassen, dass die Begriffe in der Mitte nicht verschoben aussehen.

Du solltest ersteinmal Deinen Code-Salat komplett renovieren. Dieses HTML-Gemurkse (ja ich spreche deutlicher, als Cheatah) ist grob fahrlässig! Das mit CSS sinnvoll aussehen lassen zu wollen, ist wie Flaschenziehen - man kann mit keinen zuverlässigen Ergebnissen rechnen.

Wahrscheinlich ist die Lösung mit der Tabelle eh nicht die beste, aber ich wüsste nicht, wie ich das sonst machen könnte.

Du willst Dich über semantisches Markup informieren. Dazu ließt Du sowohl das Tutorial in der Preview von SELFHTML9, als auch das Kapitel <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS-basierte Layouts> in der aktuellen Doku.

Hoffe, dass mir hier jemand helfen kann!

Du kannst nur Dir selbst helfen. Fange mit Deinem HTML-Code an, denn er stellt die Struktur Deines Dokuments dar, welche im Moment alles andere als nach einer Struktur aussieht.

Liebe Grüße,

Felix Riesterer.

[suit]

<!--[if gte IE 8]>

<link href="css/global1-1-ie8.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if lte IE 7]>
<link href="css/global1-1-ie7.css" rel="stylesheet" type="text/css">
<![endif]-->

>   
> Du willst also das IE7-Stylesheet auch für den IE6 laden lassen? Ist das sinnvoll? Ich habe für IE6 ein eigenes Zusatz-Stylesheet, ebenso für den IE7. Daher notiere ich das so:  
  
Ebenso ist es unsinnig auch künftigen IE-Versionen das IE8-Stylesheet vorsetzen zu wollen - der IE9 ist mittlerweile auf sehr gutem weg, äußerst Standardkonform zu werden.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Habe zwar eine Browserweiche eingebaut:

Schade. Das schafft unnötige Arbeit. Und sei es, die Weiche wieder auszubauen. Aber je früher du dies tust, desto mehr zukünftige Arbeit spart das.

Du willst also das IE7-Stylesheet auch für den IE6 laden lassen? Ist das sinnvoll? Ich habe für IE6 ein eigenes Zusatz-Stylesheet, ebenso für den IE7.

Ist das sinnvoll? Nein.

Sinnvoll ist es, Anpasungen für bestimmte Browser in dem einen(!) Stylesheet für alle Browser zu notieren: '*+html'-Hack für IE 7, '* html'-Hack für ältere IEs …

Verschiede Stylesheets für verschiedene Browser sind wartungsaufwendig, fehleranfällig, zu vermeiden.

Qapla'

[suit]

Ist das sinnvoll? Nein.

Das hatten wir schon :p

Sinnvoll ist es, Anpasungen für bestimmte Browser in dem einen(!) Stylesheet für alle Browser zu notieren: '*+html'-Hack für IE 7, '* html'-Hack für ältere IEs …

Welche Vor- und Nachteile das hat, wissen wir bereits. Ich verwende beide Methoden, je nach Projektdimension - bevorzuge aber defintiv Conditional Comments. Sind es ein oder zwei Korrekturen sind Hacks durchaus vertretbar. Sind es hingegen viele Korrekturen und handelt es sich um eine komplexe Umgebung bei der ggf. noch viele Leute arbeiten, sind Conditional Comments aber wesentlich vernünftiger handzuhaben.

Verschiede Stylesheets für verschiedene Browser sind wartungsaufwendig, fehleranfällig, zu vermeiden.

Je nach Dimension sinkt der Wartungsaufwand drastisch - fehleranfällig sind Hacks auch, wenn man z.B. ein CSS-Komprimierungstool verwendet der dann die gängigen IE6 und IE7-Hacks zusammenfasst, was bekanntlicherweise Probleme bereiten kann.

[Gunnar Bittersmann]

@@suit:

nuqneH

Welche Vor- und Nachteile das hat, wissen wir bereits.

„Wir“ ja. Andere nicht.

fehleranfällig sind Hacks auch, wenn man z.B. ein CSS-Komprimierungstool verwendet der dann die gängigen IE6 und IE7-Hacks zusammenfasst, was bekanntlicherweise Probleme bereiten kann.

Du meinst, dass ein CSS-Komprimierungstool

  *+html foo { bar: baz }  
  * html foo { bar: baz }

zusammenfasst zu
  *+html foo,*+html foo{bar:baz}

In der Tat ein Problem. Welches sich aber in Luft auflöst, wenn man die zwanghafte Vorstellung hinter sich lässt, IE 6 und älter noch unterstützen zu müssen.

Qapla'

[suit]

Du meinst, dass ein CSS-Komprimierungstool

*+html foo { bar: baz }

* html foo { bar: baz }

> zusammenfasst zu  
>   `*+html foo,*+html foo{bar:baz}`{:.language-css}  
  
Richtig.  
  

> In der Tat ein Problem. Welches sich aber in Luft auflöst, wenn man die zwanghafte Vorstellung hinter sich lässt, IE 6 und älter noch unterstützen zu müssen.  
  
Das ist aber nicht praxisorientiert, da der IE 6 immer noch einen erschreckend großen Marktanteil hat. Das kann man sich im Geschäftsleben, wenn man etwas verkaufen möchte, nicht leisten.

[Gunnar Bittersmann]

@@suit:

nuqneH

Das ist aber nicht praxisorientiert, da der IE 6 immer noch einen erschreckend großen Marktanteil hat.

Zielgruppenabhängig.

Das kann man sich im Geschäftsleben, wenn man etwas verkaufen möchte, nicht leisten.

Wir leisten uns das.

Google leistet es sich. Und dabei geht es auch um Funktionalität, nicht wie hier lediglich um Kosmetik.

Qapla'

[suit]

Wir leisten uns das.

Ich hab' auch kürzlich eine Seite umsetzt, bei der man sich es leisten konnte, auf den IE 6 sowie Benutzer ohne Flash zu verzichten.

Aber allgemein empfehlen kann man das eben nicht.

Google leistet es sich. Und dabei geht es auch um Funktionalität, nicht wie hier lediglich um Kosmetik.

Bei Google ist das konzeptionell - je schneller de IE 6 ausgerottet ist, desto schneller gibts noch mehr Kunden die noch mehr Geld ausgeben.

[Beat]

Du willst also das IE7-Stylesheet auch für den IE6 laden lassen? Ist das sinnvoll? Ich habe für IE6 ein eigenes Zusatz-Stylesheet, ebenso für den IE7.

Ist das sinnvoll? Nein.

Sinnvoll ist es...

... die ewigen gleichen Kriege zu unterlassen.
Viele Wege führen nach Rom. Aber wer nicht nach Rom pilgert, darf gewiss sein: Rom ist untergegangen, auch wenn es viele noch nicht wissen.

mfg Beat

[suit]

Rom ist untergegangen, auch wenn es viele noch nicht wissen.

Ist der Trevi-Brunnen übergelaufen?

[Beat]

Rom ist untergegangen, auch wenn es viele noch nicht wissen.
Ist der Trevi-Brunnen übergelaufen?

Code bewahre, die Hölle kann nicht überlaufen...

mfg Beat

[Gunnar Bittersmann]

@@Beat:

nuqneH

Sinnvoll ist es...
... die ewigen gleichen Kriege zu unterlassen.

Es sind immer wieder andere Anfänger, die die Nachteile von Extra-IE-Stylesheets noch nicht wissen.

Qapla'

[suit]

Es sind immer wieder andere Anfänger, die die Nachteile von Extra-IE-Stylesheets noch nicht wissen.

Es sind immer wieder alte Hasen dabei, die die Vorteile von Extra-IE-Stylesheets nicht sehen :p

[Gunnar Bittersmann]

@@suit:

nuqneH

Es sind immer wieder alte Hasen dabei, die die Vorteile von Extra-IE-Stylesheets nicht sehen :p

Ich erwähne sie sogar jedes Mal. :-b

Qapla'

[Beat]

Sinnvoll ist es...
... die ewigen gleichen Kriege zu unterlassen.

Es sind immer wieder andere Anfänger, die die Nachteile von Extra-IE-Stylesheets noch nicht wissen.

Und es sind die immer gleichen, die die Nachteile von CSS-Hacks[1] unter den Tisch wischen.

[1] Ein CSS-Hack ist eine non-standard Syntax, die, weil sie angewendet wird, die zukünftige CSS-Syntax-Entwicklung behindert, sobald diese in Konflikt mit jener Hackerei gerät.

mfg Beat

[suit]

[1] Ein CSS-Hack ist eine non-standard Syntax, die, weil sie angewendet wird, die zukünftige CSS-Syntax-Entwicklung behindert, sobald diese in Konflikt mit jener Hackerei gerät.

Jein - die beiden von Gunnar genannten häcks werden kaum irgendetwas beeinträtigen. Der einzige Fall wo man ein Problem damit hätte wären vermutlich XHTML-Dokumente in denen vollständige XHTML-Dokumente in andere XHTML-Dokumente eingebunden werden - aber da hätte man ohnehin auch Probleme mit anderen Regeln.

[Gunnar Bittersmann]

@@Beat:

nuqneH

[1] Ein CSS-Hack ist eine non-standard Syntax, die, weil sie angewendet wird, die zukünftige CSS-Syntax-Entwicklung behindert, sobald diese in Konflikt mit jener Hackerei gerät.

Nein. Ich spreche nicht von foo { _bar: baz } oder foo {ba\r: baz }.

*+html foo { bar: baz } ist standardkonformer CSS-Code, der nichts be- oder verhindert.

Qapla'