Layout in FF en IE niet gelijk. Problemen met divs.

[-DarkShadow-]

Ik ben nu al een paar dagen aan het prutsen met een nieuwe website. Het is een erg eenvoudige website, maar ik krijg de layers niet waar ik ze wil hebben.

Het gaat om deze pagina: http://www.aoyue.nl/got/index.php?p=c

1.
Ik wil de "content" layer 50 pixels onder de "topmenu" layer hebben. Dit heb ik opgelost met:

Cascading Stylesheet:

#content{
  margin-top:50px;
  margin-left:100px;
  width:500px;
}

Dit werkt prima in IE, maar niet in FF. In FF bestaat die margin-top gewoon niet. Ik heb al van alles geprobeerd met relative, absolute, padding etc... maar het werd er alleen maar slechter op.

2.
Ik wil dat de footer aan de onderkant van het venster staat als de content het venster niet opvult en anders gewoon onder de content staat.

Het probleem is dat de "footer" layer de "container" layer mee moet oprekken, want de zwarte rand moet natuurlijk mee. Ik heb verschillende methoden gevonden om de footer te krijgen waar hij hoort, maar de "container" layer rekt daarbij nooit uit.

Voor beide problemen heb ik al geprobeerd om alle layers op relative te zetten, dat werkte prima in IE, maar voor geen meter in FF. De content layer kwam bijv. over het topmenu.

Er is veel over dit onderwerp te vinden, maar niet specifiek over deze problemen.

[Michali]

Ik heb er even mee zitten kloten. Je eerste probleem was makkelijk. Die heeft te maken met dat heading element (en paragraphs) standaard een margin krijgen. Die je dus even op 0px zetten:

Cascading Stylesheet:

#topbanner h1
{
    margin: 0;
    padding: 0;
}

Het 2de probleem is lastig, en die moet je helaas oplossen met JS. Ik heb een klein begin voor je gemaakt om te demonstreren hoe zoiets werkt. Wat je zelf nog even moet doen is controleren of de hoogte kleiner is dan de hoogte van de content, zodat je niet kleiner schaalt dan dat. Succes ermee.

JavaScript:

window.onload = function()
{
    window.onresize = function()
    {
        var pageHeight = document.documentElement ? document.documentElement.clientHeight: document.body.clientHeight;
        document.getElementById('container').style.height = ( pageHeight - 60 ) + 'px';
        document.getElementById('footer').style.top = ( pageHeight - 60 ) + 'px';
    }
    window.onresize();
}

[-DarkShadow-]

Michali schreef op donderdag 16 maart 2006 @ 15:11:
Ik heb er even mee zitten kloten. Je eerste probleem was makkelijk. Die heeft te maken met dat heading element (en paragraphs) standaard een margin krijgen. Die je dus even op 0px zetten:

Dat is het probleem niet. De layer "content" begint met het woord "contact". Die layer moet 50 pixels onder de layer "topmenu" (de groene balk) komen. FF past deze margin-top niet toe, daardoor komt "contact" bijna tegen de groene menubalk.

[Michali]

Ah ok, dat had ik even verkeerd begrepen dan. Dat probleem is het gevolg van je div.topmenu float. Daarnaast floaten de element daarbinnen ook. Het is op te lossen door topbanner niet te laten floaten (en die width: 100%; kan ook weg), je topmenu niet te laten floaten (eveneens die width: 100%; weg) en een clearing div binnen dat element aan het eind te zetten.

Zo is het nu:

Cascading Stylesheet:

#topbanner {
    position:relative;
    width:100%;
    height:74px;
    float:left;
}

#topmenu {
    float:left;
    clear:left;
    background-color:#0d5003;
    width: 100%;
}

En zo moet het worden:

Cascading Stylesheet:

#topbanner {
    height:74px;
}

#topmenu {
    background-color:#0d5003;
}

En die clearing div dan nog:

HTML:

<div id="topmenu">
    <ul id="mainlevel-nav">
        <li><a href="http://www.aoyue.nl/got/index.php" class="mainlevel-nav">Home</a></li>
        <li><a href="http://www.aoyue.nl/got/index.php?p=f" class="mainlevel-nav">FAQ</a></li>
        <li><a href="http://www.aoyue.nl/got/index.php?p=c" class="mainlevel-nav">Contact</a></li>
    </ul>
    <div style="clear: both;"></div>
</div>

Ik krijg nu wel alleen weer te maken met wazige variant van de guillotine bug in IE. Als je die clearing div zo maakt: <div style="clear: both; height: 1px; overflow: hidden;"></div> dan werkt het weer wel. Vreemd genoeg worden de menu items in zijn geheel niet weergegeven als je height op 0px zet. K*t browser

[ Voor 60% gewijzigd door Michali op 16-03-2006 15:44 ]

[Boelie-Boelie]

Aangezien het toch een container met fixed width is, kun je misschien ook de FooterStickAlt-methode gebruiken (is zonder javascript) i.c.m. faux columns voor de borders.

[-DarkShadow-]

Michali schreef op donderdag 16 maart 2006 @ 15:36:
Ah ok, dat had ik even verkeerd begrepen dan. Dat probleem is het gevolg van je div.topmenu float. Daarnaast floaten de element daarbinnen ook. Het is op te lossen door topbanner niet te laten floaten (en die width: 100%; kan ook weg), je topmenu niet te laten floaten (eveneens die width: 100%; weg) en een clearing div binnen dat element aan het eind te zetten.

Als ik het exact zo doe als je beschrijft verdwijnt mijn gehele topmenu in zowel IE als in FF.
EDIT:

Probleem 1 is opgelost: Ik heb de "topbanner" layer verwijderd, daar stond immers toch niks anders dan een afbeelding in. Nu werkt margin-top wel. De ruimte ertussen is in IE wel 3 keer zo groot, maargoed...

Daarvoor heb ik een nieuw probleem in de plaats gekregen:
3:
Er zit in IE (niet in FF) ruimte tussen "topmenu" en de afbeelding.

[ Voor 26% gewijzigd door -DarkShadow- op 16-03-2006 17:00 ]

[Fles]

Spatie tussen [img]"TEST_bestanden/got.jpg"[/img] en </CENTER> weg halen dan is hij goed.

[-DarkShadow-]

Michali schreef op donderdag 16 maart 2006 @ 15:11:
Wat je zelf nog even moet doen is controleren of de hoogte kleiner is dan de hoogte van de content, zodat je niet kleiner schaalt dan dat. Succes ermee.

Hoe pak ik dit aan? Mijn JS is niet zo goed

[Verwijderd]

kan je niet vooruit met test 57?

[-DarkShadow-]

Verwijderd schreef op zaterdag 18 maart 2006 @ 21:16:
kan je niet vooruit met test 57?

Nee, in FF rekt mijn div "container" niet mee.

Het probleem is dat ik aan de hoogte van mijn content moet komen. De content is gewoon plain tekst/webform in een layer met ongedefinierde hoogte.

[ Voor 30% gewijzigd door -DarkShadow- op 18-03-2006 23:09 ]

[-DarkShadow-]

....

[ Voor 99% gewijzigd door -DarkShadow- op 18-03-2006 23:48 ]

[Michali]

-DarkShadow- schreef op zaterdag 18 maart 2006 @ 21:09:
[...]

Hoe pak ik dit aan? Mijn JS is niet zo goed

Je moet controleren of de hoogte van de content div + de hoogte van de banner, menu en footer kleiner is dan de hoogte die je aan de container wilt gaan geven. Als je dat doet namelijk, dan past het er natuurlijk niet meer goed in. Als het kleiner is, dan moet je de container gewoon de minimale hoogte geven en anders de berekende waarde. Hoe je dat doet? Je kunt met clientHeight de hoogte van een element ophalen. Let wel dat je in FF meestal te maken hebt met een box model waarin de padding en eventuele borders daar nog van af gehaald moet worden. Als je die niet hebt, dan hoeft dat natuurlijk niet. Stukje voorbeeld code:

JavaScript:

var HOOGTE_VAN_BANNER_MENU_EN_FOOTER = 200; // dit moet je even afstellen
var pageHeight = document.documentElement ? document.documentElement.clientHeight: document.body.clientHeight;
var contentHeight = document.getElementById('content').clientHeight;
var maxContainerHeight = contentHeight + HOOGTE_VAN_BANNER_MENU_EN_FOOTER;
var containerHeight = pageHeight - 60;
if ( containerHeight < maxContainerHeight  ) containerHeight = maxContainerHeight ;
document.getElementById('container').style.height = containerHeight + 'px';
document.getElementById('footer').style.top = containerHeight + 'px';