Avatar billede lillebror Nybegynder
29. oktober 2005 - 11:51 Der er 7 kommentarer og
1 løsning

Design giver problemer i firefox

Hej Eksperter

Jeg er ved at lave en hjemmeside, men jeg har opdaget en meget beklagelig fejl, når siden vises i firefox.

Jeg har en top der er 750px bred og en menu under den, derefter kommer min content boks, som har samme bredde, men som har en fordefineret højde på 400px. til sidst har vi bunden på samme bredde og 20px høj.

Problemet kommer når der er overflow. Jeg tror det er fordi firefox ikke mener at content skal blive større end 400px, så hellere lade indholdet overlappe bunden. IE derimod udvider bare boksen der er defineret til at være 400px høj.

Jeg kunne selvfølgelig bare sætte noget overflow på boksen, som skjuler det ekstra indhold, men det mener jeg ikke er en passende løsning.

Jeg kunne også fjerne foruddefineringen på 400px, men så vil bunden jo flyde efter hvor meget indhold der er. Jeg er mest tilhænger af at bunden sidder nederst i browseren i 1024*768 når der ikke er særligt meget indhold på siden, men at den kan ekspanderes når der kommer lidt mere indhold på siden end der er plads til.

Det er også det der sker i IE nu, men FF har en anden måde at løse det på, er der nogen der har et godt forslag?
Avatar billede johan.o Nybegynder
29. oktober 2005 - 13:50 #1
Prøv med style='min-height: 400px;'

Læs her : http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-heights

Hvis ikke det hjælper så vil jeg anbefale at du skrive noget kode eller et link i dit næste indlæg :)

Mvh. Johan
Avatar billede lillebror Nybegynder
29. oktober 2005 - 15:46 #2
min-height virker ikke for mig, ikke engang på en simpel div i et tomt dokument:
<div style="min-height: 100px; border: 1px solid black;">
            er det her 100px?
        </div>

Hvordan kan det være?
Avatar billede johan.o Nybegynder
29. oktober 2005 - 16:12 #3
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0//EN' 'http://www.w3.org/TR/REC-html40/strict.dtd'>
<html>
<head>
<title>Test</title>
</head>
<body>
<div style='min-height: 200px; border: 1px solid #FF0000;'>hej<br>hej<br>hej</div>
<div>Farvel</div>
</body>
</html>

Hm, det virker efter hensigten i FF men ikke i IE kan jeg se......der tænkes :)

Mvh. Johan
Avatar billede lillebror Nybegynder
29. oktober 2005 - 16:14 #4
Siden det kun virker i FF, kan jeg jo muligvis bruge funktionen til at fixe problemet i FF.
Jeg vil lige kigge på det senere
Avatar billede johan.o Nybegynder
29. oktober 2005 - 16:30 #5
Nå nu vil hustruen igen på hestenettet, så jeg må forløbig nøjes med at undrer mig, jeg troede jo at DOCTYPE'en gjorde kål på den slags uoverensstemmelser.

Mvh. Johan
Avatar billede skovenborg Nybegynder
29. oktober 2005 - 17:56 #6
jeg plejer at udnytte, at IE ikke kender > selectoren i CSS. På den måde kan du skrive:
#kasse {
        height:200px;
        border: 1px solid #FF0000;
  }
  HTML > BODY #kasse {
        height:auto;
        min-height:200px;
  }
<div id="kasse">hej<br>hej<br>hej</div>

Læg mærke til at height:auto; også er nødvendig. Da IE ikke kender > selectoren springer den over den boks, som kun Mozilla (og Opera og alle andre browsere, som har en ordentlig css-forståelse) læser. Dermed bliver fejlen rettet.

I den næste version af IE (7'eren) regner jeg med, at de kommer til at understøtte denne selector, så der vil tricket naturligvis ikke virke. Men måske IE også retter fejlen med højden ved samme lejlighed (så vidt jeg er orienteret er det faktisk rigtignok det Firefox gør...men jeg selvfølgelig tage fejl ;-)
Avatar billede lillebror Nybegynder
05. november 2005 - 17:33 #7
smid et svar skovenborg, det virker helt fortræffeligt!
Avatar billede skovenborg Nybegynder
05. november 2005 - 17:37 #8
den er mægtig :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester