Probleme mit IE vs Firefox und mehr

Hallo Leute,

Ich hab das html-Seminar durchgearbeitet und begonnen eine Website zu erstellen.

Leider gibt der Firefox das Design nicht so wieder wie der IE und ich weiß nicht woran es liegt.

Ich habe mich für ein dreispaltiges Layout mit Kopfzeile und horizontaler Steuerung darunter entschieden (links menü, rechts news, mitte inhalt).

Im IE wird die Inhaltsspalte zwischen den beiden Randspalten angezeigt.
Dazu habe ich nur eine Höhe für den Inhalt definiert und die Breite undefiniert gelassen.

Im Firefox wird der Inhalt allerdings hinter den Randspalten angezeigt.

Warum?

Bevor nun der Code kommt noch eine Frage:

Momentan passt sich meine Hompage der Fenstergröße des Browsers an, bzw die Kopfzeile, die Steuerung und der Inhaltsbereich verhalten sich so, die Randspalten haben eine definierte Breite.

Problem an der Sache ist das der Inhaltsbereich unter die beiden Spalten rutscht sobald das Fenster zu klein wird und übelste Stauchungen und Zeilenumbrüche entstehen die so nie geplant waren^^
Außerdem Verschwindet das Bild (im mom nur Platzhalter) hinter den Randspalten

Meine Frage: gibt es eine Möglichkeit eine bestimmte Mindestgröße bzw Mindestbreite für den Inhaltsbereich zu bestimmen, ohne das er unter die Randspalten rutscht wenn der Platz nicht mehr ausreicht?

Auch gut wäre ein Mindestgröße für die gesamt Hompage...

Naja...

ich poste euch mal meinen Code:

CSS:

Zitat

<style type="text/css">

html, body {
font: 100% arial, helvetica, sans-serif;
}

*{
margin:0;
padding:0;
}

#kopfzeile {
height:114px;
background:url(<!-- m --><a class="postlink" href="http://www.flender-flux.de/0graf/head0_1.gif">http://www.flender-flux.de/0graf/head0_1.gif</a><!-- m -->) no-repeat center;
background-color: #dedede;
border-bottom:2px solid white;
}

#navigation {
background-color: #aab3b6;
border-bottom: 2px solid white;
}

#navigation ul {
text-align: center;
}

#navigation li {
display: inline;
}

#navigation a {
display: inline-block;
text-decoration: none;
color: #ffffff;
list-style: none;
padding: .3em 3em .3em 3em;
}

#navigation a:hover {
background-color: #051cff;
}

#produktnavigator {
float: left;
width: 13em;
background-color: white;
}

#produktnavigator h3 {
padding: 0.5em;
text-align: center;
background-color: #dde1e2;
}

#produktnavigator ul {
list-style: none;
margin: 0;
padding: 0;
}

#produktnavigator li {
text-align:left;
font-size: 80%;
padding: 1px 0 1px 0;
}

#produktnavigator li a {
display:block;
background-color:#dde1e2;
color: #474747;
text-decoration: none;
padding: .2em 1em .2em 1em;
}

#produktnavigator a:hover {
color: #051cff;
}

#news {
float:right;
background-color:#dde1e2;
height: 30em;
width: 13em;
}

#news h3 {
text-align: center;
padding: 0.5em;
border-bottom: solid black 1px;
}

#news ol {
padding-left: 2em;

}

#news li {
padding-left: 20px;
font-size: 80%;
padding: 3px;
}

#slogan {
background: url(<!-- m --><a class="postlink" href="http://www.flender-flux.de/100graf/start_fo.jpg">http://www.flender-flux.de/100graf/start_fo.jpg</a><!-- m -->) no-repeat center top;
height: 120px;
background-color:#dde1e2;
}

#inhalt {
background-color:#dde1e2;
height: 25em;
border-bottom: white solid 2px;
}

#inhalt h1 {
text-align: center;
padding: 1em;
}

#inhalt p {
text-align: center;

margin-left:10em;
margin-right: 10em;
}

#foot {
clear: both;
background-color: #aab3b6;
}

#foot p {
text-align: center;
padding: .3em;
}

</style>

Alles anzeigen

HTML:

Zitat

<div id="kopfzeile"></div>

<div id="navigation">

<ul>

<li><a href="#">&Uuml;ber Uns</a></li>
<li><a href="#">Aktuelles</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

</div>

<div id="produktnavigator">

<h3>Produktnavigator</h3>

<ul>
<li><a href="#">Blitzschutz</a></li>

<li><a href="#">Photovoltaik</a></li>

<li><a href="#">Thermie</a></li>

<li><a href="#">Montagesysteme</a></li>

<li><a href="#">Artikel f&uuml;r das Steildach</a></li>

<li><a href="#">Schiefer</a></li>

<li><a href="#">Ziegel</a></li>

<li><a href="#">Stehfals</a></li>

<li><a href="#">Artikel f&uuml;r das Flachdach</a></li>

<li><a href="#">Begehungssysteme</a></li>

<li><a href="#">Fluchtwege</a></li>

<li><a href="#">Wartungswege</a></li>

<li><a href="#">Umw&auml;hrungen</a></li>

<li><a href="#">Absturzsicherungen</a></li>

<li><a href="#">Aust&auml;nderungssysteme</a></li>

<li><a href="#">Sonderzubeh&ouml;r f&uuml;r Dachandwerker</a></li>
</ul>
</div>

<div id="news" >

<h3>News</h3>

<ol>
<li>Sunblocker...</li>

<li>Topneuheit!</li>

<li>Erster Platz...</li>
</ol>
</div>

<div id="slogan" ></div>

<div id="inhalt" >

<h1>Flender Flux</h1>

<p>texttexttexttexttexttexttexttexttexttexttexttexttexttextte</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttextte</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttextte</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttextte</p>

</div>

<div id="foot">

<p>Impressum</p>

</div>

Alles anzeigen

Ich hoffe ihr könnt mir bei meinen Problemchen helfen!

1. Firefox 'verstümmelt' mein Layout

2. Mindestgröße für den Inhaltscontainer/ die gesamte Seite definieren

mfg Sethur

Erstmal Danke für die Antwort! Den Ansatz kann ich einigermaßen nachvollziehen, bloß mit der Umsetzung haperts noch...

Wenn ich #inhalt {position:absolute;} definiere, rutscht der Bereich wieder nach unten und verdeckt sogar den footer -.-*

Könntest du mir ein paar Erläuterungen zum gebrauch der 'position'-Funktion geben oder einen Link zu einer Seite mit ensprechenden Erklärungen??

Was 2. Angeht:

Ich möchte eine Mindestbreite, die nach oben hin offen ist. Zum Beispiel eine Website die für 1024x768 optimiert ist, sich aber nach außen bzw oben hin anpasst wenn das Fenster größer wird. Wird das Fenster kleiner soll sie bei 1024x768 stehen bleiben. Ein befehl wie 'min-width: ... ;' wäre ideal, der funktioniert aber nicht

Ich hoffe das ist verständlich :wink:

lg Sethur