CSS i Firefox

din side validerer ikke 100%, det kan være én ting. Men for at du får din div med skal du i firefox definere position:relative;

Det ligner godt nok nogle manglende clear-divs ...

I øvrigt kan du lige checke valideringen og rette de fejl, der er med f.eks. åbne  og lukkede ul-ting ...

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.warfaregame.dk%2Fdiv%2Fkif2%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1

Prøv lige dette herunder:
#middlemenu {
position: relative
float : left;
height : 200px;
text-align : left;
width : 200px;
background : #ffffff;
padding : 15px 0 15px 25px;
font-size : 14px;
line-height : 2em;
background : #ffffff url("images/shadowl.gif") repeat-y top left;´

}

og denne her på alle de div bokse som skal indeholde noget text/billeder

html>body .middelmenu{
min-height: 100px;
height: auto;

ps. skal stå  efter hoved middelmenu

Beskrivelse af position
ved position relative placeres div boksene i forhold til hinanden og i den rækkefølge som de indsættes på html siden
Ved position absolute placeres div boksene i forhold til øverste venster hjørne på den side elle i den div boks som der er placeret i

Til roenving:
3 errors i min validering er nogle tegn i et link, så dem kan jeg vel ikke gøre noget ved?
Derudoer har jeg nu fjernet alle </li> i de <ul>'er hvor der var endnu en <ul> inde i. Så kom den fejl ikke mere.
Derudover har jeg fjernet et </p> som jeg ellers er 100 på burde være der. Nu mangler der et, men den er valid undtagen det link.

Til sibbelone:
Jeg har sat position:relative på og sat min-height og height:auto. Dette gør ikke den store forskel. Nu er #middlemenu bare 100px høj.
Det virker som om at teksten i #middlemenu ikke udvider #middlemenu. For man kan se at baggrunden stopper.
Det virker også som om at #middle heller ikke bliver udvidet af #middlemain .. For der burde være en baggrund på #middle, men den kan man ikke se...

Prøv lige igen
#middlemenu {
position: relative
float : left;
height : 200px;
text-align : left;
width : 200px;
background : #ffffff;
padding : 15px 0 15px 25px;
font-size : 14px;
line-height : 2em;
background : #ffffff url("images/shadowl.gif") repeat-y top left;
}
og derefte et lille ie6 hack
det der er herunder skal du lave til alle de div boxe du har der skal udvide sig

html>body #middelmenu{
min-height: 100px;
height: auto;}

det vil sige at der skal laves en for middelmain og middel

html>body #middelmain{
min-height: 100px;
height: auto;}

osv

var lige inde og se din css og ikke lavet rigtigt

#middlemenu {
position : relative;
text-align : left;
float : left;
width : 200px;
background : #ffffff;
padding : 15px 0 15px 25px;
font-size : 14px;
line-height : 2em;
background : #ffffff url("images/shadowl.gif") repeat-y top left;
min-height : 100px;
height : auto;
}

dette er ikke korekt
det skal vær som følgende


#middlemenu {
position: relative
float : left;
height : 200px;
text-align : left;
width : 200px;
background : #ffffff;
padding : 15px 0 15px 25px;
font-size : 14px;
line-height : 2em;
background : #ffffff url("images/shadowl.gif") repeat-y top left;
}
html>body #middelmenu{
min-height: 100px;
height: auto;}

så skal det virke

ps de fejl du har i link kan fjernes
brug
&anp;navn=Karlslunde
istede for
&navn=Karlslunde

udskift alle & med &amp; så er de fejl fjernet

Nu har jeg rettet HTML-fejlene :)

Jeg har også ændret de andre ting, tror jeg da, men nu svæver menuen i midten. Skal der måske en top eller left på den?

Hovsa, jeg havde ikke sat det ind rigtigt, men det har jeg nu.
Nu nærmer vi os.

I IE går menuen bare uden for #middle.
I FF kan man ikke se #middle's baggrund gennem #middlemain.

du skal have position relative på alle box elementer
alle de stede hvor du har en div med indhold skal der ente en position relative eller position absolute på

alle de justeringe som du gør i

html>body #middelmenu

kan ikke ses i ie 6 men virker i ie7 og ff
så er der justeringe du gerne vil lave det kunne være padding så gør det i

html>body #middelmenu

et lille eksempel

.holder {
    position: relative;
    width: 963px;
    height: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #fff;*/
   
    }

html>body .holder {
    min-height: 200px;
    height: auto;
    }
   
.indhold {
    position: relative;
    float: left;
    width: 957px;
    height: 300px;
    /*margin-bottom:10px;*/
    border: 3px solid #94aec4;
    background-color: #fff;
    background: url(../image/left_bg.jpg);
    background-repeat: repeat-y;*/
    background-color: #fff;}

html>body .indhold {
    min-height: 300px;
    height: auto;
    margin-bottom:10px;}
   
.toplogo {
    position: relative;
    float: left;
    width: 957px;
    height: 90px;
    background-color: #f90;
    background: url(../image/toplogo.jpg);
    background-repeat: repeat-y;}
   
.menu {
    position: relative;
    font-size: 11px;
    float: left;
    padding: 0px 0px 0px 0px;
    width: 947px;
    height: 28px;
    color: #fff;
    ackground-color: #eeffe3;
    display: inline;
    z-index: 200;}

   
.left {
    position: relative;
    float: left;
    width: 155px;
    height: 500px;
    margin-right: 0px;
    padding: 5px;
    background-color: #369;*/}

html>body .left {
    min-height: 500px;
    height: auto;}
   
.content {
    position: relative;
    float: right;
    width: 740px;
    height: 10px;
    padding: 10px;
    margin-top: 20px;
   
    background-color: #fff;}

html>body .content {
    min-height: 10px;
    height: auto;}
   
   
her er html>body brugt ved alle div box elementer

håber at du ved hvad jeg mener

<ole>

Det p-element, som du mener burde afsluttes, er fuldstændig overflødigt. I koden står der:

<h3>Hvad du finder på vores hjemmeside</h3>
<p>
<ul>
... ... ...
</ul>

- men du kunne ligeså godt skrive præcis det samme sådan:

<h3>Hvad du finder på vores hjemmeside</h3>
<p></p>
<ul>
... ... ...
</ul>

En HTML-parser ved nemlig godt, du ikke kan have div-, ul- og andre block-elementer liggende i et p-element, hvorfor den naturligvis tager dit ikke lukkede p-tag for et lukket  ;o)

Slet du bare det p-tag ... det er der ingen, der vil kunne se  =)

/mvh
</bole>

Sibbelone: Jeg forstår ikke helt hvad jeg skal putte ind i html>body? Skal det kun være min-height og height? Jeg kan se du også har puttet en padding ind.

Nu er det eneste problem at #middle ikke udvider sig i FF. Jeg prøvede at sætte et bogstav ind efter #middlemenu og #middlemain og så kom baggrunden ned dette bogstav.

Derudover virker javascriptet .offsetHeight ikke i FF?

Det er en længere kabale at få alt dette til at gå op :)

firefox skal have det sådan og det skal den nye ie7 også

i de gamle browser er det nok at skrive height: 100px
men alle de felter du vil have til at udvide sig skal have den der html fidus på


html>body .holder {
    min-height: 200px; /*sætter en minimums højde*/
    height: auto;      /*det er den her der får det hele til at udvide sig*/
    }

den der html fidus skal skriver rigtigt

html>body .holder {

ikke
html > body.holder
html >body . holder


men sådan her
html>body .holder {

Har jeg da ikke skrevet den rigtigt i mit css-dokument?

soerenlyn >> Der er ingen problemer med offsetHeight i FF ... hvordan har du prøvet at bruge den?

Jeg har prøvet nogle gange hvor offsetHeight ikke returnede noget.
Men selvfølgelig har jeg ikke noget eksempel på det lige nu :)

Kode:

var menuheight = document.getElementById('middlemenu').offsetHeight;
var mainheight = document.getElementById('middlemain').offsetHeight;
alert('Menu - ' + menuheight + ' Main - ' + mainheight);

Den returnere noget, men i FF er det 'Menu - 1172 Main - 837'.
I IE giver det 'Menu - 1119 Main - 844'

nej du har mellemrum mellem html og > og body
html > body
skal være
html>body

soerenlyn >> hvis du har oplevet, offsetHeight ikke returnerer noget, har der været fejl i koden. Brug trygt den en anden gang  ;o)

Er det mig der er helt blind? Kan du fortælle mig hvilken linje hvor jeg har lavet mellemrum mellem html og body?

http://www.warfaregame.dk/div/kif2/style.css

olebole:

Okay .. Det vil jeg så gøre :)
Men hvis jeg får fejl, så kontakter jeg dig :p

- og husk dit baseball bat  ;D

>>soerenlyn 20/06-2007 11:24:44

Ja, denne, som du ikke har med:

html,body{margin:0;padding:0;}

Nu er den også med roenving.

Der er stadig ingen baggrund i FF....

nej det kan jeg ikke så bare sådan ud når jeg validerede dit css sorry
prøv lige at sætte en background-color: #fff; på middelmain eller hvad den nu hedder der der ikke er farve på i firefox men ikke i den html>body

Det hjalp, men baggrunden i #middle burde da stadig kunne gå igennem?
Men nu er problemet at de ikke er lige lange, så derfor har jeg sat denne kode:

<script language="Javascript" type="text/javascript">
var menuheight = document.getElementById("middlemenu").offsetHeight;
var mainheight = document.getElementById("middlemain").offsetHeight;
if(menuheight >= mainheight) {
    document.getElementById("middlemain").style.height = menuheight;
} else {
    document.getElementById("middlemenu").style.height = mainheight;
}
</script>

I IE bliver de næsten lige lange, men i FF virker den ikke (olebole :P)..
Jeg mangler stadig også den sorte fade-kant på højre side af logoet, i FF...

offsetHeight virker fint i FF (prøv at alert'e værdien ... så vil du se, den er korrekt) - årsagen er en anden. Problemet er at få FF til at rendere baggrunde, der ligger udenfor viewport-området ... hvilket kan være overordentlig bøvlet  :o|

Det har du ret i olebole ... Kan du så fortælle mig hvordan jeg løser mit problem, nu hvor du er så klog ? :D

Jeg håber stadig I har idéer til hvordan jeg kan løse det, for jeg har stadig problemer med det :)

Olebole: http://www.warfaregame.dk/div/index.htm.

I bunden er der en javascript-kode der gør menu og main lige. Den virker i IE, men ikke FF. OffsetHeight virker, men hvad er så problemet?

Jeg har fundet en anden kode der gør div'erne lige høje, så nu virker det .. :)
Nu har jeg kun ét lille problem. I FF er der ingen grå kant på højre side af logoet..

Nu har jeg fixet det selv..

Tak for hjælpen alle 4 :)

Jeg synes Sibbelone skal have, fordi han har hjulpet mest. Med mindre jeg skal dele dem?

Du kan sagtens dele (se f.eks. http://expfaq.dk/ !-), men jeg har også set, at sibbelone har bidraget med mest !o]

del du bare

Så opret svar jer andre.