✔ Das übliche IE / FF debakel

Status
Nicht offen für weitere Antworten.
C

Chaosengel_Gabriel

Erfahrenes Mitglied
Man weiß... Es gibt unterschiede... gravierende...

Ich bin da auf was seltsames gestoßen...
Ich benutze ne Tabelle innerhalb eines div-Elementes...
und FireFox schießt mir die Tabelle aus dem div raus...

Is das normal?
 
Hi,

je nachdem, wie das DIV formatiert ist, ja.

Mögliche Gründe hierfür könnten z.B. eine height-Deklaration sein, die vom IE als Mindesthöhe und von den übrigen Browsern als fixe Höhe interpretiert wird, oder eine Floatumgebung, die zum Abschluss nicht "gecleart" wurde.

Zeig doch mal den dazugehörigen HTML- und CSS-Code, damit man darauf näher eingehen kann.
 
http://gabriel86.ga.funpic.de/heavenly-hell.osna/index.php

Das is die Site um die es geht... und ganz oben sofort der Banner, offensichtlich...
Hab das Bild zur Zeit via CSS als Hintergrund drin, weil es als img unschöne px Abstände an den Seiten erzeugt hat. Der gedanke was da sein sollte, dürfte soziemlich klar sein, denke ich mal^^

Und vllt hat dann auch jemand ne Idee, wie ich links vom Inhalt ne Spalte für den Navi reservieren kann^^

Und der CSS-Code:
Code: 
html
{
text-align: left;
}

body
{
margin: 0px;
padding: 0px;
}

div.login
{
margin: 0px;
padding: 0px;
height: 120px;
width: 280px;
text-align: center;
}

div.login ul li
{
list-style-type: none;
margin: 0px;
padding: 0px;
}

div.login ul li a
{
margin: 0px;
padding: 0px;
width: 270px;
height: 10px;
}

div.banner
{
background-image: url(../banner_fertig.jpg);
background-repeat: no-repeat;
text-align: left;
margin: 0px;
padding: 0px;
height: 130px;
width: 1000px;
}

div.top
{
text-align: center;
width: 800px;
margin: 0px;
padding: 0px;
height: 30px;
float: left;
}

div#menu
{
text-align: left;
width: 200px;
margin: 0px;
padding: 0px;
display: inline;
list-style-type: none;
}

div.inhalt
{
text-align: left;
width: 700px;
float: left;
display: block;
margin: 0px;
margin-left: 3px;
margin-top: 3px;
padding: 0px;
}

div.news div.titel
{
text-align: left;
}

div.news div.datum
{
text-align: right;
}

div.news div.eintrag
{
text-align: center;
}

input
{
text-align: center;
}

div.news
{
margin: 0px;
padding: 15px;
}

div.top a
{
width: 160px;
height: 20px;
margin: 0px;
padding: 0px;
letter-spacing: 1px;
text-align: center;
float: left;
}

div#menu ul
{
margin: 0px;
padding: 0px;
}

div#menu ul li a
{
display: block;
width: 180px;
height: 10px;
margin: 0px;
padding: 0px;
padding-right: 10px;
letter-spacing: 2px;
text-align: right;
}

div#menu ul li ul li a
{
margin: 0px;
padding: 0px;
margin-top: 2px;
margin-bottom: 2px;
width: 160px;
height: 10px;
text-align: right;
padding-right: 10px;
letter-spacing: 1px;
}
 
Hi,

wenn die Navigation und das Login-Formular im Banner-DIV nebeneinader angeordnet sein sollen, hast du dich schlichtweg in den Breitenangaben vertan, denn das .banner-DIV ist 1000px breit definiert, .top und .login ergeben in der Breite zusammen aber 1080px.
 
Hab mit den Breiten auch schon seid ner Woche rum experimentiert...
Die Rahmen haben ja auch ihre Auswirkungen auf die Breite...

Ich versuch das gleich nochmal etwas kleiner, schließlich sollte es ja auch in der Größe optimiert sein... Auf 1000px Breite wirds bei mir sogar noch ohne horizontalen Scrollbalken gezeigt, denke aber werde es bei 980px oder so belassen...


Ach ja und das Prob mit der zerschossenen Tabelle hab ich auch auf dieser Seite: http://gabriel86.ga.funpic.de/wuensch-dir-wasplanet/index.php

Das Formular am Ende der Seite ist in ne Tabelle gefasst und alles mit nem div.page umgeben...

Code:
Code: 
body
{
margin: auto;
}

div.page
{
text-align: center;
}
 
Zuletzt bearbeitet:
So Leute... Lange hat sich in diesem Thread nichts getan, aber ich komme dennoch vorran!

Meine Web-Site habe ich via W3C durch den Validator gejagt, somit ist diese in korrektem HTML 4.01 Transitional und CSS geschrieben... Zumindest behauptet und bestätigt mir der Validator das ^^

Das Problem ist aber immer noch das gleiche... FireFox schießt mir die Tabelle aus dem DIV-Element raus... Die Tabelle ist weder in dem DIV noch wird der Rahmen für das DIV verwendet... Die 2 Links nach der Tabelle, die in dem selben DIV sind werden mir sogar UNTER den Rest geschoben... Also räumlich gesehen unter... ^^

Ich verzweifle langsam daran... :(

Hier nochmal der Link: http://gabriel86.ga.funpic.de/heavenly-hell.osna/index.php

Wie gesagt das Problem ist NUR das Banner oben direkt... Das gesamte "Banner" ist mit nem roten double Rahmen versehen, also kaum zu übersehen ^^

Hier nochmal die aktuelle CSS:
Code: 
body
{
margin: auto;
}

img#banner
{
width: 700px;
height: 150px;
margin: 0px;
padding: 0px;
float: left;
}

div.login
{
margin: 0px;
padding: 0px;
height: 140px;
width: 260px;
text-align: center;
}

div.banner
{
text-align: left;
margin: 0px;
padding: 0px;
height: 150px;
width: 990px;
}

div.top
{
text-align: center;
width: 700px;
margin: 0px;
padding: 0px;
height: 30px;
float: left;
}

Das dürften alle relevanten Angaben sein...
 
Ich bin wieder weiter...
Die Ausrichtung an und für sich funktioniert endlich ^^
Is nur noch das Problem, dass im IE das obere Navi oben mit reingerückt werden soll...
Und der FF interpretiert scheinbar div im div falsch, dafür bräuchte ich ne Lösung...

Wenn sich also bitte endlich jemand erbarmen würde und mir sagt was ich falsch mache und ändern muss?
Der Link ist immer noch der wie oben...
Und die CSS hat sich nicht wesentlich geändert... Hab nur nen bissl Mathe für die Breiten benutzt ;)

[EDIT]:
Der Fehler im FF ist vermutlich auf die falsche Interpretation der divs zurück zu fühen...
Wie kann ich das beheben? Der FF mag wohl keine divs in nem div...
Und keine Tabellen in nem div... HILFEEEEEE
 
Zuletzt bearbeitet:
Hi,

Firefox mag sehr wohl verschachtelte DIVs und auch Tabellen in DIVs :suspekt:

Vielmehr hast du beispielsweise keine Schriftart und -größe für das Dokument festgelegt, weshalb die Browser auf ihre "Werksvoreinstellungen" zurückgreifen, und dass diese unterschiedlich groß ausfallen, dürfte wohl klar sein.

Code: 
body,td {
font-family:arial,verdana,sans-serif;
font-size:0.8em;
}
Desweiteren sollten die Zellinnen- und -außenabstände der "Formulartabelle" auf null gesetzt werden:

Code: 
<table cellpadding="0" cellspacing="0">
und ebenfalls die Polsterungseigenschaften des Formulars zurückgesezt werden, damit es keine unerwünschten Verschiebungen im Layout gibt:

Code: 
form {
margin:0;
padding:0;
}
Zu guter letzt fehlt dem DIV #menu die clear-Eigenschaft, weshalb es in den modernen Browsern die horizontale Navigation umfliesst:

Code: 
div#menu
{
text-align: left;
width: 165px;
margin: 0px;
padding: 0px;
display: block;
clear:left;
float: left;
}
Vielleicht helfen dir diese Tipps weiter.
 
Code: 
table {
border-spacing:0;
border-collapse:collapse;
}

td {
padding:0;
}
border-spacing wird vom IE aber nicht unterstützt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück