Avatar billede elskermad.dk Nybegynder
07. september 2006 - 23:15 Der er 41 kommentarer og
2 løsninger

Den er gal i FF

Hej Eksperter!

Jeg kan ikke få mit layout (menuerne) til at fungere i FF - Den er super i IE.
I kan se siden på nedenstående adresse:

http://vinderland.alvision.dk

Hvad er der galt?
Avatar billede nythjem Nybegynder
07. september 2006 - 23:36 #1
:) Hej Anders ?

Af en med kompetencer indenfor html troede jeg egentlig det var en af de lettere? *Gg* (http://www.alvision.dk/kompetencer.htm)

IE ligger padding inde i elementer, firefox ligger dem til :) Så du skal rette din padding eksempelvis.. :)

.menu_venstre_indhold {
    height:                21px;
    width:                156px;
    background-image:    url(/_grafik/layout/menu_venstre_indhold.png);
    background-repeat:    no-repeat;
    text-align:            left;
    padding:            0px 6px 0px 8px;
}

Om som den ser ud lige nu har du 156px i bredden + 6 i højre side + 8 i venstre side..

Så måske skulle du bare lade være med at definere en bredde, det er jo trods alt et block element :)
Avatar billede fixxxer Nybegynder
07. september 2006 - 23:53 #2
Din side bliver behandlet i quirks mode, både af IE og FF.. Forskellen er bare at quirks mode i IE, får den til at glemme alt om W3C forskrifter og andre vigtige ting..

Du kan prøve at udskifte din DTD med følgende, og sørge for at den står på den første linje i dokumentet, ellers vil IE ikke bruge den:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">


Når jeg bruger ovenstående arbejder både IE og FF i  compliance mode, og CSS bliver fortolket ens.
Avatar billede mclemens Nybegynder
07. september 2006 - 23:53 #3
... Og det viser så problemet med at designe uden en fuld doctype...
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
... der mangler url'en ellers er IE i quirks mode
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

... med IE i quirks så er det med padding som nythjem skriver relevant
[ IE ligger padding inde i elementer, firefox ligger dem til :) ]
- men hvis IE ikke er i quirks opfører den sig ligesom Firefox ...
Det er altså ikke en general ting - det sker kun i quirks ...

((( [ Af en med kompetencer indenfor html troede jeg egentlig det var en af de lettere? *Gg* ] vs. [ IE ligger padding inde i elementer, firefox ligger dem til :) ] ... Jeg troede egentlig at nythjem vidste at det kun gjorde sig gældende med IE i quirks ;) )))
Avatar billede mclemens Nybegynder
07. september 2006 - 23:56 #4
Nåh, ½ min. for sent ... Men doctype'en skal have url'en og der må ikke være kommentarer eller andet før doctypen ... Ellers er IE i quirks - en kort doctype er derfor desværre lettere ubrugelig.

... Design med IE i quirks er ikke sjovt - det er meget svært at have ens design i både IE og FF (jeg havde selv 1 px forskel grundet 1px padding imellem IE og FF da jeg kørte i quirks grundet xml deklarationen før doctypen ...)
Avatar billede mclemens Nybegynder
08. september 2006 - 00:00 #5
Hmmm, fixxxer's korte doctype i 07/09-2006 23:53:19 virker også :D
(der lærte jeg så noget nyt :o) med IE's håndtering af korte doctypes )
Avatar billede fixxxer Nybegynder
08. september 2006 - 00:01 #6
Jeg synes ikke jeg oplever at IE går i quirks mode med den korte men strict DTD.. Men jeg er ikke ekspert på det område, så bind mig ikke fast på det :)
Avatar billede fixxxer Nybegynder
08. september 2006 - 00:02 #7
Det var tosset som i cross-poster (det gør vi sikkert også nu), men så kan jeg kun sige at noget af det standard markup Adobe GoLive skriver, ikke er helt til rotterne alligvel !-)
Avatar billede mclemens Nybegynder
08. september 2006 - 00:03 #8
Det jeg mente var at det var den korte doctype der var på hans side som gav quirks:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'> ... din er fin nok ;)
Avatar billede mclemens Nybegynder
08. september 2006 - 00:03 #9
[ Det var tosset som i cross-poster ] :D
Avatar billede mclemens Nybegynder
08. september 2006 - 00:06 #10
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<script type="text/javascript">
java script:alert(document.compatMode);
</script></head><body></body></html>

^ - Eksempel ... Med din doctype er den ikke i quiks (BackCompat) men CSS1Compat
Avatar billede fixxxer Nybegynder
08. september 2006 - 00:06 #11
Der skulle have stået "som vi" :D
Avatar billede mclemens Nybegynder
08. september 2006 - 00:14 #12
Hmm, du skal måske lige have en line-height ind i din css og
så sletning af den generalle padding som nythjem siger... f.eks.:


.menu_venstre_indhold {
    height:                21px;
    width:                156px;
    background-image:    url(./menu_venstre_indhold.png);
    background-repeat:    no-repeat;
    text-align:            left;
    padding-left:          8px;
    line-height:21px;
}
Avatar billede mclemens Nybegynder
08. september 2006 - 00:16 #13
Ved ikke om line-height skal være 20px istedet :/
(line-height også for at rykke teksten nedad i "boxen")

... slettede padding på right i ovenstående,
hvis den skulle bruges ? er det som nythjem skrev:
padding:            0px 6px 0px 8px;
Avatar billede mclemens Nybegynder
08. september 2006 - 00:18 #14
Men det ser 100x bedre ud end http://www.vinderland.dk/auktion/ :o)
Avatar billede mclemens Nybegynder
08. september 2006 - 00:18 #15
(når man kigger i firefox)
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 08:42 #16
tak for jeres indlæg:

kan slet ikke forstå jeg har glemt den korrekt doctype, men den er på nu!

nythjem: selvom man har kompetencer kan man jo stadig udvikle dem ;o)

mclemens: ja, den nuværende vinderland er ikke god men kan ikke tage hele æren for den :)

Jeg har fået venstre menudel til at passe, men den er stadig galt over i højre side?
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 08:53 #17
Hvordan siger at forskel på padding er efter om man har defineret doctype eller ej?
Har altid regnet mine paddings for at ligge sig inde i elementet?
Avatar billede mclemens Nybegynder
08. september 2006 - 08:53 #18
.menu_hojre_punkt {
    height:                26px;
    width:                156px;
    background-image:    url(./menu_hojre_punkt.png);
    background-repeat:    no-repeat;
    text-align:            left;
    line-height:        25px;
    padding:            0px 0px 0px 30px;
    font-weight:        bold;
}
Avatar billede mclemens Nybegynder
08. september 2006 - 08:56 #19
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
</head><body>

<div style="width:200px;padding:250px;background:red;">Slet doctype efter første test run</div>

</body></html>
Avatar billede mclemens Nybegynder
08. september 2006 - 08:58 #20
[ Hvordan siger at forskel på padding er efter om man har defineret doctype eller ej? ]
Forskellen på quirks og ikke quirks er som sagt om IE overholder
css eller rettere overholder det css som den kender :)
Problemet med padding er et typisk quirks problem.
Avatar billede mclemens Nybegynder
08. september 2006 - 09:07 #21
Denne css hjælper måske lidt mere på indrykingen...
.kant_hojre {position:absolute;
    width:                5px;
    background-image:    url(/_grafik/layout/kant_hojre.png);
    background-repeat:    repeat-y;
    overflow:            hidden;
}
Avatar billede mclemens Nybegynder
08. september 2006 - 09:08 #22
^ - glem den del :P
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 09:10 #23
jeg har problemer med at midterdelen ikke er den ønskede bredde og derved er teksten rykket for langt ind på siden

dertil har jeg problemer med at der er ca. 3 px til højre for højre menu i FF
Avatar billede mclemens Nybegynder
08. september 2006 - 09:12 #24
.menu_venstre_punkt {
    height:                26px;
    width:                126px;
    background-image:    url(/_grafik/layout/menu_venstre_punkt.png);
    background-repeat:    no-repeat;
    text-align:            left;
    line-height:        25px;
    padding:            0px 8px 0px 30px;
    font-weight:        bold;
}
Avatar billede mclemens Nybegynder
08. september 2006 - 09:15 #25
Hvis det skal gå fra menu til menu med indholdet kan du gøre:


.menu_venstre_punkt {
    height:                26px;
    width:                126px;
    background-image:    url(/_grafik/layout/menu_venstre_punkt.png);
    background-repeat:    no-repeat;
    text-align:            left;
    line-height:        25px;
    padding:            0px 0px 0px 30px;
    font-weight:        bold;
}

.menu_venstre_indhold {
    height:                21px;
    width:                148px;
    background-image:    url(./menu_venstre_indhold.png);
    background-repeat:    no-repeat;
    text-align:            left;
    line-height:        20px;
    padding:            0px 0px 0px 8px;
}


... Husk at padding tilføjes til defineret width
... det er det der kan give problemer :)
Avatar billede mclemens Nybegynder
08. september 2006 - 09:17 #26
Og dem her også ;)



.menu_hojre_punkt {
    height:                26px;
    width:                126px;
    background-image:    url(./menu_hojre_punkt.png);
    background-repeat:    no-repeat;
    text-align:            left;
    line-height:        25px;
    padding:            0px 0px 0px 30px;
    font-weight:        bold;
}

.menu_hojre_indhold {
    height:                21px;
    width:                142px;
    background-image:    url(./menu_hojre_indhold.png);
    background-repeat:    no-repeat;
    text-align:            left;
    line-height:        20px;
    padding:            0px 6px 0px 8px;
}
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 09:20 #27
jeg fjernede width i de classes du skrev der hvilket hjalp :) tror siden vises som den skal nu...

smider du et svar?
Avatar billede mclemens Nybegynder
08. september 2006 - 09:20 #28
Hvis der så skal være 10 px i afstand fra indhold til menu på begge sider - kan du gøre:

#menu {
    width:                166px;
}

og

#teaser {
    width:                156px;
    text-align:            right;
padding-left:10px;
}
Avatar billede mclemens Nybegynder
08. september 2006 - 09:20 #29
Ok :)
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 10:03 #30
jeg har skiftet til xhtml 1.0 Strict - Er det den rigtige jeg skal  bruge hvis jeg vil lege med xhtml? eller er det stadig dumt at lege med xhtml?
Avatar billede mclemens Nybegynder
08. september 2006 - 10:43 #31
[ jeg har skiftet til xhtml 1.0 Strict - Er det den rigtige jeg skal  bruge hvis jeg vil lege med xhtml? ] Jeps ;) (bruger selv 1.1 men det er på en måde forkert - se evt. Olebole's artikler.)

[ eller er det stadig dumt at lege med xhtml? ]
Kig evt. på http://www.eksperten.dk/spm/727214

og: http://www.eksperten.dk/spm/719030

Læg mærke til at xhtml skal leveres som application/xhtml+xml
for browsere der understøtter det - se f.eks.:
http://www.eksperten.dk/spm/719030#rid6329210

Og så skal javascript scriptes mod xml dom med setAttribute,
getAttribute eventhandlers m.v. - (ikke noget med innerHTML og lignende).
- Jeg er ikke selv så langt inde i js endnu ... så jeg er sikker på at
jeg skriver korrekt js xml dom scripts...
Avatar billede mclemens Nybegynder
08. september 2006 - 10:43 #32
Tak for point :)
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 11:07 #33
har indsat http://www.eksperten.dk/spm/719030#rid6329210 i mit system hvilket gør FF slet ikke viser siden men i stedet xml-træet? hvad er der galt?

du får nok nogle spørgsmål ang. den nye måde javascript skal skrives på senere :) plejer altid at bruge innerHTML da det er så nemt
Avatar billede mclemens Nybegynder
08. september 2006 - 13:50 #34
Prøv:
doctypen ... og så
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Style-Type" content="text/css" />

og resten af head ...

(((snippet fra toys ... to ... kids.com)))
Avatar billede mclemens Nybegynder
08. september 2006 - 13:51 #35
f.eks.: <meta http-equiv="content-language" content="da" /><link rel="stylesheet" type="text/css" href="stylesheet.css" /><title>titlen</title></head>
Avatar billede mclemens Nybegynder
08. september 2006 - 14:00 #36
Nok nærmest den manglende
content-type definering der kikser ...
(er tilbage igen iaften ;) )
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 15:01 #37
Ser ud til at det giver pote :)

burde den ikke bliver sat i php's header?
Avatar billede mclemens Nybegynder
08. september 2006 - 17:10 #38
[ burde den ikke bliver sat i php's header? ]Nej, fordi så leveres siden ikke som application/xhtml+xml men text/html ... Det med meta'en er ligesom på www.w3.org , men hvis jeg istedet for hovedsiden kigger på http://www.w3.org/1999/xhtml ser den sådan her ud :

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="http://www.w3.org/StyleSheets/TR/base"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>XHTML namespace</title>
  <link rel="stylesheet" type="text/css"
        href="http://www.w3.org/StyleSheets/TR/base" />
</head>

... læg mærke til xml stylesheet defineringen ...
(og læg mærke til at der stadig er en almindelig stylesheet definering formoder at det er til IE og andre ikke xhtml understøttende browsere)

Nu har jeg ikke sat mig meget ind i xml endnu - men blot xhtml for at være klar til / have forberedt mig lidt på at IE understøtter xhtml med xml (så jeg er klar til xhtml 2.0 når det kommer om x-antal år) ... men læser nok lidt mere om xml i slutningen af i år, men hensynet til søgemaskiner og IE kommer først...

... Det der vel egentlig sker ved meta'en er at man fortæller browserens parser at indholdet er text/html (i dette tilfælde er html så xhtml) og så parses indholdet af filen som arkup istedet for rå xml ... ellers skulle der nok det <?xml-stylesheet ... til for at konvertere det :/
Avatar billede mclemens Nybegynder
08. september 2006 - 17:12 #39
Tror egentlig ikke at
<meta http-equiv='content-style-type' content='text/css' />
er nødvendigt ... ved ikke hvor jeg faldt over den henne?
( Det gik lidt hurtigt i midten af sidste år da jeg
læste om xhtml rundt på en del forskellige sider )
Avatar billede mclemens Nybegynder
08. september 2006 - 17:19 #40
^ - Eller rettere den er ikke nødvendig :)
Avatar billede mclemens Nybegynder
08. september 2006 - 17:22 #41
Nu fandt jeg stedet hvor jeg fik den fra :o)
http://www.w3.org/TR/html4/present/styles.html#h-14.2.1
Avatar billede elskermad.dk Nybegynder
08. september 2006 - 18:09 #42
okay super, det vigtigste er jo det virker :)
har en del problemer med det opdatering, men det bliver over i den anden tråd så jeg kan uddele points ;o)

mange tak
Avatar billede mclemens Nybegynder
08. september 2006 - 19:48 #43
Velbekom ;)
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