Problem mit Seitenaufbau

[MaexxDesign]

Hallo,

es geht um diese Seite: http://maexxdesign.de/mypics.htm

Problem 1:
Im IE sieht alles super aus, nur mit dem Firefox gibt es Darstellungsfehler und viele Bilder werden nicht geladen.
Sie ist auf 1280x1024 optimiert.
Mit niedrigen Auflösungen sieht's nicht schön aus.

Problem 2:

Ich möchte, dass das rechte Menü (Neue Pics) sich nicht jedes Mal neu lädt, wenn man auf eine andere Seite geht.
So eine Art Frame wäre schön.
Denn der Inhalt vom rechten Menü soll immer gleich bleiben.


EDIT:
Das Problem mit den Bildern wurde gelöst.

 

[Maik]

[...] viele Bilder werden nicht geladen.

Dann überprüf mal die Grafikreferenz in dem Online-Dokument:

<img border="2" src="file:///J:/MaexxDesign/Bilder/Games/Battlefield1942/1c.jpg" width="100" height="80">

 

[Gumbo]

Die unterschiedliche Darstellung des Dokuments in den Browsern hängt wohl hauptsächlich von dem fehlerhaften Markup ab (siehe Ergebnisbericht des W3C-Markup-Validators). Beseitige diese Fehler erst einmal und mache das Dokument damit valid.

 

[MaexxDesign]

Danke, daran lag es.
Denn die ganzen Battlefield-Bilder waren woanders abgespeichert. -.-'
Mittlerweile werden alle Bilder geladen, auch beim Firefox.

 

[Maik]

[...] mit dem Firefox gibt es Darstellungsfehler

Erweiter das Stylesheet mal mit den folgenden Regeln, damit im Firefox die Höhe der rechten Spalte bei zunehmenden Inhalt "mitwächst" und die "Menü-Überschriften" am oberen Rand des DIVs ausgerichtet werden:

div {
font-size:12px;font-family:Verdana;
border:1px solid #000000;
background-color:#efefef;
min-height:100%; 
height:auto !important;
height:100%;
float:left;
}

div p {
margin-top:0;
}

Das fehlerhafte Markup hat Gumbo ja schon erwähnt.

 

[MaexxDesign]

Problem gelöst, neues Problem entstanden.
Die Fenster sind unterschiedlich lang.
Eine Idee ?

Das ist wieder nur beim Firefox so.

 

[Maik]

Setz mal diese Regel im Stylesheet ein:

html, body {
height: 100%;
}

Und entferne den rotmarkierten Teil aus dem Quelltext:

<title>mypics</title>
<style type="text/css">
div
{
font-size:12px;font-family:Verdana;
border:1px solid #000000;background-color:#efefef;
min-height:100%; 
height:auto !important;
height:100%;
float:left;
}
div p {
margin-top:0;
}
</style>
<title>Mehrspaltiges Layout ohne Tabellen</title>
<style type="text/css">
div
{
font-size:12px;font-family:Verdana;
border:1px solid #000000;background-color:#efefef;
height:100%;
float:left;
}
</style>
<title>Mehrspaltiges Layout ohne Tabellen</title>
</head>