Erawan: Schönheitsfehler bei CSS Layout

SELF-Forum

Schönheitsfehler bei CSS Layout

Erawan
– Informationen zu den Bewertungsregeln

N'Abend zusammen!

Ich erbitte wieder einmal eure Hilfe.

Für folgendes Design bin ich gerade dabei ein CSS Layout zusammenzustellen:

auf der Seite zentrierter Container dessen Breite flexibel in em angegeben werden soll, links und rechts davon soll sich ein gemusterter Balken mit Schatten befinden, unabhängig vom Inhalt soll er sich der Hintergrund (weiße Fläche des Content-Bereichs und die beiden Balken links und rechts) über die ganze Fensterhöhe erstrecken

hoffentlich vorstellbar? im Grunde e so wie man es häufig sieht nur mit dem großen Unterschied dass ich anstatt eines Hintergrundbildes mit fixer Breite (das sich im body wiederholt) ein Layout schaffen möchte das sich ausdehnen kann aber auch immer an den senkrechten Rändern einen Schatten/Muster hat.

Nach stundenlangen herumprobieren bin ich derzeit auf dem Stand das es bereits im IE (6) funktioniert nur beim FF (2) passiert folgendes:
wenn der Inhalt größer ist als das Fenster und ein Scrollbalken angezeigt wird und man hinunterscrollt, wird hinter dem Bereich der "hinaufgescrollt" wird kein Hintergrund angezeigt wird.

(dieses Verhalten leuchtet mir ja auch ein - schließlich schreibe ich im Stylesheet ja vor das sich der Container "nur" über 100% des Fensters erstrecken soll) Da es aber im IE funktioniert hoffe ich das es auch eine entsprechende Lösung auch für den Firefox gibt!?

Nachfolgend der Quellcode des Layouts:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>zentriertes flexibles Layout</title>  
<style type="text/css">  
html,body {  
height:100%;  
}  
body{  
margin:0;  
padding:0;  
background-color: #CCC;  
}  
#randrechts{  
height:100%;  
width:55em;  
margin:0 auto;  
background-image: url(pix/randrechts.gif);  
background-repeat:repeat-y;  
background-position: 100% 100%;  
}  
#randlinks{  
height:100%;  
margin-right:15px;  
background-image: url(pix/randlinks.gif);  
background-position: 0% 0%;  
background-repeat:repeat-y;  
}  
#content{  
margin-left:15px;  
height:100%;  
background-color: #FFF;  
}  
</style>  
</head>  
  
<body>  
<div id="randrechts">  
<div id="randlinks">  
 <div id="content">  
  <br />  
  <br />  
  Inhalt  
  <p>&nbsp;</p>  
  <p>&nbsp;</p>  
  <p>&nbsp;</p>  
 </div>  
</div>  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Schönheitsfehler bei CSS Layout

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    (dieses Verhalten leuchtet mir ja auch ein - schließlich schreibe ich im Stylesheet ja vor das sich der Container "nur" über 100% des Fensters erstrecken soll) Da es aber im IE funktioniert hoffe ich das es auch eine entsprechende Lösung auch für den Firefox gibt!?

    Du willst keine Höhe angeben, sondern eine Mindesthöhe.
    (Versteht IE < 7 nicht - interpretiert aber glücklicherweise, wie du ja bereits festgestellt hast, height fälschlicherweise als Mindesthöhe, also setze ihm das vor [CSS-Hack, Conditional Comments].)

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Schönheitsfehler bei CSS Layout

      Erawan
      – Informationen zu den Bewertungsregeln

      (Versteht IE < 7 nicht - interpretiert aber glücklicherweise, wie du ja bereits festgestellt hast, height fälschlicherweise als Mindesthöhe, also setze ihm das vor [CSS-Hack, Conditional Comments].)

      mit min-height hab ichs bereits probiert (überall wo jetzt height steht) und zusätzlich für den IE angegeben:
      * html #randlinks, * html #randrechts, ...{ height:100%; }
      dann funktionierts noch weniger ...

      Wo und wie ist statt height min-height anzugeben?

      Danke. MfG Erawan

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Schönheitsfehler bei CSS Layout

      Gernot Back
      – Informationen zu den Bewertungsregeln

      Hallo wahsaga,

      Du willst keine Höhe angeben, sondern eine Mindesthöhe.
      (Versteht IE < 7 nicht - interpretiert aber glücklicherweise, wie du ja bereits festgestellt hast, height fälschlicherweise als Mindesthöhe, also setze ihm das vor [CSS-Hack, Conditional Comments].)

      Diese fehlerhafte Interpretation von Height hat ja auch noch der IE7 beibehalten und unter Min-Height versteht der IE6/7 auch etwas vollkommen anderes als normale Browser:

      "In Internet Explorer 6, this property applies only to td, th, and tr elements in fixed-layout tables. To create a fixed-layout table, set the tableLayout property of a table element to fixed. (...)

      In Internet Explorer 7, the min-height/max-height attributes apply to floating and absolutely positioned block level elements , inline-block elements, and some intrinsic controls. They do not apply to non-replaced inline elements, such as table columns and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.)

      In Internet Explorer 7, this property is enabled only under the strict !DOCTYPE."

      http://msdn2.microsoft.com/en-us/library/ms534170.aspx

      Gruß Gernot

      --
      super me
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln