# IE und vertical-align



## goldzahn (5. Mai 2007)

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 (5. Mai 2007)

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 (5. Mai 2007)

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 (5. Mai 2007)

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 (5. Mai 2007)

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 (5. Mai 2007)

Studier mal den Artikel Onion Skinned Drop Shadows.

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


andreas kalt.de: Ein CSS-Layout erstellen 

barrierefrei.e-workers.de: Workshop - temp

CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers 

intensivstation :: CSS Templates :: Templates 

ironmyers.com | CSS Layouts 

selfHTML: CSS-basierte Layouts 

Stichpunkt CSS: Layout ohne Tabellen 

stu nicholls | CSS PLaY


----------



## goldzahn (5. Mai 2007)

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 (5. Mai 2007)

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


----------



## goldzahn (5. Mai 2007)

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 (5. Mai 2007)

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.


----------

