[CSS] Probleempje met min-heigt - Softwareontwikkeling

dinsdag 11 december 2007 21:33

Acties:

Verwijderd

Topicstarter

Hallo,

Ik ben bezig met het afronden van mijn eerste serieuze website. Heb alles keurig netjes met CSS gedaan en ben best tevreden met het resultaat. Er is echter nog een probleempje:

De site maakt gebruik van min-heigt om een minimale hoogte te hebben. Op de meste pagina's staat niet heel veel tekst, op deze pagina's wil ik dat de site een minimale hoogte heeft. Er is een onderdeel dat echter wel langer is vandaar dat ik geen fixed height gebruik maar een min-height.

Zie de volgede url: www.friederikelinssen.com

onder het menuitem "Biography" is het langere deel te vinden. De rest van de pagina's hebben min of meer dezelfde lengte.

In Firefox(waar anders) ziet alles er uit zoal het moet, in IE zie je op de homepage echter een klein stukje van de achtergrond kleur onder de foto verschijnen als of IE de achtergrond oprekt. Dit is in Firefox niet zo en ook niet de bedoeling. De foto helemaal onder aan de pagina tegen de rand staan.

Ik denk zelf dat het aan min-height ligt. Als ik de pagina's fixed height geef is het probleem verholpen alleen loopt dan de tekst van Biography ver buiten de achtergrond box.

De html

HTML:

<body>
<div id="page">
    <div id="header">
    </div>
       <div id="content">
        <div id="home">
            <img src="images/FriederikeLinssen.gif"/>  
          </div>
    </div>
</div>
</body>
</html>

En de relevante CSS

Cascading Stylesheet:

#page {
    margin: 70px auto 0;
    width: 730px;
    min-height: 570px;

}

#home {
    margin: 0px;
}

Kan iemand mij hiermee helpen. Ik heb al veel gelezen over het gebruik van min-height en de verschillen daarmee tussen IE en FF. Wil het eigenlijk liever niet gebruiken maar kan geen andere oplossing bedenken.

woensdag 12 december 2007 02:10

Acties:

Verwijderd

je kan proberen om handmatig de padding (ruimte tussen de border van je div tot waar de inhoud van de div begint) negatief in te stellen aan de onderkant, is misschien patchy, maar aangzien dit me niet een hele zware dynamische site lijkt hoef je je niet al te veel zorgen te maken omtrent dat soort mini-hacks.

laat even weten wat

code:

#home{
margin: 0px;
padding-bottom: -1px; //of -2px of -3px
}

doet.

success

woensdag 12 december 2007 10:04

Acties:

orillion

Ik had zoiets ook op een site. Werd verholpen door height: 100%;

woensdag 12 december 2007 14:49

Acties:

Verwijderd

Topicstarter

Bedankt,

Zal het ff proberen.

woensdag 12 december 2007 15:02

Acties:

Verwijderd

Topicstarter

Beide oplossingen hebben geen effect.

Een negatieve padding reageert IE niet op, ook niet als ik margin: 0px; weglaat.
Bij de hieght: 100% zie ik ook niets veranderen, de pagina's met minder tekst worden dan ook korter.
Dit is nu net niet de bedoeling.

woensdag 12 december 2007 15:06

Acties:

mithras

Een min-height wordt niet geaccepteerd door IE < 7. Er is echter nog een bug in de CSS van IE < 6, waardoor je css kan toevoegen die andere browsers (zoals het hoort) negeren.

Cascading Stylesheet:

#box{
  min-height: 300px; //voor normale browsers, ie6 snapt het niet 
}
* html #box{
  height: 300px; //voor ie6
}

IE<6 interpreteert namelijk een height als een min-height, en met * html kan je extra css toevoegen die alleen IE6 begrijpt.

donderdag 13 december 2007 19:16

Acties:

Verwijderd

#box {
min-height: 300px;
_height: 300px; /* voor ie6 */
}

donderdag 13 december 2007 21:56

Acties:

Boelie-Boelie

I.p.v. die hacks (* html en _ ) zou ik voor de conditional comment gaan.

Cogito ergo dubito

zaterdag 15 december 2007 09:55

Acties:

Verwijderd

Topicstarter

Ik ben al wat aan het prutsen geweest met de bovenstaande hacks maar krijg het nog niet goed ermee. Het werkt wel om bijvoorbeeld met * html een min-height in alle browsers te krijgen, maar in IE blijf ik onder het plaatje nog steeds een stukje achtergrond zien wat niet de bedoeling is.
Wel alvast bedankt voor jullie suggesties.

zaterdag 15 december 2007 10:12

Acties:

mithras

Dat is ook onder Fx hoor

Komt door een default margin op de body, dus body{margin:0;}

Pagina: 1

Reageer