zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seite in Mozilla total "schräg"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.03.2004, 01:29
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.03.2004, 10:56
Benutzer
neuer user
 
Registriert seit: 02.01.2004
Beiträge: 32
Kotor befindet sich auf einem aufstrebenden Ast
Standard

hm ist der Thread schon veraltet ? Also bei mir im Firefox sieht es gut aus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.03.2004, 15:46
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 31.03.2004, 16:17
raf raf ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.03.2004
Beiträge: 260
raf befindet sich auf einem aufstrebenden Ast
Standard

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;
}
di line vert

Code:
#line_vert1, #line_vert2 {
        float: left;
        margin: 0px;
        padding: 0px;
        background-color:#ffffff;
	width: 3px;
}
zumindest die rechte, auf float:rightm

dann den inhalt usw
__________________
Ein Gedanke... unendliche Verbindungen
Mit Zitat antworten
  #5 (permalink)  
Alt 31.03.2004, 16:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

@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
Mit Zitat antworten
  #6 (permalink)  
Alt 31.03.2004, 16:43
raf raf ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.03.2004
Beiträge: 260
raf befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 31.03.2004, 19:02
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

Danke
Mit Zitat antworten
  #8 (permalink)  
Alt 31.03.2004, 19:58
raf raf ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.03.2004
Beiträge: 260
raf befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Gesamtbreite Top = 766 px

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
Mit Zitat antworten
  #9 (permalink)  
Alt 23.04.2004, 10:21
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.10.2003
Beiträge: 159
Nina befindet sich auf einem aufstrebenden Ast
Standard

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/
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.04.2004, 11:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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">
dann sollte der IE 6 sich zumindest teilweise wie ein "richtiger" Browser verhalten.

Noch besser wäre sogar
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
da eine HTML-Seite mit CSS in der Regel keine veralteten HTML-Attribute braucht.

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]-->
oder wenn Du nur IE-Versionen unter 6 berückstichtigen willst, weil du die oben genannten DOCTYPEs verwendest:
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]-->
[if lt IE6] steht da für "if less than IE 6"
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:24 Uhr.