IE Title Bug

Donnerstag, März 27th, 2008

Mir ist einmal ein kleiner Fehler passiert, welches 1 Stunde arbeit gekostet hat um ihn zu finden. Denn ich hab immer an falscher Stelle gesucht und keine Tidy Tool benutzt. Es geht um folgenden tag den <title></title>. Wenn man ihn etwas falsch schreibt zeigt der IE6 eine weiße Seite an, aber alles wird geladen und sogar Javascript wird ausgeführt. Andere Browser zeigen die Seite ganz normal an.

Hier mal Code um es auszuprobieren:

<html>
<head>
<title Das wird zum Fehler führen</title>
</head>
<body style="background:red">
Hallo IE, du Krüppel!!!
</body>
</html>

Wenn man <title nicht mit “>” abschließt, dann sieht man Weiß im IE.



Input Buttons Part I

Donnerstag, Februar 28th, 2008

Dieses Problem ist schon vielen Hml Designern begegnet. Die Input Buttons sehen einfach in allen Browsern anders aus und im IE noch schlimmer.
Aber man kann sie doch Bändigen die Browser und die Buttons. Man muss nur die CSS anpassen und schon hat man ein 95% Ergebnis.
Die vorteile an solchen Buttons ist die Flexibilität, man kann sie internationalisieren und man hat gleiches Bild in IE, Firefox und Opera.

Also als erstens legen wir ein Input Button an:

<input class="button" type="submit" name="send" value="Mein Text" />

Dann legen wir eine CSS Klasse an:

input.button     {
 display:inline;
 margin:0 5px;
 padding:0px 5px;
 height:21px;
 font-weight:bold;
 font-size:12px;
 color:#000;
 border:1px solid #666;
 background:#ccc;
 cursor:pointer;
 overflow:visible;<;/blockquote>;
}

Der wichtigste Attribut in der CSS, ist das overflow:visible. Es entfernt in dem IE die seitlichen Abstände.

Ihr könnt jetzt eure eigene Styles mischen wie color, margin, padding , background-color und die border.

Man kann mehrere solche Buttons in ein Container tun und Zentriert anzeigen:

<div style="text-align:center">
 <input class="button" type="submit" name="preview" value="Vorschau" />
 <input class="button" type="submit" name="send" value="Absenden" />
</div>

Und hier ist das ergebnis:

Das war erstmal alles zu den Input Buttons, im nächsten Teil werde ich zeigen wie man Web2.0 Buttons mit Runden Ecken und Verlauf macht.