Bartelme Design — Display Bugs fixed

Nach der Umstellung auf das neue Design neigten diverse Browser zu einigen seltsamen Verhaltensweisen. Safari hatte Probleme beim Rendering der Schriften, IE/Win verweigerte das Markieren von einzelnen Textabschnitten und Firefox hatte Probleme mit der Anzeige der Hauptnavigation. Nach mehreren Versuchen, konnte ich die Probleme jedoch in den Griff bekommen.

Alles ist relativ

Nach mehreren Experimenten mit meinem CSS, konnte ich das Problem einschränken: es musste demnach entweder an der CSS-Definition des Contents oder an jener des Sidebars liegen. Es stellte sich schließlich heraus, dass es am Fehlen des CSS-Properties position:relative gelegen haben muss. Nachdem ich das CSS um dieses Property erweitert hatte, zeigten sowohl Safari, als auch IE/Win die Seite richtig an.

Firefox und Scrollbars

Auch Firefox bzw. neuere Releases des Mozilla Browsers weigerten sich beim erstmaligen Anzeigen der Seite, die Tabs zu rendern. Weiters zeigten sie ein merkwürdiges Verhalten bei aktivierten Scrollbars; sobald Scrollbars angezeigt werden mussten, wurde der Rollover-Effekt der Hauptnavigation nicht mehr angezeigt. Der Grund dafür lag an der CSS-Regel für die Listenelemente. Ursprünglich sah diese folgendermaßen aus:

#mainnavi li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline;
}

Mittels display:inline wurden die einzelnen Listenelemente nebeneinander angezeigt. Dies war jedoch für Mozilla/Firefox problematisch, weshalb ich die Regel folgendermaßen abgeändert habe:

#mainnavi li {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline;
  display: block;
}

Nachdem ich diese Änderungen vorgenommen hatte, wurde die Navigation nun auch von Mozilla/Firefox richtig angezeigt.

——-