✔ CSS-Praxis: IE und Opera + Div-Container ==>Hilfe; Firefox macht es richtig

Status
Nicht offen für weitere Antworten.
Marius Heil

Marius Heil

Erfahrenes Mitglied
Hi,

Anschauungsbeispiel: http://funfury.freewebsitehost.net/
hab grad ein komplett neues Design eingebaut, welches ich komplett in CSS umgesetzt hab.
Nur bei den Menüs war ich zu faul, die waren schon in Tabellenform.

1.Problem:
Das Problem ist nun, dass Opera zb beim Registrieren (Auf der Seite im Menü, draufklicken) den Mittelteil unten nicht richtig ansetzt, er lässt ein paar Pixel Platz.
Ich hab schonmal versucht das Formular für die Registrierung zu entfernen, dann geht alles, Opera scheint also Probleme mit Formularen in DIV Containern zu haben.

2.Problem:
Nun geht's um den Internet Explorer. Ihr könnt die Seite mal im IE öffnen und euch anschauen. Der untere Teil des rechten unteren Kasten wird bei jedem 2. Seitenaufbau (manchmal auch öfter oder weniger) teilweise richtig an den Kasten drangesetzt, manchmal befindet er sich am Ende der Seite.

Das sind zurzeit die gröbsten Darstellungsprobleme, muss noch etwas angepasst werden, klar.
Vielleicht weiß noch einer, wie ich den Mittleren Kasten so gestalten kann, dass er sich je nach Größe des Inhaltes ausdehnt, das ist aber nicht sonderlich wichtig.

Was haltet ihr eigentlich davon, dass ich Comic sans MS als Standartschrift genommen hab?
Klar, die haben nur MS Nutzer auf dem PC, aber für alle anderen wird dann ja Arial benutzt, das hat jeder. Weiß einer, obs vergleichbare Schriften bei Linux und Mac gibt?


Danke schonmal,
Marius
---
PS: Mein Film wird in kürze irgendwo auf nen Server hochgeladen, sollte nciht mehr allzulange gehen.
 
  • Erweitere den CSS-Code mit folgender Regel für das Formular:
Code: 
form {
margin: 0;
padding: 0;
}
  • Die IDs spalte_aussen, kasten_o, kasten_o_i, kasten_u, kasten_o, kasten_m, kasten_u dürfen in der Seite jeweils nur einmal vergeben werden.

    Inline-Elemente, wie z.B. das span-Element, dürfen keine Block-Elemente, wie z.B. das div-Element enthalten.

    Nach den floatenden Boxen (Spalten) fehlt ein Element mit der clear-Eigenschaft, um im Dokument wieder den normalen Textfluss herzustellen.
HTML: 
<div>linke Spalte</div>
<div>mittlere Spalte</div>
<div>rechte Spalte</div>

<div style="clear:left;">&nbsp;</div>
 
Hi,

vielen Dank erstmal, Opera funktioniert auf diese Weise schonmal.
Das mit den IDs, die nur einmal vergeben werden dürfen hat mir der W3C Validator schon ausgespuckt, ich weiß aber nix konkret damit anzufangen.
Ich hab gestern das erste mal CSS benutzt ;) deshalb kenn ich mich da nicht so aus.
Was muss ich da exakt machen? Ich hatte das so verstanden, dass sich die DIV Container einfach die CSS Zuweisungen schnappen und so benutzen, dafür die IDs, aber das ist wohl ein wenig anderst, was muss ich da machen?

Die Stelle mit den Divs im Span such ich grad raus und verbesser das.
Das Clearen mach ich auch schnell.


Marius
---
Zu dem mit den IDs, kann ich einfach überall das id durch class ersetzen?
Wofür ist das ID denn exakt gedacht?
 
Zuletzt bearbeitet:
So, ich bin durch, hab die ganzen Fehler korregiert.
1000 Dank dir, du hast mir wahnsninnig geholfen.
Das mit dem id Selektor hab ich jetzt komplett gekillt, ich frag mich, wozu es das überhaupt gibt,...
Hab jetzt alles mit Klassen geregelt, musste erstmal wissen, dass man dann Punkte statt Gatter setzen muss,...
Nun gut, jetzt scheint alles zu stimmen und sowohl IE als auch Firefox und Opera zeigen das selbe an (annähernd).
Was mich jetzt noch stört, ist dass der W3C Validator mir andauernd das ausspruckt:
Line 270, column 153: cannot generate system identifier for general entity "user" .

...><a href="basis.php?seite=oeffprofil&user=Marius2">1. Marius2</a><br><a href=


Line 270, column 153: general entity "user" not defined and no default entity .

...><a href="basis.php?seite=oeffprofil&user=Marius2">1. Marius2</a><br><a href=
Zum Vergrößern anklicken....

Ich weiß nicht, was der da in meinen Links rumzukontrollieren hat,...
Was muss ich ändern wenn ich das weghaben will?
Oder soll ichs einfach so lassen, es stimmt ja alles,....


Marius
 
Danke, klappt perfekt, schon wieder was dazugelernt.
Hab jetzt korrektes HTML 4.01 Transitional, na wunderbar ;)
Mich sstört es noch ein wenig, dass die Menüüberschriften so knapp oben am Rand hängen, das wollte ich mittels line-height beheben, aber der IE hat so nen lustigen Fehler diese Anweisung zu ignorieren, wenn sich ein Bild in der Zeile befindet, hat das jemand schonmal gehabt? ;)
Naja, weiß noch nicht, wie ich drumrumtricksen kann,...

Marius
 
Versuche es doch mal mit einem margin-top-Wert für die Menüüberschriften.
 
Da es sich bei dem span-Element um ein Inline-Element handelt, besitzt es keinen Block-Level-Charakter und erzeugt somit keinen Absatz im Textfluss. Erweitere also die CSS-Regel für die Klasse .Stil2 mit der display:block-Eigenschaft, und die Browser akzeptieren die margin-top-Angabe.

Warum verwendest du aber für die Überschrift(en) nicht das angedachte HTML-Element h1 - h6, das zu den Block-Elementen gehört und u.a. eine Angabe zum Außenabstand "annimmt"?


[editpost]

Wenn die Überschriften der Menüs einen oberen Außenabstand besitzen sollen, muß das DIV .kasten_o_i innerhalb der DIV-Box .kasten_m notiert werden.

HTML: 
<div class="spalte_aussen">
 <div class="kasten_o"></div>
 <div class="kasten_m">
  <div class="kasten_o_i"><img src="images/accent.gif" width="7" height="7"  alt="&bull;"><span class="Stil2"> Menü</span></div> 
  <table width="124" border="0" cellpadding="0" cellspacing="0" id="menue_innen"> ... </table>
 </div><!-- end kasten_m -->
</div><!-- end spalte_aussen -->

Warum das?

Nun, für das DIV .kasten_o, in dem sich derzeit das DIV .kasten_o_i mit der Überschrift befindet, hast du folgende prägnante CSS-Formatierungen vorgenommen:

Code: 
background: url(bilder/kasten_o.gif) no-repeat;
height: 20px;
Andernfalls muß diese Box höher definiert und eine dementsprechend dimensionierte Hintergrundgrafik eingesetzt werden, damit der erforderliche Raum für die margin-top-Angabe vorhanden ist.

Und noch ein Tipp: binde die Grafik in das span-Element ein, ansonsten verschiebt sich blos der Text nach unten ;)

HTML: 
<span class="Stil2"><img src="images/accent.gif" width="7" height="7"  alt="&bull;"> Menü</span>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück