Firefox rekt div niet 100%

[Verwijderd]

Ik ben bezig mijn portfolio website opnieuw (zie http://www.icewebdesign.nl/new) te maken en loop daar tegen een probleem aan.
Het is de bedoeling dat de schaduw aan de zijkanten meerekt wanneer de content groter wordt dan het scherm. In IE werkt dit prima, maar in Firefox blijft hij altijd even groot als de schermgrootte en rekt hij niet mee. Heb al geprutst met het weghalen van de height: 100% en min-height: 100%, maar het wil maar niet werken.

De html opbouw zit zo in elkaar:

code:

<div id="mainwrapper">
     <div id="leftcandle">[img]"img/left_candle.jpg"[/img]</div>

     <div id="midwrapper">
          <div id="header">header dinges</div>

          <div id="contentwrap">
               <div id="submenu">submenu dinges</div>
               <div id="content">de content</div>
               <div id="extra">extra dinges</div>
               <div style="clear: both;"> </div>
          </div>
     </div>

     <div id="rightcandle">[img]"img/right_candle.jpg"[/img]</div>

</div>

En de CSS behorende bij dit stukje:

code:

#mainwrapper
{
  overflow: visible;
  height: 100%;
  width: 1100px;
  background-image: url('../img/main_bg.jpg');
  background-repeat: repeat-y;
}
#candleleft
{
  float: left;
  width: 109px;
}
#midwrapper
{
  float: left;
  width: 780px;
}
#candleright
{
  float: left;
  width: 211px;
}
#header
{
  width: 100%;
  height: 146px;
}
#contentwrap
{
  overflow: fixed;
  background-color: #FFF;
  width: 100%;
}
#submenu
{
  padding: 10px 0px 0px 20px;
  width: 120px;
  float: left;
}
#content
{
  overflow: hidden;
  padding: 10px 10px 0px 0px;
  height: 100%;
  width: 505px;
  float: left;
}
#extra
{
  padding-top: 15px;
  width: 125px;
  float: left;
}

Heb echt al vanalles geprobeerd, maar kom er echt niet uit Is er iemand met een oplossing?

[_Thanatos_]

Heb je ook al gespeeld met height:100% op de body en/of html? Ik meen me te herinneren dat sommige browsers daar iets mee hadden. Maar das ook weer afhankelijk van je doctype.

/edit
je gebruikt XHTML 1.0, en daarin was dus een "probleem" (feature dus) met heights.

[ Voor 26% gewijzigd door _Thanatos_ op 08-06-2006 13:39 ]

[Verwijderd]

Ja, html en body hebben height: 100%.

[Sappie]

Gebruik eens 'min-height' in plaats van 'height' op je wrapper div. IE interpreteert 'height' als zijnde 'min-height' en kan bovendien niet omgaan met 'min-height'. Je moet er dus voor IE voor zorgen dat je alsnog de 'height' property specificeert door middel van bijvoorbeeld conditional comments.

edit:
wellicht dat je voor de body ook nog min-height op moet geven ipv height

[ Voor 24% gewijzigd door Sappie op 08-06-2006 14:05 ]

[Verwijderd]

De min-heights werken helaas ook niet. Wanneer ik trouwens de height in de mainwrapper compleet weghaal, dan blijft hij in IE nog gewoon 100% uitgerekt en rekt ook met de tekst mee. In firefox is hij dan compleet weg.

[Geert.H]

Voor zover ik weet is dit niet op te lossen, dus zal je een andere manier moeten zien te vinden. Je moet of je content in een andere div zetten, en daar dan overflow auto; gebruiken
of je verwerkt de schaduw + wit om de achtergrond afbeelding (het motief)

[Sappie]

Wat je zou kunnen doen (en wat ik zelf meermalen heb gebruikt) is de wrapper div weglaten en gebruikmaken van de body om de achtergrond mee te geven. Dit blijkt namelijk in Firefox wel oke te werken wanneer je gebruik maakt van min-height.

Op onderstaande site een eenvoudig voorbeeldje waar je mi wel wat mee kan.

http://tienstra4.flatnet....om/rein-got/dark_phalanx/

edit:
kep het voorbeeldje nog ff aangepast

[ Voor 7% gewijzigd door Sappie op 08-06-2006 14:46 ]

[Verwijderd]

Dus als ik het goed begrijp geef je een background image aan de HTML tag mee. Ik wist niet dat dit kon, en daarom probeerde ik het dus ook met een div op te lossen. Zal het eens uit proberen

[Sappie]

Je kan aan zowel de html als de body een background meegeven.

Kep net mn voorbeeldje nog gewijzigd om het enigszins inzichtelijker te maken, mocht je dat gemist hebben

Edit: Omdat ik toch ff niets beters te doen heb:

http://tienstra4.flatnet..../dark_phalanx/index2.html

Ik zou de kandelaren bovendien ook opnemen in een achtergrond, want deze behoren mi niet in de markup thuis.

[ Voor 42% gewijzigd door Sappie op 08-06-2006 14:58 ]

[Verwijderd]

Hmm...heb het nu op jouw manier, maar met hetzelfde resultaat als eerder. Wat doe ik nu weer fout (zie weer http://www.icewebdesign.nl/new)

code:

html
{
    margin: 0px;
    height: 100%;
    overflow: -moz-scrollbars-vertical;
    background: url("../img/background.jpg") repeat top left;
}
body 
{
    position: relative;
    min-height: 100%;
    width: 1100px;
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    padding: 0px;
    margin: 0px;
    background: url("../img/main_bg.jpg") repeat-y top left;
}

[Sappie]

Je float nog een aantal elementen die je eigenlijk zou moeten clearen; bovendien hoef je als ik het zo 123 goed zie, die elementen niet eens te floaten. Sterker nog, ik zou de midwrapper en contentwrapper div's waarschijnlijk weglaten.

Verder zou ik de 2 kandelaars opnemen als achtergrond van je header element en padding toepassen op de body om het geheel op de goede plaats te krijgen.

edit:
Als je dr niet uitkomt wil ik je vanavond wel ff op weg helpen verder, maar moet dr nu ff vandoor.

[ Voor 14% gewijzigd door Sappie op 08-06-2006 15:25 ]

[Verwijderd]

Sappie schreef op donderdag 08 juni 2006 @ 15:24:
Je float nog een aantal elementen die je eigenlijk zou moeten clearen; bovendien hoef je als ik het zo 123 goed zie, die elementen niet eens te floaten. Sterker nog, ik zou de midwrapper en contentwrapper div's waarschijnlijk weglaten.

Verder zou ik de 2 kandelaars opnemen als achtergrond van je header element en padding toepassen op de body om het geheel op de goede plaats te krijgen.

edit:
Als je dr niet uitkomt wil ik je vanavond wel ff op weg helpen verder, maar moet dr nu ff vandoor.

Midwrapper is wel nodig als ik de kandelaars en de rest van de content naast elkaar wil houden. De kandelaars passen ook niet in de header div omdat die afbeelingen hoger zijn dan de header is.
Contentwrapper die was er dus eigenlijk om de achtergrondkleur van de submenu en extra div ook wit te houden.

[Blaise]

offtopic:
De site heet "ice design" en je maakt een warme huiselijke layout?

[remcotolsma]

Je kunt ook de midwrapper voorzien van een background met links de schaduw en rechts schaduw en in het midden wit.

Dus 1 gif'je die er zo uit ziet:
SCHADUW LINKS | ----------------------------------------------------- | SCHADUW RECHTS

En dan op midwrapper links en rechts de benodigde padding geven.

Cascading Stylesheet:

#midwrapper
{
  background: url('background.gif') repeat-y;

  padding-left: 10px;/* De breedte van de schaduw */
  padding-right: 10px; /* De breedte van de schaduw */
}

[Sappie]

Verwijderd schreef op donderdag 08 juni 2006 @ 19:08:
[...]


Midwrapper is wel nodig als ik de kandelaars en de rest van de content naast elkaar wil houden. De kandelaars passen ook niet in de header div omdat die afbeelingen hoger zijn dan de header is.
Contentwrapper die was er dus eigenlijk om de achtergrondkleur van de submenu en extra div ook wit te houden.

Om je nog ff verder op weg te helpen:

http://tienstra4.flatnet..../dark_phalanx/index3.html

hoop dat je er wat aan hebt

[Verwijderd]

Blaise schreef op donderdag 08 juni 2006 @ 21:41:

offtopic:
De site heet "ice design" en je maakt een warme huiselijke layout?

Dit is al jarenlang mijn domeinnaam, dus om die ineens in iets nieuws te gaan veranderen, vind ik niet echt handig Daarnaast loopt het contract nog eventjes door.

@ remco: dat wil waarschijnlijk ook niet echt, aangezien de schaduw bovenin wat anders is door de verlichting. Zou wel kunnen met transparante png's, maar dat werkt weer niet in IE.

@ sappie: ziet er geweldig uit, zal het zometeen eens proberen te verwerken. Top!