Jeder Browser bringt seine eigenen Default-Formatierungen für HTML-Tags mit. Ein wahrer Fluch! Sehr oft macht es Sinn, diese Formatierungen zurückzusetzen, bevor man sich an die Entwicklung von eigenem HTML und CSS macht. Sei es für Webseiten oder auch Widget und Werbemittel.

Meyerweb hat dazu ebenso wie Yahoo einen sehr interessanten Artikel geschrieben. Beide stellen CSS zur Verfügung, dass genau diesen Reset durchführt.

Ich habe sehr oft das Problem, dass ich ein Widget entwickeln muss, was nicht in einem ifram ausgeliefert wird, sich sozusagen mit der gegebenen Webseite arrangieren muss. Die Probleme die dabei auftreten sind zahllos. Diverse Browsermacken potenziert mit schlecht gekapseltem CSS.

Will man den Injection-Code möglichst schlank halten, so verbietet es sich Tonnenweise Inlinestyles zu nutzen.

Für mich hat es sich bewährt, den relevanten HTML-Code zusammen mit dem zu ladenden Javascript direkt in die Webseite einzubauen und das HTML aus dem Javascript heraus zu formatieren. Genau hier macht der Reset der eingefügten HTML-Elemente Sinn.

Um diesen Vorgang etwas angenehmen zu gestallten habe ich mir eine Javascript-Funktion geschrieben, die diesen Reset vereinfacht.

Die Funktion erwartet als Parameter das zu zurückzusetzende Element.

ResetStyles( document.getElementById( 'mywrapper' ) );
 
function ResetStyles( element ) {
  switch( element.tagName.toUpperCase() ) {
    case 'OL':
    case 'UL': {
	    AddStyles( element, [ "listStyle='none';" ] );
      /* kein break */
    }
    case 'OL':
    case 'UL':
    case 'DIV':
    case 'SPAN':
    case 'IMG':
    case 'A': {
        AddStyles( element, [ "margin='0 0 0 0';", "padding='0 0 0 0';", "border='0px';", "outline='0';", "fontSize='100%';", "verticalAlign='baseline';", "background='transparent';" ]);
      break;
    }
    case 'TABLE': {
      AddStyles( element, [ "borderCollapse='collapse';", "borderSpacing='0';" ] );
      break;
    }
  }
}
 
function AddStyles( element, styles ) {
  with( element.style ) {
    for( var k=0; k<styles .length; k++ ) {
      eval( styles[ k ] );
    }
  }
}

Die Hilfsfunktion AddStyles kann im Anschluss genutzt werden um die gewollten Styles zu setzen.

Ich habe die Funktion auf die für mich relevanten Elemente beschränkt. Sie kann bei Bedarf simpel ergänzt werden. Einzig auf die Javascript-Notation von Stylesheet-Angaben muss geachtet werden. Simple Regel: Man nutzt Camelcaps, entfernt die Bindestriche und ersetzt den : durch ein =.
Aus vertical-align: middle; wird verticalAlign=’middle’;

Update
Die CSS-Angabe float kann nicht 1:1 übersetzt werden. Für den Firefox muß cssFloat und für den Internet Explorer styleFloat benutzt werden. Man muß nicht zwangsläufig unterscheiden und kann einfach immer beide Werte setzen.