Bei der Seite, die ich aktuell erstellt habe, ist ein interessantes Problem aufgetreten.
(mehr …)
Beiträge der Kategorie css
Darstellungsfehler in Opera
Ja, das gibts auch mal – Fehler in Opera! Wie man den löst, weiß ich noch nicht, aber ich beschreibe das Problem schonmal.
Div A floatet rechts, direkt dahinter ist Div B, floatet ebenfalls rechts. In Div A ist eine Liste mit Links, einer davon hat ein eingebettetes Div, dass bei Rollover über das Listenelement aufklappt. Dieses Div ist deutlich breiter als das übergeordnete Listenelement. In Opera sorgt nun das Rendering für ein sonderbares Verhalten im aufklappbaren Div. Dieses wird nur zum Teil darstellt, wenn man mit der Maus in den Bereich reinfährt, wo etwas sein soll, so wird der Rest strückchenweise dargestellt. In allen anderen Browsern ist es bei richtiger Implementierung korrekt. Verändert man nun das Floating von Div B, so wird alles wieder richtig dargestellt.
Beispiel folgt in Kürze!
IE Button Padding
Ich hatte schon länger die Vermutung, dass der Inhalt der Submit-Buttons im IE (also das Label) das Padding beeinflußt. Zunächst dachte ich, es wären die Auswirkungen des Double-Margin-Bugs (nur im Bezug auf Padding, im IE würde es mich nicht wundern) oder ich hätte es falsch gesehen. Heute war ich so genervt (ich meine neugierig), dass ich mal eine Testseite gemacht habe.
Dann habe ich auch mal nach einer Lösung gesucht und tatsächlich was gefunden, was zu funktionieren scheint – nämlich hier. Der Fix (width: 1; overflow: visible;) verwirrt den Firefox aber doch, daher mein Vorschlag für die IE den Hack zu verwenden. In der Testseite sind übrigens die „normale“ Variante und der Fix gegenüber gestellt.
input {
padding: 0 10px;
}
*html input {
width: 1;
overflow: visible;
}
*+html input {
width: 1;
overflow: visible;
}
Rounded Corners in CSS (with a little help from php)
Es gibt einige Beispiele im Web, wie man abgerundete Ecken mit CSS machen kann. z.B. hier:
CSS Play
Dabei wird nach der Methode der Näherung immer pro Zeile eine Linie gezeichnet. Die Methode hat den Vorteil, dass man keine Bilder zeichnen muss und einfach die Farben ändern kann. Der Nachteil sind die unzähligen Divs, die einen schwachen Browser vielleicht auch mal zur Verzweiflung bringen können. Aber die Entscheidung, wie mans macht überlasse ich jedem selbst. Ich habe nur PHP dazu verwendet, um mir diese Divs und das CSS dazu zu generieren. Dabei kommt der gute alte Satz des Pythagoras zum Einsatz.
Hier mal eine kurze Erklärung, was das Skript macht. Zunächst ist da ein umgebendes div, das relativ positioniert wird, darin ist ein Div mit Inhalt – das kann auch ein Bild, ein Text, eine Tabelle etc. sein. Und am Ende 4 weitere Divs, die als Ecken gerendert werden. Jedes dieser vier Eck-Divs enthält viele weitere Divs, und zwar pro Rundungszeile einen. In der Variablen r definiert man den Radius der Ecken.
zum Testen
Download (ist eine Html-Datei, einfach speichern und Endung ändern)
Listen-Bug in IE
Tada! Nach dem Finder des Bugs (mein Kollege) taufe ich den bug feierlich auf den Namen „Kra-bug“!
Beschreibung:
Ein Listenelement mit einer weiteren Liste als Unterelement mit einer Hintergrundfarbe beeinflußt das folgende komplett unschuldige Listenelement.
Auftreten:
Wenn bei dem aktuellen aufgeklappen Listenelement das Padding-Bottom auf 0 gesetzt wird, und es vorher einen Wert hatte.
Beispiel:
Hier der HTML Code.
Dieses CSS ist noch ok.
ul {
background-color: gray;
}
li {
position: relative;
padding: 5px 0 5px 5px;
}
li.act,
li.act ul{
background-color: silver;
}
Das bringt den armen IE6 total durcheinander:
li.act {
padding: 5px 0 0 5px;
}
oder auch das:
li.act {
padding-bottom: 0;
}
Wenn jemand woanders eine Beschreibung des Bugs findet, bitte schreiben.
Widrigkeiten des IE6
Hab heute ein kleines Drop-Down-Menü umgesetzt, so ähnlich wie das hier:
http://www.cssplay.co.uk/menus/final_drop2.html
Erkenntnisse des Tages:
- ohne der Angabe der background-color (oder background allgemein) in den Untermenüpunkte reagiert der IE6 gar nicht auf Drop Downs
- der IE8(Beta) funktioniert selbst im IE7-Modus anders als der IE7 nativ, da wurde der aktive Status vom Menü nicht korrekt dargestellt und gelegentlich verschwinden die Texte
- Windows und Mac haben komplett unterschiedliches Schriften-Rendering, auf dem einen System ist die Schrift ganz passabel, auf dem anderen passt sie nicht in die Ausgabefläche
- bei verschachtelten Menüs verschwinden die Menüpunkte komplett, wenn man mit Transparenzen arbeitet – man kann ein transparentes Menü machen, es verschwindet aber, wenn man versucht es nicht transparent zu machen bei Rollover
Lösung gibt es für die vielen Probleme leider keine, immer nur Workarounds. Da macht man das Menü im IE6 bei Rollover eben nicht opaque, gibt einen schwachsinningen Hintergrund, damit es angezeigt wird. *kotz*
IE8 Compliance Tag
Falls man (wie ich) den IE8 Beta zum Testen installiert hat, dieser den IE7 platt gemacht hat und die Seiten darin echt sch… (schlecht) aussehen, hier gibt es Hilfe – der Meta Tag, der dem IE8 sagt, wie er die Seite zu rendern hat.
Funktioniert sogar. Ich bekomme langsam Kopfschmerzen und schlage vor, einfach nur Screenshots mit Imagemaps auszuliefern.
Firefox als Webseite
Das ist auch ein wenig älter, fiel mir letzens ein. Ich hatte mal aus Spaß eine Seite machen wollen, die aussieht wie ein Browser und sich teilweise auch so verhält. Damals war Firefox 1 noch aktuell, also habe ich den nachgebaut. Exakt wie in einer 1024×768 Darstellung. Die Lesezeichen sind das Menü, die Icons sind nur Deko, die Adresszeile könnte ein Rootline-Menü sein und als Highlight – der Loader dreht sich beim Rollover. Ich finds schick und ein wenig nostalgisch (wo Firefox 3 als Beta schon da ist).
Panorama mit JavaScript
Dieses Experiment ist schon ein wenig älter, trotzdem sehr schön. Jeder kennt Panoramen mit QuickTime oder Flash. Ich wollte eine Möglichkeit finden, das gleiche (wenn auch ein wenig simpler) mit JavaScript umzusetzen.
Beim Laden der Seite wird eine Funktion aufgerufen, die das Div, in dem gescrollt werden soll, ausmisst. Dieses Div wird mit drei Listenern versehen:
– beim Bewegen der Maus über das Div wird eine Variable gesetzt, dass gescrollt werden soll
– beim Bewegen der Maus aus dem Feld wird das Scrolling beendet
– beim Bewegen der Maus wird die Position ermittelt und falls die Variable „scrollActive“ gesetzt ist, wird das Hintergrundbild verschoben
Im ersten Beispiel reiht sich der Hintergrund unendlich aneinander und man kann somit unendlich scrollen.
JavaScriptScroll unendlich
Im zweiten Beispiel wird nicht mehr gescrollt, wenn der Hintergrund um einen bestimmten Wert verschoben worden ist, so dass man das Verhalten vom QuickTime-Panorama etwas simulieren kann.
JavaScriptScroll begrenzt
Schicke Input-Buttons und Links
Einen Input-Button zu stylen ist an sich nicht so schwer, die Probleme entstehen dann, wenn man es in mehrern Browsern (Firefox, IE6 und IE7) gleich haben möchte. Außerdem sollten die Buttons skalierbar sein und trotzdem einen schönen Hintergrund haben.
Dazu habe ich erstmal eine Klasse definiert, die für input-Buttons und Links gleichermaßen gelten sollte und darin folgendes definiert:
padding: 2px 30px 2px 10px;
border: 0 none;
background: #fff url(’schicke_buttons/submit_button_green.gif‘) top right no-repeat;
cursor: pointer;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
outline: 0 none;
color: #555555 !important;
Die Eigenschaft padding passte aber nicht für Links, daher wird sie ein wenig angepasst. Gleichzeitig wird für Links ein Rand links definiert, was dem Button sein endgültiges Aussehen gibt. Damit wäre man erstmal mit allem fertig, wenn da nicht der IE wäre. Dieser gibt dem Button, sobald man irgendwie die Eigenschaft border setzt, einen Rand, und zwar häßlich und an allen Seiten.
Daher wird der Rand nur für den „unproblematischen“ Browser Firefox definiert mit einem Selector, den der IE7 nicht versteht (html>body kann der mittlerweile auch).
Da man dem Input-Button im IE nicht einfach einen Rand geben kann aus dem eben genannten Grund, muss man sich mit einem Span drumrum gehelfen. Dieser Span definiert den Rand links neben dem Feld und löst gleichzeitig das Problem mit dem 3px-floating-bug.
Wenn man diese schicken Buttons in Typo3 benutzen möchte, besteht das Problem, dass die Formulare automatisch generiert werden und man keine Möglichkeit hat, einen Span um den Button einzufügen. Daher habe ich kleines Skript geschrieben, das diesen Span automatisch um einen Mailform-Button packt. So sollten die Buttons in allen Browsern aussehen, und hier ist das Beispiel zum Anschauen.
Neueste Kommentare