|
|||
Seite in Mozilla total "schräg"
Ich möchte für meinen Dad die Website überarbeiten und versuche gerade sie auf ein sauberes CSS-Layout umzustellen. Während der Erstellung hab ich sie nur im IE betrachtet, doch als ich sie jetzt mal im Mozilla öffnete überkam mich das Grauen
http://nina.gotdns.com/site/ Könnt ihr mir bitte helfen den CSS-Code so zu ändern, dass die Site nicht nur "jeden Code fressenden und gut darstellenden"-IE, sondern auch im "korrekten"-Mozilla (und diversen anderen Browsern) richtig darstellt? Für Hilfestellungen, Tipps, Erklärungen, etc. wäre ich sehr dankbar |
Sponsored Links |
|
|||
Nicht veraltet, nö. Ich habe mit nem Mozilla geschaut, du mit nem aktuelleren Firefox. Kann gut sein dass sich da schon was getan hat, aber da derbenutzte Mozilla nicht so alt war, hätte ich schon gerne dass die Site auch dort geht. Derzeit sieht es beim Mozilla Firebird so aus:
Das Logo kippt rechts nach unten ins Bild, anstatt oben neben der grauen Box zu bleiben. Die Links im Header stehen ganz unten, anstatt am unteren Rand der grauen Box zu stehen. In der linken Navigation kleben die Navlinks am oberen Rand anstatt etwas weiter unten zu sein. Zwischen linker Navigation und Bild fehlt der weiße Trennstreifen. Im Opera 7.2 ist alles wie beim Mozilla, nur dass das Logo am richtigen Platz steht. Ich schau mir heute abend mal diesen Boxhack an ob der hier anwendbar ist. Für weitere Tipps bin ich weiterhin offen |
|
|||
Hallo Nina,
da du das Logo neben der topnav plaziert hast und diese auf float:left steht, solltest du das Logo auch auf float:left; setzen Code:
#logo { float: right; margin: 0px; padding: 0px; background-color:#ffffff; width: 224px; height: 63px; } Code:
#line_vert1, #line_vert2 { float: left; margin: 0px; padding: 0px; background-color:#ffffff; width: 3px; } dann den inhalt usw
__________________
Ein Gedanke... unendliche Verbindungen |
|
|||
@starleos: Ich habe das mal versucht und den Versuch hier abgelegt. Das hat aber nichts gebracht und bewirkt nur, dass das Logo im Mozilla jetzt links unten über der Navigation klebt
|
|
|||
Bei mir ist im Mozilla und Firefox das Logo nicht vorhanden, ich schaue es mir gleich nochmal an, muss aber erst was erledigen. Melde mich.
__________________
Ein Gedanke... unendliche Verbindungen |
|
|||
So
Anfängerfehler Code:
#top { position:absolute; margin: 0px; padding: 0px; width: 766px; height: 63px; } #topnav { float: left; margin: 0px; padding-left: 5px; background-color:#2B3337; width: 542px; height: 63px; color:#ffffff; font-size:11px; font-family:verdana,sans-serif; } #logo { float: right; margin: 0px; padding: 0px; background-color:#ffffff; width: 224px; height: 63px; } Brieite Nav: 542px Brite Logo = 224px ergibt 766px ok passt..... aber padding-left: 5px; du braüchtest dann nicht 766 sondern ..... ? genau mindestens 771 px wenn du das ergänzt oder abziehst, ist das Logo neben der Nav wieder zu sehen
__________________
Ein Gedanke... unendliche Verbindungen |
|
|||
So, ich hab endlichmal wieder Zeit an dieser Page weiterzubasteln (ist kein Arbeitsprojekt ).
padding-left: 5px; hab ich rausgenommen und jetzt ist das Logo wieder da wo es sein soll. Danke für den Tipp Das Problem ist aber, dass jetzt die Top-Navigation wieder total an der "Wand klebt". Ne Idee wie ich die Schrift da seitlich ein Stück wegbekomme ohne dass ich dann wieder das Problem habe? Zweites Problem ist, dass in Opera/Mozilla bei der seitlichen Navigation zum Bild daneben kein Abstand ist (das gesamte Layout sollte von diesen weißen Linien "zerschnitten" sein) und die Nav so direkt dran klebt, während dann rechts der Abstand von Text zu rechtem Rand als Ausgleich zu groß ist. Im IE wirds so dargestellt wie ich es gerne hätte. Was muss ich jetzt ändern dass es auch wirklich stimmt so dass auch die "strengeren" Browser es hinbekommen? Aktuelle Testversion: http://nina.gotdns.com/site2/ |
Sponsored Links |
|
|||
Ich habe im Moment nicht die Zeit (oder Lust :) einer genauen Analyse, deshalb ein paar allgemeine Tips:
Zunächst sollte Dir immer bewusst sein, dass eine solche pixelgenaue Positionierung mt CSS wie Du ihn versuchst oft zu solchen und ähnlichen Problemen führt. Stelle im IE beispielsweise die Textgröße auf Mittel und lasse den IE die Schriftgrößen ignorieren (Extras > Internetoptionen > Allgemein > Eingabehilfen > Schriftgradangaben auf Webseite ignorieren). und schon fällt alles auseinander - denn bedenkte das auch fehlsichtige Menschen das Web benutzen. Übrigens finde ich dein Versuch mit den umschaltbaren Stylesheets für die Schriftgrößen unsinnig. Fast alle Browser haben die Funktionalität eingebaut. Würdest Du nicht die pixelgenaue Positionierung versuchen und die Schriftart in Prozent oder em angeben, dann könntest Du diese zusätzlichen Klimmzüge lassen. Aber zurück zu deinem eigentlichen Problem: Ersetze den DOCTYPE mal mit Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Noch besser wäre sogar Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Aus denen bisherigen Problemen wird nicht klar ob dir der angesproche Bug mit dem Box Model des IE wirklich bewusst ist. Im Prinzip musst Du nicht die Seite ändern damit die anderen Browsen so aussehen wie im IE, sondern du musst *zuerst* die Seite in anderen Browsern richtig haben und dann dem IE eigene Styles verpassen, die seine Bugs berücksichtigt. Dazu kann du denn bereits angesprochenen "Tanteks Box Model Hack" verwenden oder, was ich übersichtlicher finde, mit "Conditional Comments" (siehe http://msdn.microsoft.com/workshop/a...omment_ovw.asp ) einen eigenen Stylesheet für IE einbinden. Beispiel: Code:
<link rel="stylesheet" type="text/css" href="css/styles-fuer-alle-browser.css"> <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/styles-nur-fuer-ie.css"> <![endif]--> Code:
<link rel="stylesheet" type="text/css" href="css/styles-fuer-alle-browser.css"> <!--[if lt IE6]> <link rel="stylesheet" type="text/css" href="css/styles-nur-fuer-ie-unter-6.css"> <![endif]--> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit einbinden von Dropdown-Navigation in Seite... | epsylon2 | CSS | 4 | 29.03.2009 00:25 |
Seite vor index.html/.php setzen | red1854 | Serveradministration und serverseitige Scripte | 18 | 19.10.2008 20:15 |
Probleme mit dem Layout: divanordnung | Muckel | CSS | 8 | 29.06.2008 12:28 |
Verhindern dass FF beim Druck die Seite Zerstückelt/verteilt | cre-aid | CSS | 0 | 18.04.2008 11:23 |
mozilla zickt bei Rahmen um den Inhalt | sgm | CSS | 3 | 27.11.2003 23:21 |