zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Dastellung in IE7 und FF

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.07.2006, 00:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2006
Beiträge: 20
ConiKost befindet sich auf einem aufstrebenden Ast
Standard Problem mit Dastellung in IE7 und FF

Hallo!
Ich habe ein Problem.

Seite für IE7: xxx
Seite für FF: xxx

Fehlerhafte Darstellungen:

IE7 mit FF CSS: xxx
FF mit IE7 CSS: xxx

Es gibt nun ein Unterschied:

In der Metabox.css für IE7:

Code:
#MenuRB {
clear:both;
float:left;
margin-bottom:2%;
margin-right:2%;
padding:1%;
width:12%;
In der Metabox.css für FF:

PHP-Code:
#MenuRB {
float:left;
margin-bottom:2%;
margin-right:2%;
padding:1%;
width:12%; 
Wieso macht es IE7 erst richtig, wenn ich clear:both; setze, aber dann macht FF Mist. Wenn ich es weglasse, ist alles in FF ok, aber im IE7 nicht.

Wie kann ich das lösen, OHNE 2 seperate Dateien zu haben.

Metabox.css

Code:
/* Met@box 500 CSS Style */

/* Globale Optionen für alles */
* {
border:0;                                         /* Jeden Rahmen auf 0 setzen */
margin:0;                                         /* Alle Außenabstände auf 0 setzen */
padding:0                                         /* Alle Innenabstände auf 0 setzen */
}

/* Globale Optionen für <body> */
body {
background-color:#000000;                                             /* Globale Hintergrundfarbe Schwarz */
color:#FF9900;                                                        /* Globale Schriftfarbe Orange */
}

/* Globale Farben für <div> */
#Header, #MenuLA, #Inhalt, #MenuRA, #MenuLB, #MenuRB, #Footer {
background-color:#333333;                                             /* Globale <div> Hintergrundfarbe Dunkelgrau */
color:#FF9900;                                                        /* Globale <div> Schriftfarbe Orange */
}

/* Das Haupt <div> */
#Metabox {
color:#FF9900;                                                        /* Globale Schriftfarbe Orange */
background-color:#555555;                                             /* Globale Hintergrundfarbe, zwischen <div>, Hellgrau */
margin:5% 10%;                                                        /* Globaler Abstand setzen: oben/unten: 5%, links/rechts 10% */ 
width:80%;                                                            /* Breite auf 80% setzen, 2% Abzug wegen padding */
}

/* Der Header */
#Header {
clear:both;                                                           /* Den Header oben anbringen */
padding:1%;                                                           /* Innenabstand auf 1% setzen */
width:98%;                                                            /* Breite auf 98% setzen, 2% Abzug wegen padding */
}

/* Linkes Menü A*/
#MenuLA {
float:left;                                                           /* Menü links anordnen */
margin:2%;                                                            /* Seitenabstand von jeder Seite auf 2% setzen */
padding:1%;                                                           /* Innenabstand auf 1% setzen */
width:12%;                                                            /* Breite auf 12% setzen, 2% Abzug wegen padding */
}

/* Der Inhalt */
#Inhalt {
float:left;                                                           /* Den Inhalt in der Mitte anordnen */
margin-bottom:2%;                                                     /* Den unteren Außenabstand auf 2% setzen */
margin-top:2%;                                                        /* Den oberen Außenabstand auf 2% setzen */
padding:1%;                                                           /* Innenabstand auf 1% setzen */
width:62%;                                                            /* Breite auf 62% setzen, 2% Abzug wegen padding */
}

/* Rechtes Menü A*/
#MenuRA {
float:right;                                                          /* Menü rechts anordnen */
margin:2%;                                                            /* Seitenabstand von jeder Seite auf 2% setzen */
padding:1%;                                                           /* Innenabstand auf 1% setzen */
width:12%;                                                            /* Breite auf 12% setzen, 2% Abzug wegen padding */
}

/* Linkes Menü B*/
#MenuLB {
clear:both;                                                           /* Neue Reihe für das Menü */
float:left;                                                           /* Menü links anordnen */
margin-bottom:2%;                                                     /* Den unteren Außenabstand auf 2% setzen */
margin-left:2%;                                                       /* Den linken Außenabstand auf 2% setzen */
padding:1%;                                                           /* Innenabstand auf 1% setzen */
width:12%;                                                            /* Breite auf 12% setzen, 2% Abzug wegen padding */
}

/* Rechtes Menü B*/
#MenuRB {
float:right;                                                          /* Menü rechts anordnen */
margin-bottom:2%;                                                     /* Den unteren Außenabstand auf 2% setzen */
margin-right:2%;                                                      /* Den rechten Außenabstand auf 2% setzen */
padding:1%;                                                           /* Innenabstand auf 1% setzen */
width:12%;                                                            /* Breite auf 12% setzen, 2% Abzug wegen padding */
}

/* Der Footer */
#Footer {
clear:both;                                                           /* Den Footer unten anbringen */
padding:1%;                                                           /* Innenabstand auf 1% setzen */
width:98%;                                                            /* Breite auf 98% setzen, 2% Abzug wegen padding */
}

/* Textanordnung */
.Linksbuendig { text-align:left; }                                    /* Text linksbündig */
.Zentriert { text-align:center; }                                     /* Text zentriert */
.Rechtsbuendig { text-align:right; }                                  /* Text rechtsbündig */

Geändert von ConiKost (23.08.2009 um 14:34 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.07.2006, 12:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Vorweg: Ich habe kein IE7 und ich werde nicht konkret auf dein Problem eingehen, sondern ein Paar allgemeine Fragen und Probleme ansprechen, wodurch Dein Problem vielleicht indirekt behoben wird. Bitte auch die teilweise harschen Worte nicht persönlich nehmen.

1) Wozu getrennte FF- und IE7-Seite? Du willst hoffentlich keine Browserweiche einsetzen. Gerade jetzt mit IE7 (aber auch mit IE6) ist das eine überholte Technik.

2) Dein (HTML-)Quellcode ist durch schlechte Einrückungen sehr schwer zu lesen.

3) Was ist das mit dem dauernden <p class="Zentriert">? Du scheinst da den Sinn von CSS bzw. von semantischen HTML misverstanden zu haben und in einem alten Layout einfach alle <center> damit erstetzt zu haben. Keines einziges davon scheint überhaupt nötig zu sein. Tipp: Es gibt andere Elemente als DIV und P, z.B. H1, H2, OL, etc.

4) Schliesslich zu deinem Problem: Du scheinst dich da in einem Float-Dickicht verirrt zu haben, was eventuell auf ein merkwürdige Reihenfolge der Menüelemente im HTML zurückzuführen ist. Du scheinst ein einfaches 3-Spalten-Layout erreichen zu wollen. Am besten Du schaust Dir dazu die diversen Vorlagen an, die hier im Forum, oder im Internet existierten (Stichwort: "Holy Grail").

Ansatz dazu: Alles was Links hin soll zusammen in ein Element, alles was Rechts hin soll zusammen und alles was in die Mitte soll zusammen. Im Moment ist alles durch einander: Menü links, Inhalt, Menü rechts, noch ein Menü links, noch ein Menü rechts. Stattdessen so was:

Code:
<div id="Links">
  <div id="...">(Erstes Menü links)</div>
  <div id="...">(Zweites Menü links)</div>
</div>
<div id="Inhalt">...</div>
<div id="Rechts">
  <div id="...">(Erstes Menü rechts)</div>
  <div id="...">(Zweites Menü rechts)</div>
</div>
Jetzt müssen nur noch die Elemente #Links und #Rechts gefloatet zu werden (vielleicht noch #Inhalt, jenachdem welche Vorlage du verwendest).

Nebenbei: Für Menüs sind in der Regel Listen (OL-Element) statt DIVs sinnvoll.

Robin
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 overflow hidden im IE7 & IE6 TheFreeman CSS 9 31.01.2011 11:30
CSS float Problem IE7 Menu UL/LI KlaDiMu CSS 4 07.11.2010 13:55
ie6 Problem beim Einbau von JS Menü. ie7 und ff fehlerfrei... speedy77 CSS 0 22.08.2007 16:06
IE7 relative position -> input box Problem Daikoku CSS 12 17.11.2006 11:30
IE7: Problem mit meiner Navigation Schockwelle CSS 9 14.11.2006 15:06


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