|
|||
![]() Zitat:
Zitat:
__________________
bye Rene |
Sponsored Links |
|
|||
![]() Zitat:
siehe auch http://www.css-technik.de/details/30...owser-Bugs.htm </edit> Keinen speziellen für Safari, und auch kein Hack, aber Code:
head:first-child+body #id { .... } Übrigens Mozilla 1.xx / Opera 7.xx können es interpretieren ![]() @fricca - Teste bitte mal ob der Safari das interpretiert, besser wäre natürlich wenn noch mehr Leute sich mal beteitigen und wir ein Cross-Browser Test hinbekommen. Code:
head:first-child+body { /* wenn der erste Tag nach dem * </head> ein <body> ist !! * (immer der Fall) * * Mozilla 1.xx / Opera 7.xx */ background-color: #FF0000; } Der Safari kann diesen Selector doch lesen, trotzdem kann er kein min-height !! http://www.xhtmlforum.de/viewtopic.php?p=23102#23102 </edit>
__________________
</ulle> |
Sponsored Links |
|
|||
![]()
Safari-Hack von Toscho
....diesen hatte ich mal von Toscho gespeichert Code:
Eine nebenwirkungsfreie Methode, Safari anzusprechen, existiert nicht. Er versteht jedoch – wie sonst nur Mozilla – die Pseudoklasse »:last-child«. So läßt sich eine Regel erst für Safari schreiben und danach für Mozilla wieder überschreiben: Code: body:last-child p { color: blue; } body:-moz-last-node p { color: black; } Seit Version 1.2.3 versteht Safari die Pseudoklasse »:lang()«, so lassen sich jüngere Versionen leicht ansprechen: Code: :lang(de) body:last-child p { color: blue; } Dieser Trick sollte in regelmäßigen Abständen überprüft werden, denn sobald ein anderer Browser ebenfalls »:last-child« interpretiert, funktioniert das nicht mehr.
__________________
</ulle> |
|
|||
![]() Zitat:
Variante 1 - body {display:table} Container klebt links oben Variante 2 - body {display:table-cell} Container klebt Mitte oben Im Camino funktionieren beide Varianten einwandfrei. |
|
|||
![]()
Mal das Thema vertikale Zentrierung wieder aufwärmen.
Ich bin auf ein Verhalten gestoßen, dass vertikales Zentrieren möglich macht, wenn man ein Element mit float-Eigenschaft und negativem margin vor das zu zentrierende setzt: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Vertikal zentriert?</title> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; } body { background-color:silver; text-align:center; } #abstand { width:5px; height:50%; background-color:red; margin-bottom:-200px; /* halbe Höhe von #container */ float:left; } #container { margin:0 auto; text-align:left; height:400px; width:700px; clear:left; background-color:yellow; } </style> </head> <body> <div id="abstand"></div> <div id="container">Text Text Text Text</div> </body> </html> edit: --- Ich glaube, jetzt verstanden zu haben, warum es funktioniert: #distance/#abstand bekommt 50% von der Höhe des Viewports und einen negativen margin-bottom in der halben Höhe von #container, damit sich #container in die vertikale Mitte des Viewports bewegt. So würde #container nach oben verschwinden, sobald die halbe Höhe von #container größer als die halbe Höhe des Viewports wäre (wie bei der Methode mit position absolute) float und clear hilft, weil für clear(:left) festgelegt ist: | [...] to place the top border edge below the | bottom outer edge of any left-floating boxes Da es negative Höhen nicht gibt, sitzt der untere Rand von #distance/#abstand auch bei margin-bottom > height nie über der oberen Kante der Box und #container bewegt sich maximal bis dorthin. --- Positiv getestet in: Win: Opera 6-8 Netscape 6+7 Firefox 1.04 IE 5.0 - 6 Mac OsX: Safari 1.0.3 Netscape 7 Opera 6 Camino Mac OS9: Mozilla 1.2.1 Netscape 7 Funktioniert nicht in MacIE 5, da height:50% falsch berechnet wird (50% der Breite des Elternelements?) edit: funktioniert auch in IE5 Mac (OS X und OS 9), wenn im Quirksmodus und kein html, body {height:100%} (merci zweistein) Geeignete Doctype um nur IE Mac in den Quirks-Modus zu setzen: HTML 4.01 Strict ohne URL Ins reguläre Stylesheet muss html, body {height:100%;} rein, nur für IE5 Mac dann wieder überschreiben [separates Stylesheet per @import("iemac.css");] hier eine online-Version (bei Detlef Graff abgelegt - Merci ![]() Bitte mal anschauen und testen. Grüße fricca PS: ich find's nicht so toll, dass ein zusätzliches Element benötigt wird - aber das lässt sich z.B. als Container für Sprunglinks nutzen - und schon ist es kein überflüssiges Markup mehr... |
|
|||
![]() Zitat:
__________________
</ulle> |
|
|||
![]() Zitat:
[Schmeiß float und clear raus und er verschwindet wieder...] Oder ist das bei dir anders, wenn du den Code auprobierst? |
|
|||
![]() Zitat:
![]() Zitat:
Prima Workout! Bleibt aber der Nachteil dass man wissen muß wie hoch der Container sein muß ![]() XHTML 1.0 STRICT ![]() Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; border-collapse:collapse; border-spacing: 0; } html, body { color: #000000; background: #EEEEEE; line-height: 1.45; height : 100%; } body { font-size: 100.01%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; } #viewport50 { /* [float] verhindert * negatives verrutschen des #container * aus denm Viewport */ float:left; display: block; height:50%; width:5px; /*halbe Hoehe von #container */ margin-bottom: -20em; background-color:red; } #container { clear:left; /* halbe Hoehe negativer [margin-bottom] im #viewport50 */ min-height: 40em; /** fuer alle Browser; */ height: auto ! important; /* nur fuer IE-Win (size-value); * verbergen IE-Mac \*/ height: 40em; /* ende verbergen IE-Mac */ width: 80%; margin: 0 auto; background-color:yellow; } /*]]>*/ </style> </head><body> <div id="viewport50"></div> <div id="container">Text Text Text Text</div> </body></html>
__________________
</ulle> |
|
|||
![]() Zitat:
Wobei sich mir immer noch die Frage stellt, weshalb es überhaupt funktioniert... ![]() ![]() |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bild zentrieren | JuKo | CSS | 4 | 21.03.2018 01:35 |
Verschiebungen bei größerem Bildschirm | seelefant | CSS | 4 | 28.07.2014 16:43 |
Unterschiedliche Darstellung in Firefox / IE | memphis2k | CSS | 16 | 30.08.2011 18:40 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
Problem mit CSS in Joomla 1.5 | noobilicius | CSS | 6 | 25.09.2008 21:24 |