Probleme mit automatischer Größe von DIV Boxen Einstellungen

[Worgan]

Hallo zusammen,

lange ist es her, dass ich hier mal was gepostet habe.
Mein Problem hat ich wohl nicht verändert, da ich diesbezüglich bereits bei der eigentlichen Seitenerstellung im Dez. 2004 mal nachgefragt hatte und damals wohl auch eine Lösung bekam. Allerdings waren zu der Zeit die Texte noch wesentlich kürzer und der Fehler ist mir nicht aufgefallen.
Auf jeden Fall stellt sich mein Problem wie folgt dar:

Auf meiner Seite habe ich eine Box in der Größe 800 px x 600 px. Darin liegt u.a. meine Menübox, die die gleiche Höhe haben soll wie die Hauptbox.
Dies funktioniert beim ie problemlos, nur der Firefox schiesst alles durch , sobald meine Texte länger werden. Ein Beispiel.

Ich bin leider im Coding auch nicht mehr so fit, da ich momentan mit der Seite sehr zufrieden bin und lediglich die Inhalte ändere.
Hofffentlich kann mir hier jemand helfen.
Die CSS Datei kopiere ich gleich mal mit rein, da ich vermute, dass es irgend eine kleine Einstellung sein dürfte die mein Problem verursacht.

Danke im Voraus für Eure Hilfe.

Martin

CODE

body {
background-color: EBEF7D;
width: 100%;
height: 100%;
text-align: center;
margin: 0px 0px 0px 0px;
}

A:LINK {
background-color: transparent;
color: white;
display: block;
width: 128px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 16px;
}

A:VISITED {
background-color: transparent;
color: white;
display: block;
width: 128px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 16px;

}

A:HOVER {
background-color: EBEF7D;
color: black;
display: block;
width: 128px;
text-decoration: none;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 16px;

}

A:LINK.blink {
background-color: transparent;
color: white;
display: block;
width: 128px;
text-decoration: blink;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 16px;
}

A:VISITED.blink {
background-color: transparent;
color: white;
display: block;
width: 128px;
text-decoration: blink;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 16px;
}

A:HOVER.blink {
background-color: EBEF7D;
color: black;
display: block;
width: 128px;
text-decoration: blink;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 16px;
}

A:LINK.text {
background-color: transparent;
color: blue;
display: inline;
text-decoration: none;
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 13,5px;
width: auto;
}

A:VISITED.text {
background-color: transparent;
color: blue;
display: inline;
text-decoration: none;
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 13,5px;
width: auto;
}

A:HOVER.text {
background-color: transparent;
color: blue;
display: inline;
text-decoration: underline;
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 13,5px;
width: auto;
}

A:LINK.aktiv {
background-color: transparent;
color: EBEF7D;
}

A:VISITED.aktiv {
background-color: transparent;
color: EBEF7D;
}

A:HOVER.aktiv {
background-color: transparent;
color: EBEF7D;
}

A:LINK.untermenue {
background-color: transparent;
color: #A9A9A9;
width: auto;
margin-left: 10px;
}

A:VISITED.untermenue {
background-color: transparent;
color: #A9A9A9;
width: auto;
margin-left: 10px;
}

A:HOVER.untermenue {
background-color: #D2D2D2;
color: blue;
width: auto;
margin-left: 10px;
}

A:LINK.untermenue_aktiv {
background-color: transparent;
color: EBEF7D;
width: auto;
margin-left: 10px;
}

A:VISITED.untermenue_aktiv {
background-color: transparent;
color: EBEF7D;
width: auto;
margin-left: 10px;
}

A:HOVER.untermenue_aktiv {
background-color: transparent;
color: EBEF7D;
width: auto;
margin-left: 10px;
}

A:LINK.untermenue_zweite_ebene {
background-color: transparent;
color: #A9A9A9;
width: auto;
margin-left: 20px;
}

A:VISITED.untermenue_zweite_ebene {
background-color: transparent;
color: #A9A9A9;;
width: auto;
margin-left: 20px;
}

A:HOVER.untermenue_zweite_ebene {
background-color: #D2D2D2;
color: blue;
width: auto;
margin-left: 20px;
}

A:LINK.untermenue_zweite_ebene_aktiv {
background-color: transparent;
color: EBEF7D;
width: auto;
margin-left: 20px;
}

A:VISITED.untermenue_zweite_ebene_aktiv {
background-color: transparent;
color: EBEF7D;
width: auto;
margin-left: 20px;
}

A:HOVER.untermenue_zweite_ebene_aktiv {
background-color: transparent;
color: EBEF7D;
width: auto;
margin-left: 20px;
}



A:LINK.anker {
background-color: transparent;
color: black;
width: auto;
text-decoration: none;
font-weight: 600;
font-size: 14px;
font-family: sans-serif;
line-height: 20px;
}

A:VISITED.anker {
background-color: transparent;
color: black;
width: auto;
text-decoration: none;
font-weight: 600;
font-size: 14px;
font-family: sans-serif;
line-height: 20px;
}

A:HOVER.anker {
background-color: transparent;
color: black;
width: auto;
text-decoration: none;
font-weight: 600;
font-size: 14px;
font-family: sans-serif;
line-height: 20px;
}

A:LINK.index {
background-color: transparent;
color: blue;
text-decoration: none;
font-weight: 600;
font-size: 13px;
font-family: sans-serif;
line-height: 20px;
text-align: center;
width: auto;
}

A:VISITED.index {
background-color: transparent;
color: blue;
text-decoration: none;
font-weight: 600;
font-size: 13px;
font-family: sans-serif;
line-height: 20px;
text-align: center;
width: auto;
}

A:HOVER.index{
background-color: transparent;
color: blue;
text-decoration: none;
font-weight: 600;
font-size: 13px;
font-family: sans-serif;
line-height: 20px;
text-align: center;
width: auto;
}


p {
background-color: transparent;
color: black;
text-decoration: none;
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 13,5px;
}

p.menueueberschrift {
background-color: transparent;
color: darkgray;
font-weight: 500;
font-size: 11px;
font-family: sans-serif;
line-height: 0px;
text-align: left;
}

p.menueleerzeile {
background-color: transparent;
color: transparent;
font-weight: 500;
font-size: 10px;
line-height: 0px;
}

h1 {
background-color: transparent;
color: black;
text-decoration: none;
font-weight: 700;
font-size: 20px;
font-family: sans-serif;
line-height: 16px;
}

h2 {
background-color: transparent;
color: Red;
font-weight: 800;
font-size: 16px;
font-family: sans-serif;
line-height: 20px;
text-align: left;
text-shadow: black;
}

h3 {
background-color: transparent;
color: gray;
font-weight: 700;
font-size: 14px;
font-family: sans-serif;
line-height: 20px;
text-align: left;
}

h4 {
background-color: transparent;
color: black;
font-weight: 600;
font-size: 14px;
font-family: sans-serif;
line-height: 20px;
text-align: left;
}

h5 {
background-color: transparent;
color: black;
font-weight: 600;
font-size: 14px;
font-family: sans-serif;
line-height: 20px;
text-align: center;
}


ul {
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 20px;
}

table {
color: black;
font-weight: 500;
font-size: 12px;
font-family: sans-serif;
line-height: 13,5px;
width: 100%;

}

td {
text-align: left;
vertical-align: top;
}

td.text {
text-align: left;
vertical-align: top;
}

td.bild {
text-align: center;
font-weight: 600;
font-size: 13px;
font-family: sans-serif;
line-height: 20px;
color: Black;
vertical-align: middle;
}

td.links {
vertical-align: middle;
width: 30%;
}

td.logo {
text-align: center;
}

td.adresse {
color: black;
font-weight: 500;
font-size: 10px;
font-family: sans-serif;
}

#seitenformat {
width: 780px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#seitenkopf {
width: 780px;
height: 100px;
}

#inhalt {
width: 780 px;
height: 600px;
background-color: gray;
}

#menue {
float: left;
text-align: left;
padding-left: 20px;
}

#textfeld {
margin-left: 148px;
height: 600px;
clip: scroll;
background-color: silver;
padding-left: 25px;
padding-right: 10px;
text-align: left;
color: black;
}

#fussbereich {
width: 780px;
height: 10px;
}

[Thomas]

CODE

#inhalt {
width: 780 px;
height: 600px;
background-color: gray;
}

#menue {
float: left;
text-align: left;
padding-left: 20px;
}

#textfeld {
margin-left: 148px;
height: 600px;
clip: scroll;
background-color: silver;
padding-left: 25px;
padding-right: 10px;
text-align: left;
color: black;
}

Oben das sind die problematischen Teile, speziell die Höhe (600px). Damit sind die DIVs 600 Pixel hoch, fertig. Läuft der Inhalt darüber hinaus, wird er zwar angezeigt, aber der Hintergrund bleibt auf 600 Pixel beschränkt. Was der IE macht, entspricht zwar deiner Vorstellung, ist aber eigentlich falsch. Ein Lösungsansatz: min-height für den FF verwenden, height für den IE. Allerdings auch nicht ganz trivial. Mehr als diese Anregung kann ich dir momentan auch nicht geben, vielleicht kann die jemand anderes noch spezifischer helfen, vielleicht kommst du damit aber auch schon dem Ziel näher ...

[i.b.g]

Hallo,

Dies funktioniert beim ie problemlos, nur der Firefox schiesst alles durch , sobald meine Texte länger werden.

vielleicht hilft ja auch:

QUELLTEXT

overflow:auto;

der ID #textfeld hinzu zu fügen. Damit würdest Du sowohl im IE wie auch im FF einen vertikalen Scrollbalken erhalten, wenn der Inhalt eine bestimmte Größe überschreitet. Du müsstest Dich dann auch nicht mehr mit weiteren festen Größen herumplagen.

[Worgan]

Hallo,

Dies funktioniert beim ie problemlos, nur der Firefox schiesst alles durch , sobald meine Texte länger werden.

vielleicht hilft ja auch:

QUELLTEXT

overflow:auto;

der ID #textfeld hinzu zu fügen. Damit würdest Du sowohl im IE wie auch im FF einen vertikalen Scrollbalken erhalten, wenn der Inhalt eine bestimmte Größe überschreitet. Du müsstest Dich dann auch nicht mehr mit weiteren festen Größen herumplagen.

Danke für den Tipp. Jetzt funktioniert es wunderbar.
Ich weiß zwar nicht warum aber ich musste noch den Wert für margin-left reduzieren. Dem ie war das total egal, der Firefox stellt jetzt richtig dar.
#textfeld {
margin-left: 3px; => vorher 148px
height: 100%;
clip: scroll;
background-color: silver;
padding-left: 25px;
padding-right: 10px;
text-align: left;
color: black;
overflow:auto;
}

[Google Bot]