Avatar billede kenneth_breve Nybegynder
12. februar 2008 - 19:39 Der er 14 kommentarer

Hvorfor virker dette CSS ikke i Firefox

Min hjemmeside har intet problem med at blive vist korrekt i IE.

Men i firefox så ignoreres Repeat y åbenbart?
Problemet er i #outer



body {

margin: 40px;
padding:0;
font: 12px Arial, Helvetica, sans-serif;

}


/* Ydre ramme som omkranser hele arbejdsområdet */
#outer {

width: 760px;
margin: auto;
margin-bottom: 0px;
background:#fff url( bgnew.png) repeat-y 100%;
float: none;

}


/* Topbanner ramme */
#hdr {

padding-top: 100px;
background: #fff url(topbanner.png) no-repeat;
}



/* Midtibanner ramme */
#hdr h1 {

color: #aff;
background:transparent;
font-size: 12px;
font-weight: bold;
text-align: left;
text-indent: 30px;
margin: 0;
border:solid #000000;   
border-width:0px 0px 0px 0px;
word-spacing: 20px;
background: #fff url(midtibanner.png) no-repeat;
padding-top: 10px;
padding-bottom: 50px;
}



#nav {

float:left;
width:170px;
padding: 1px;
text-align: center;
padding-bottom: 30px;
}


/* Under links ramme */
#nav ul {

margin: 5px;
padding: 10px 0 0 0;
list-style: none;
text-align: left;

}


#nav li {
    margin: 0;
}

#nav h2 {



}


#cont {
border:solid #000000;   
float: right;
width:540px;
padding: 1.5em;
border-width:0 0px 0 0px;

}


#cont h2 {
color: black;
}



#ftr {
clear: both;
text-align: center;
width: 760px;
margin: auto;
margin-bottom: 0px;
background: url(footer.png) no-repeat;

}


#ftr-lowest {
clear: both;
font-size: 0.8em;
text-align: center;
margin: 0px 0 0 0;
}
Avatar billede olebole Juniormester
12. februar 2008 - 22:52 #1
<ole>

Prøv at lægge et link til siden

/mvh
</bole>
Avatar billede kenneth_breve Nybegynder
12. februar 2008 - 22:58 #2
Avatar billede olebole Juniormester
12. februar 2008 - 23:11 #3
<ole>

Dit ul-element er i hvertfald ulovligt. Det må kun indeholde li-elementer som 'børn'.

Desuden fylder float'ede elementer ikke i element flow'et (hvilket betyder det omkransende div ikke får nogen baggrundsfarve ... det har ingen højde). Løsningen er at lægge et clear-div efter float'ede elementer:
    <div style="clear:both;height:1px;overflow:hidden">&nbsp;</div>

/mvh
</bole>
Avatar billede kenneth_breve Nybegynder
13. februar 2008 - 08:13 #4
1)
Jeg er ikke helt med på hvorfor du siger at mit ul-element er ulovligt. Du skal nok forklare lidt mere uddybende? :-)


2) Dvs. når jeg afslutter mine </div> så skal der på næste linje stå

<div style="clear:both;height:1px;overflow:hidden">&nbsp;</div>

Efter alle de elementer som har en float egenskab defineret?
Avatar billede erikjacobsen Ekspert
13. februar 2008 - 08:26 #5
Ole mener det han skrive (gætter jeg). Se http://www.html.dk/dokumentation/html4/tags/ul/
En <ul> består af en række <li>-er, og det har du ikke. Der er ingen grund til at bruge mere tid på at finde forskelle mellem browsere, før det er i orden. Og er der mere af samme slags, så også det.
En god regel er at få valideret dit HTML på http://validator.w3.org/ - når den holder mund, så kan man begynde at kigge på browserforskelle. (Tilsvarende for CSS)
Avatar billede kenneth_breve Nybegynder
13. februar 2008 - 17:27 #6
Tak for svarene Erik og Ole.

Jeg har nu ændret siden således at den valideres. Både CSS og HTML valideres.

I kan finde den version som valideres her:

http://www.haardttrae.dk/testVersion/index.php


Der er dog stadig samme problem når siden skal vises i FireFox??
Avatar billede erikjacobsen Ekspert
13. februar 2008 - 20:28 #7
Det er vist kun et lille af dine problemer ;) Med
  background-image: inherit;
i de divs, der skal have baggrundsbilledet, så kan du se det, men så kan du også se, at slet ikke fylder det de skal.
Avatar billede kenneth_breve Nybegynder
13. februar 2008 - 23:07 #8
Hej Igen.

Det hjalp med background-image: inherit;

Men ja, jeg kan godt se at der lige er nogle div størrelser der skal tilrettes lidt :)

Tak for hjælpen, smid et svar.
Avatar billede kenneth_breve Nybegynder
13. februar 2008 - 23:09 #9
Det er dog mærkeligt at selvom baggrunds billedet vises helt forkert i firefox, så vises det stadig helt korrekt i IE. :-)
Avatar billede erikjacobsen Ekspert
13. februar 2008 - 23:29 #10
Jeg har ikke analyseret dit tilfælde, men det er ikke almindeligt at regne IEs opførsel som standarden.

Jeg samler slet, slet ikke på point, tak.
Avatar billede olebole Juniormester
14. februar 2008 - 00:47 #11
Da du float'er elementerne i 'outer', er der intet, der spænder 'outer' ud. Derfor skal du lægge en clear-dims efter disse elementer, men inden du lukker 'outer'  ;o)
Avatar billede olebole Juniormester
14. februar 2008 - 00:49 #12
- og nej, det er _ikke_ IE, der viser baggrundsbilledet korrekt - det er FF. IE viser derimod helt klart baggrundsbilledet, som du ønsker ... men det er to forskellige ting  ;o)
Avatar billede olebole Juniormester
14. februar 2008 - 00:51 #13
- og så bør du forøvrigt spare voldsomt på tomme linjer i din kode - ligesom du bør lære at lave logiske indrykninger. Så bliver din kode overskuelig, hvilket vil være dig en stor hjælp i sig selv - og så gider jeg hjælpe dig en anden gang  :)
Avatar billede kenneth_breve Nybegynder
14. februar 2008 - 10:03 #14
Den omtalte clear dims er det denne her:

<div style="clear:both;height:1px;overflow:hidden">&nbsp;</div>


Og den skal altså ligge efter jeg har lukket hver div (som ligger i #outer)?

Sorry... jeg skal nok huske at sætte koden pænere op næste gang..
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