IE und vertical-align

[goldzahn]

Hallo.

Ich habe in einer Tabellenzeile drei "große" Zellen:
in die linke kommt der linke schatten zu zweiten zelle,
in der mittleren zelle befindet sich der content,
und in der rechten zelle ist(soll) der rechte teil des schattens zu zelle 2.

den schatten habe ich jeweils in drei Teile aufgeteilt:
1. 40x160 Pixel
2. 40x1 Pixel
3. 40x110 Pixel

mein momentaner Code:

[...]
<td height="100%">
<table height="100%" cellspacing="0" cellpadding="0" class="shadow_left_t1">
<tr height="160">
<td height="160" class="td_shadow_left_top">
<img src="./gfx/blank.gif" height="160" width="40" alt="" class="shadow_left_top">
</td>
</tr>
<tr height="100%">
<td height="100%">
<img src="./gfx/blank.gif" height="100%" width="40" alt="" class="shadow_left">
</td>
</tr>
<tr height="110">
<td height="110" class="td_shadow_left_bottom">
<img src="./gfx/blank.gif" height="110" width="40" alt="" class="shadow_left_bottom">
</td>
</tr>
</table>
</td>
<td height="100%">[...]>>Content

CSS dazu:

.shadow_left_top {
	background-image: url(./gfx/shadow_left_top.png);
}

.shadow_left {
	background-image: url(./gfx/shadow_left.png);
	background-repeat: repeat-y;
}

.shadow_left_bottom {
	background-image: url(./gfx/shadow_left_bottom.png);
}

.td_shadow_left_top {
	vertical-align: top;
}

.td_shadow_left_bottom {
	vertical-align: bottom; 
}

Jedoch greift zum einen das vertical-align in keinem Browser und zum anderen füllt die mittlere Zelle nicht den restlichen Platz.
Habe schon den ganzen Code auf den Kopf gestellt und alles mögliche ausprobiert...als es dann in Opera funktionierte, streikte der IE

Was mache ich falsch?

 

[Maik]

Hi,

vielleicht solltest du einfach auf ein tabellenloses CSS-Layout umsatteln?

Zumal das Tabellen-Element semantisch nicht als "Layout-Werkzeug" für ein HTML-Dokument dient, sondern um Daten tabellarisch darzustellen, sie zum Vergleich gegenüberzustellen.

 

[goldzahn]

Und zwar? Mache ich gerne, wenn du mir sagst wie
Habe schonmal versucht mich davon zu lösen, aber es nicht geschafft, da einfach alles so vertraut ist und alles seinen festen platz hat.

Wie würde man das denn ohne Tabelle umsetzen?

 

[Online-Skater]

Das glaube ich dir gut und gerne. Komplex grapfische Websites ohne Tabellen darzustellen ist richtig anspruchsvoll und kostet ne Menge ärger, aber es lohnt sich zumindest was Kompatibilität und Standards angeht. Bei deinem relativ simplem Beispiel sollte es nicht so kompliziert sein, dieses in div layern zu packen. Natürlich kostet es ein wenig Lernzeit sofern man sich noch nie richtig mit CSS und Div-Strukturen beschäftigt hat.
Gute Seiten und Tutorials zu dem Thema gibts zu haufe

 

[Peter Klein]

Du könntest es z.b. mittels einer Liste machen. Diese dann so formatiert wie du es gerne hättest.

Ebenfalls geht es indem du Container nebeneinander floaten lässt.

Lies dich mal rein, eine gute Seite ist z.b. http://www.css4you.de

 

[Maik]

Studier mal den Artikel Onion Skinned Drop Shadows.

Ansonsten kann ich dir diese Seiten mit Anleitungen und Beispiele für CSS-basierte Layouts empfehlen:

1. andreas kalt.de: Ein CSS-Layout erstellen
   
2. barrierefrei.e-workers.de: Workshop - temp
   
3. CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen
   
4. css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
   
5. intensivstation :: CSS Templates :: Templates
   
6. ironmyers.com | CSS Layouts
   
7. selfHTML: CSS-basierte Layouts
   
8. Stichpunkt CSS: Layout ohne Tabellen
   
9. stu nicholls | CSS PLaY

 

[goldzahn]

Danke für die vielen Tipps!

Aber ich fänd es gut, die Anwendung von div-layern mal an meinem Beispiel zu sehen.
Könnte mir das mal bitte jemand zeigen?

 

[Maik]

Im letzten Abschnitt "Do it yourself" findet sich der Link zur Drop Shadow Gallery.

 

[goldzahn]

hmm wenn ich das jetzt auf diese art und weise machen würde, müsste ich wieder ALLES umschreiben...könntest du mir nicht bitte für mein eines beispiel da oben das vormachen. so kann cih mich dann step by step herantasten...sonst müsste ich alles auf einen schlag machen.
Danke

 

[Maik]

Vielleicht kommst du mit Stu Nicholls' Simple fluid drop shadows besser zurecht?

Ich denke, dass ich dir genügend informative Seiten genannt habe, auf denen du Beispiele zum Experimentieren findest, um dich mit der Technik vertraut zu machen.