Vertical-align funktioniert in Firefox/Safari nicht

martinhahn90 · 09.05.2009

Servus Jungs,

schon wieder ich, schon wieder mit einem Problem und schon wieder werde ich hier vermutlich wunderbar geholfen, wie man so schön sagt.

Es geht wieder einmal um die Fotografenseite. Mittlerweile habe ich eine Stoppfunktion bereits selber hinbekommen, wenngleich ich noch nicht weiß, wie ich bei einem Klick auf Stop ein Play (samt Startfunktion) anzeigen lassen kann. Aber das sei hier erst einmal nebensächlich.

Mein Hauptproblem:
Ich habe links die Kategorien mittles "vertical-align: bottom;" an den unteren Rand des DIVs gepackt, was in dem von mir oft gescholtenen IE auch wunderbar klappt. Safari und Firefox mögen das jedoch nicht sonderlich.
Ich vermute auch fast, dass es im IE nur klappt, weil ich zusätzlich der td das Attribut "valign=bottom" gegeben habe...

Wisst ihr, was ich hier falsch mache? Habe im Forum bereits gesucht und gute Tipps zu margin:auto gefunden, um vertikal zu zentrieren, nur bringt mich das leider nicht weiter, hehe.

Codeschnipsel:

Code:

HTML:
<td class="kategorien" valign="bottom">
                <br />
                <br />
                <a href="#">still 1 &nbsp;</a><br />
                 <a href="#">still 2 &nbsp;</a><br />
                 <a href="#">industrie &nbsp;</a><br />
                 <a href="#">food &nbsp;</a><br />
                 <a href="#">architektur &nbsp;</a><br />
                 <br />
                 <a href="#">info &nbsp;</a><br />
                </td>

Code:

CSS:
.kategorien {
    width: 79px;
    font-size: 12px;
    text-align: right;
    vertical-align: bottom;
    float: left;
}

Liveversionen:
HTML:
CSS:

leohh · 09.05.2009

AW: Vertical-align funktioniert in Firefox/Safari nicht

Ein vertical-align, funktioniert nur auf inline-elemente.
Durch dein float, wird aber dein inline-element zu einem block-element, wodurch das v-align nicht mehr greifen kann.

Im IE funktioniert das nur, weil die redmonder eine eigene Vorstellung von der Spezifitaet haben, die noch nie mit den allgemeinen Vorstellungen und Wuenschen konform gingen. Es ist wirklich so, dass wenn etwas im FF + Safari bzw. Opera nicht so angezeigt wird, wie man es gerne haette, jedoch im IE funktioniert, dass es kein guter Code ist.

martinhahn90 · 09.05.2009

AW: Vertical-align funktioniert in Firefox/Safari nicht

Danke erst einmal.

Ich schaue auch genau deswegen immer zuerst in den Fuchs.

Mein Problem ist jedoch, wie ich den Code nun sauber bekomme, wie ich also das Problem mit v-align umgehe. Gibt es da eine Möglichkeit?

Herr_D · 09.05.2009

AW: Vertical-align funktioniert in Firefox/Safari nicht

martinhahn90 schrieb:
Danke erst einmal.
Ich schaue auch genau deswegen immer zuerst in den Fuchs.
Mein Problem ist jedoch, wie ich den Code nun sauber bekomme, wie ich also das Problem mit v-align umgehe. Gibt es da eine Möglichkeit?

bau 3 div nebeneinander und setzt das per position:relative; bottom:0; nach unten...

Die Tabelle ist voll merkwürdig...

martinhahn90 · 09.05.2009

AW: Vertical-align funktioniert in Firefox/Safari nicht

Danke schonmal für den Tipp. Weiß gerade auch nicht mehr, warum ich eine Tabelle gwählt hatte. Klappt ja auch so genau so "gut".
Das mit den 3 DIVs funktioniert nämlich bei mir nicht -.-*

Doitsu · 09.05.2009

AW: Vertical-align funktioniert in Firefox/Safari nicht

Herr_D schrieb:
bau 3 div nebeneinander und setzt das per position:relative; bottom:0; nach unten...

position:relative; - Bleib da, wo du bist - bottom:0; - und verschiebe dich um 0px nach unten?
Wirst wohl absolute meinen (?)

martinhahn90 · 10.05.2009

AW: Vertical-align funktioniert in Firefox/Safari nicht

Doitsu schrieb:
position:relative; - Bleib da, wo du bist - bottom:0; - und verschiebe dich um 0px nach unten?
Wirst wohl absolute meinen (?)

Bei position: absolute; passiert immerhin etwas, jedoch verschiebt sich dann alles aus meinem gewünschten Bereich heraus. :'(

martinhahn90 · 19.05.2009

AW: Vertical-align funktioniert in Firefox/Safari nicht

Servus Leute,

das ganze funktioniert nun nur solange, bis ich eine feste Höhe für eine der oben genannten Klassen eingebe. (Siehe Beispiel unten, dort ist eine feste Höhe vergeben, das Hintergrundbild wächst dann weiter nach unten, aber die Kategorien (liegen im navi-DIV) werden nicht mehr vertikal ausgerichtet...

Code:

#navibg { 
background-color: #ffffff; 
margin: 0 0 0 0; 
width: 300px; 
height: 650px; 
float: left;
}
.navigation {
    font-size: 16px;
    background-color: #ffffff;
    background-image: url('img/navibg.jpg');
    font-family: Futura;
    width: 300px;
    height: 415px;
    margin-right:0px;
    margin-left:0px;
    padding-left:0px;
    margin-top: 100px;
    float:left;
}
.kategorien {
    width: 79px;
    font-size: 12px;
    text-align: right;
    vertical-align: bottom;
    float: left;
}
.thumbarea {
    width:170px; 
    float: left; 
    visibility: visible;
}

Code:

<div id="navibg">
            <div class="navigation">
            <div><a href="index.php"><img src="img/logo.jpg" class="img" alt="Fotodesign Martin Wissen Startseite" /></a></div>
                 <div class="kategorien">
                <br />
                <br />
                <?php
                $query = $sql->sendQuery('SELECT id, posID, name
                    FROM fdw_image_cats
                    ORDER BY posID');
                while($row = $sql->fetchObject($query)) {
                    echo '<a href=\'index.php?catID='.$row->id.'\'>'.$row->name.'</a><br />';
                }
                ?>
                 <br />
                 <a href="kontakt.php">info &nbsp;</a>
                </div>
                <div class="thumbarea" id="boxTd" onmouseover='jtoggle()' onmouseout='jtoggleO()'>
                            
                            <br />
                            <br />    
                            <ul id="thumbs">
                            
                            <?php
                            $query = $sql->sendQuery('SELECT name, posID
                                FROM fdw_images
                                WHERE catID = \''.intval($catID).'\'
                                ORDER BY posID');
                            $i = 1;
                            while($row = $sql->fetchObject($query)) {
                                echo '<li value=\''.$i.'\'><img style=\'width:45px; height:35px;\' src=\'thumbs/'.$catID.'/'.$row->name.'\' alt=\'\' title=\'\' /></li>';
                                
                                $i++;
                            }
                            ?>
                            
                              </ul>
                            <div class="galerie-pfeile">
                            &nbsp;
                                <a href="javascript:slideShow.nav(-1)"><img src="img/pfeil-links.png" class="img" alt="voriges Bild" /></a>
                                <a href="javascript:slideShow.stop()"><img src="img/pfeil-pause.png" class="img" alt="Diashow anhalten" /></a>
                                <a href="javascript:slideShow.nav(1)"><img src="img/pfeil-rechts.png" class="img" alt="n&auml;chstes Bild" /></a>
                                </div>
                </div>
            </div>
            </div>