Kategorie: CSS

Fehler im Box-Modell

Der Internet Explorer hat ein Fehler im Boxmodell und interpretiert Breitenangaben anders als es der Standard vorgibt. Wenn man im IE eine Breite von 500 Px angibt (width: 500px;) und diesem Element noch ein Umrahmung von 2 Pixeln gibt (border: 2px;), dann erhält das Element vom Internet Explorer nur eine tatsächliche Breite von 496 Pixeln (500px – 2px linker Rahmen – 2px rechter Rahmen).

Alle anderen Browser geben dem Element eine tatsächliche Breite von 500 Px und addieren 4 Px in der Breite für die Umrahmung hinzu.

Kurzübersicht

width: 500px;
border: 2px;

Internet Explorer
Element-Breite: 496 Pixel
Rahmen-Breite: 4 Pixel
Gesamt-Breite: 500 Pixel

Mozilla Firefox
Element-Breite: 500 Pixel
Rahmen-Breite: 4 Pixel
Gesamt-Breite: 504 Pixel

Übrigens: Wenn man als Breite eine prozentuale Angabe macht, zählt der Firefox den Rahmen noch hinzu.

Leere Divs anzeigen

Im Internetbrowser werden keine Divs mit leeren Inhalten angezeigt. Um das zu designtechnischen Zwecken trotzdem zu erreichen, empfiehlt es sich in den „leeren“ Div Container ein geschütztes Leerzeichen (engl. non-breaking space) einzufügen.

Der HTML-Code dafür:   (das Semikolon am Ende nicht vergessen!).

DIV mitwachsen lassen

Möchte man einen DIV Container mit seinem Inhalt mitwachsen lassen, so muss man die CSS-Formatierung overflow: visible; für diesen Container setzen. Danach verlängert sich die Div Höhe, entsprechend der innenliegenden Container.

Für den Firefox kann man die DIV Breite auch direkt an den Inhalt anpassen.

Beispiel:

<div style=“display:table-cell; width:auto; background-color:#0000FF“>
Teeeeeeeeeeeeeeexxxxt
</div>

Der Internet Explorer 7 interpretiert die table-cell leider nicht.

Webmaster Tools

Momentan widme ich mich dem Webdesign, weswegen ich gerne auf sehr nützliche Webseiten aufmerksam machen möchte, die einem die Arbeit erleichtern.

Stripe Generator
Ein Streifengenerator, mit dem man sofort super Hintergrundmuster entwerfen kann.

Type Tester
Vergleich von Webschriftarten, denn im Web können nur wenige Schriftarten verwendet werden, die auf allen Betriebssystemen gleich aussehen.
Standard sind: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana

COLOURlovers
Einer Welt voller Farben! Von Farb-Enthusiasten für Farb-Enthusiasten. Bei den COLOURlovers findet man freche Farbzusammenstellungen mitsamt Paletten und RGB-Hex Werten.

CssLeak
Tausende perfekte Webseiten in einer Gallerie! Eine bessere Inspiration gibt’s nicht!

Get viewport size
Sichtbaren Webseiteninhalt im Browserfenster rausfinden.

Underline mit CSS definieren

Wer die Unterstreichung (engl. underline) für seine Texte formatieren möchte, muss dass ein bisschen mit CSS tricksen.

Beispiel-Code (HTML):

<h1><span>Überschrift</span></h1>

Beispiel-Code (CSS):

h1 {
    font: 21px ‚Trebuchet MS‘, Arial, Helvetica, sans-serif;
    color: #558201;
}

h1 span {
   border-bottom: 1px dashed;
}

Würde man auf das <span> verzichten, würde die gesamte Breite des <h1>-Tags unterstrichen werden (und nicht nur der Text).