Avatar billede AnyFellow Mester
09. august 2005 - 10:37 Der er 19 kommentarer og
1 løsning

Hjemmeside ser forkert ud i Firefox

Hej

Jeg har lavet en hjemmeside:
http://www.psykolog-isabella.dk/

Hjemmesiden er valideret efter w3c.org's standarder hvilket jeg troede var en "garanti" for at siden som minimum så nogelunde ud i alle browsere.

Desværre ser siden total dårlig ud i Firefox.

Nogle med gode forslag til hvad der er gjort forkert, eller evt. artikler der kan give gode råd i forhold til at lave hjemmesider der både du'r i IE og Firefox?
Avatar billede snowflake7 Nybegynder
09. august 2005 - 10:46 #1
den ser godt nok lidt underlig ud i firefox. Har du prøvet at undersøge, om der er nogen html koder, som Firefox ikke understøtter?
prøv at gå ind på www.html.dk eller spørg i firefox eget forum.
Avatar billede roenving Novice
09. august 2005 - 11:03 #2
Den ser da godt mærkelig ud i kildekoden umiddelbart, men jeg gad ik' li'e bruge en masse tid på dit stylesheet !-)

-- men jeg vil umiddelbart gætte på, at der er jongleret en del med absolut positionering, hvilket der overhovedet ikke er behov for ...

-- som jeg ser det har du brug for:

-- en site-holder-div, som har en defineret bredde, border, padding og ca. margin: 40px auto 0 auto;

-- en ramme-div inde i site-holderen, som _ikke_ har en bredde, men kun baggrundsfarve og border

-- en banner-ting inde i rammen, som bare kan være et stort image eller måske et image i en div

-- en content-div inde i rammen, som indeholder en tabel med to celler til hhv. menu og indhold (kan laves på andre måder, men det er det simpleste !-)

-- og til slut en footer-div, hvor du har en tabel med to celler med forskellig text-align !o]
Avatar billede roenving Novice
09. august 2005 - 11:03 #3
-- og footeren skal selvfølgelig indeni rammen !-)
Avatar billede AnyFellow Mester
09. august 2005 - 11:04 #4
Tror ikke problemet er om firefox ikke understøtter de html-koder jeg bruger (ikke noget fancy der), men nærmere at den fortolker en del af css'en forkert...
Avatar billede AnyFellow Mester
09. august 2005 - 11:06 #5
roenving...> Alle mine div'er er "relative" positioneret:

body {
        margin:30px 0px 30px 0px;
        padding:0px 0px 0px 0px;
        background-color: #eee9d6;
        color: #000000;
    text-align:center;
}
   
#outer_content {
        position:relative;
    width: 748px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
        border: 1px solid #c1ad7e;
        background-color: #ffffff;
        color: #000000;
        padding: 5px 5px 5px 5px;
}


#inner_content {
        position:relative;
        width:746px;
        border: 1px solid #c1ad7e;
        background-color: #eee9d6;
        color: #000000;
}

#top {
        position:relative;
        overflow:hidden;
        width:746px;
        height:73px;
        background-image: url(../grafik/top.gif);
}

#center {
        position:relative;
        width:746px;
}


#bund {
        position:relative;
        overflow:hidden;
        width:746px;
        height:43px;
        background-image: url(../grafik/bund.gif);
}

#menu {
        position:relative;
        width:110px;
        height: 400px;
        padding: 33px 0px 0px 10px;
        float: left;
}

#indhold {
        position:relative;
        width:560px;
        float: right;
        margin: 36px 20px 36px 0px;
        line-height: 85%;
}
Avatar billede roenving Novice
09. august 2005 - 11:08 #6
' ... fortolker en del af css'en forkert' hedder fortolker anderledes !-)

-- for i de fleste tilfælde fortolker Gecko-maskinen strengt efter w3cs anbefalinger, mens IE liiige har en anderledes måde at anskue det på, og bruger man et defineret dtd-link i doctypen er det oftest omkring absolut positionering, der er forskelle, da FireFox f.eks. holder strengt på, at absolut positionerede elementer intet kan gøre, som påvirker andre end child-elementers placering  !o]
Avatar billede roenving Novice
09. august 2005 - 11:12 #7
floats i Geckoerne vil også medføre, at der er forskelle, og der kan jeg ikke lige huske om det er IE eller dem, som laver fejlen, men hvis du laver den opbygning, hvor du bruger en enkelt tabel, vil du ikke have problemet !-)
Avatar billede roenving Novice
09. august 2005 - 11:13 #8
... den opbygning, jeg skitserede, ...
Avatar billede skater Nybegynder
09. august 2005 - 11:14 #9
Prøv at fjerne float: right og indsæt en height: 400px i din #indhold. Har kun checket det i firefox's extension, der kan "pille" ved siders css.
Avatar billede schwarz84 Nybegynder
09. august 2005 - 11:21 #10
Det kan sagtens være at det du har skrevet rent faktisk fortolkes 'rigtigt' i Firefox og 'forkert' (men alligevel ser ud som du vil have det til fordi du har skrevet det mens du så siden her) i IE.
Din DocType (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">) får IE til at arbejde med CSS på en anden måde end standarden foreskriver. Den skal rettes til
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
hvis standarden skal følges bare nogenlunde.
Du har skrevet siden i strict HTML4, men valgt en anden doctype. Det skal give problemer...
Avatar billede roenving Novice
09. august 2005 - 11:31 #11
>>schwarz64 ???

CSS-rekommendationerne tolkes fuldstændig ens med de to doctypes, forskellen er kun hvad du har lov til at skrive i dine html-tags ...
Avatar billede schwarz84 Nybegynder
09. august 2005 - 11:32 #12
roenving: Er der ikke noget med en box model, eller er det mig der tager fejl?
Avatar billede roenving Novice
09. august 2005 - 11:34 #13
-- nej, det afhænger af, om der overhovedet er et dtd-link, og der er loose.dtd'en ligeså god som strict.dtd'en ...
Avatar billede roenving Novice
09. august 2005 - 11:35 #14
-- selvfølgelig under forudsætning at man skriver kode, som er valid i forhold til dtd'erne !-)
Avatar billede schwarz84 Nybegynder
09. august 2005 - 11:50 #15
Måske skal du prøve at stille spørgsmålet her:
http://forums.mozillazine.org/viewforum.php?f=25
Der sidder nogle hajer som nok skal kunne hjælpe dig.
Avatar billede notes2c Nybegynder
09. august 2005 - 17:43 #16
Du skal bryde din float:

#bund {
        position:relative;
        overflow:hidden;
        width:746px;
        height:43px;
        background-image: url(../grafik/bund.gif);
clear: both; /* <- Indsæt og det virker */
}
Avatar billede olebole Juniormester
09. august 2005 - 19:04 #17
<ole>

IE's tolkning af CSS' box-model afhænger nu ikke kun af, om definitions-URL'en er present eller ej. IE's 'Doctype Switch' gælder kun for Frameset- og Transitional-DTD'erne.
Under HTML 4.01-Strict overholder IE derimod CSS's box-model både med og uden definitions-URL  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
09. august 2005 - 19:07 #18
- og heller ikke i denne tråd slap vi for et link til html.dk  :o|
Det må endnu engang frarådes på det kraftigste at tage informationer fra html.dk seriøst. Bevares, der er huller mellem fejlene ... men de er få og små!
Avatar billede AnyFellow Mester
09. august 2005 - 20:07 #19
Hvis jeg synes jeg var forvirret inden jeg fik problemet, må man sige jeg er blevet forvirret på et højere niveau ;o)

notes2c...> Din løsning løste problemet. Nu vil jeg så nærlæse den lille tilføjelse for at blive klogere på hvorfor den ændrer så meget i koden.

Alle andre, tak for jeres tid :o)
Avatar billede olebole Juniormester
09. august 2005 - 21:19 #20
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