Avatar billede little_kim86 Nybegynder
07. februar 2006 - 17:14 Der er 25 kommentarer og
1 løsning

Forskeld på 1px i IE og FF

Jeg har et problem med at IE og FF ikke viser det samme.

Har sat <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ind på min index side da alle siderne bliver "require" dertil.

Kode:

<div align='center'>   
    <table border='0' width='400' id='table1' cellspacing='0' cellpadding='0' style='border: 1px solid #000000'>
        <tr>
            <td width='120px' bgcolor='#E9E9E9' align='left' valign='top'>
                <table border='0' width='120px' id='table3' cellspacing='0' cellpadding='0'>
                    <tr>
                        <td align='left' valign='top' height='100' width='100%' style='border-bottom:1px solid #808000'>
                        <img border="0" src="nyheder/billede_ramme.gif" width="120" height="100" style="word-spacing: 0; text-indent: 0; line-height: 100%; margin: 0"></td>
                    </tr>
                    <tr>
                        <td align='left' valign='top' height='40' bgcolor='#E9E9E9' background='nyheder/under_ramme.gif' width='100%' style='background-repeat: no-repeat'>
                            <p style='margin: 0 2px'><font face='Verdana' size='1' color='black'><b>Af:</b> $oprettet_af</font>
                            <br>
                            <font face='Verdana' size='1' color='black'><b>Dato:</b> $dato</font></p>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor='#E9E9E9'>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
            <td width='280px' bgcolor='#E9E9E9' valign='top' align='left'>
                <table border='0' width='280px' id='table2' cellspacing='0' cellpadding='0'>
                    <tr>
                        <td height='15px' align='left' bgcolor='#A9C0A9' width='100%' style='border-bottom: 1px solid #000000'>
                            <p style='margin: 0 3px'><b><font face='Verdana' size='1' color='#000000'>$emne</font></b></p>
                        </td>
                    </tr>
                    <tr>
                        <td align='left' valign='top' bgcolor='#E9E9E9'>
                            <p style='margin: 0 3px'><font face='Verdana' size='1' color='#000000'>$nyhed</font></p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>





Når den bliver vist i FF passer den godt nok, men når jeg ser den i IE er der en celle er 1px større end i FF. Hvis Jeg så ændre de "height='15px'" til 14 ja så passer det i IE og ikke i FF.

Nogle forslag til dette problem???
Avatar billede roenving Novice
07. februar 2006 - 17:18 #1
Lyder som om, du har noget stående foran doctype-tagget !-)
Avatar billede little_kim86 Nybegynder
07. februar 2006 - 17:20 #2
Noget foran? Tror jeg ikke, for hvis jeg fjerne doctype-tagget så ændre siden layout sig...
Avatar billede roenving Novice
07. februar 2006 - 17:24 #3
Prøv lige at kigge i Vis kilde i browseren !-)
Avatar billede Slater Ekspert
07. februar 2006 - 17:28 #4
Det har jeg nu også selv været ude for - det var bare med en XHTML 1.0 doctype.
Det lod til at IE tegner borders UDENPÅ cellerne, hvor Firefox tegner dem indeni.
Altså så en celle der er 300px bred, og har en border-right på 1px, bliver 301px bred på IE..
Jeg fandt aldrig nogen løsning.
Avatar billede little_kim86 Nybegynder
07. februar 2006 - 17:31 #5
Der er et mellemrum foran, men det hjælper ikke at fjerne det. Men hvis jeg fjerner doctype-tagget så ser det rigtigt ud.
Avatar billede roenving Novice
07. februar 2006 - 17:31 #6
-- men det gør IE _ikke_, hvis du tvinger den til at overholde W3cs box-model, og det gør man netop ved at at bruge ovenstående doctype som det allerførste i dokumentet !-)
Avatar billede little_kim86 Nybegynder
07. februar 2006 - 17:33 #7
Hva mente du lige med det roenving?
Avatar billede roenving Novice
07. februar 2006 - 17:34 #8
-- og hov, det skulle vist have været omvendt !o]

W3Cs box-model siger helt klart, at den totale bredde (eller højde for den sags skyld !-) af et element skal beregnes sådan:

margin-left + border-left-width + padding-left + element-width + padding-right + border-right-width + margin-right !-)

-- og det overholder Geckoerne _altid_ ...
Avatar billede little_kim86 Nybegynder
07. februar 2006 - 17:35 #9
Okay men kan du se hvorfor den rykker sig 1px i IE?
Avatar billede roenving Novice
07. februar 2006 - 17:38 #10
-- ikke uden et link til den fungerende kode ...
Avatar billede little_kim86 Nybegynder
07. februar 2006 - 17:42 #11
Her har du et link... Det er en side uden php tags osv. Ren html.

http://www.midtrep.dk/test/index.php?page=nyheder/test.php
Avatar billede roenving Novice
07. februar 2006 - 17:59 #12
Tjah, det største problem er sandsynligvis, at du skrive html 3.2 i stedet for at skrive rent html4 !-)

-- det er ganske vist helt tilladt at skrive med 3.2-syntaks i html4, selvom den er deprecated, men jeg ville ikke blive overrasket, hvis netop den slags syntaks kunne betyde en forskel, som jeg dog ikke lige kan finde ...

PS. En simpel test på om et dokument i en browser overholder css (i det omfang bowseren nu er i stand til det !-), er at skrive følende i adresselinjen og trykke [Enter]:

java script:alert(document.compatMode)

-- hvis den skriver BackCompat overholder siden-bowser-kombinationen ikke css-standarder (som f.eks. denne side i IE !-), skriver den CSS1Compat, er de fleste af de væsentligste css-rekommendationer understøttet !-)
Avatar billede little_kim86 Nybegynder
07. februar 2006 - 18:02 #13
Okay, Vil du ikke lige uddybe?
Avatar billede mortenbock Nybegynder
07. februar 2006 - 18:07 #14
Så vidt jeg kan se, så er det netop et problem med box modellen, da alle tabellerne lige "vokser" med et par px når den vises i firefox i forhold til IE.

Får du samme problem hvis du nu benytter style atributten til at sætte width og height med?
Avatar billede little_kim86 Nybegynder
07. februar 2006 - 18:09 #15
Ved jeg ikke hvordan vil du lige angive det?
Avatar billede mortenbock Nybegynder
07. februar 2006 - 18:18 #16
i stedet for:
<td height='15px' align='left' bgcolor='#A9C0A9' width='100%' style='border-bottom: 1px solid #000000'>

så skriver du:
<td style='height=15px; text-align: left; background: #A9C0A9; width=100%; border-bottom: 1px solid #000000'>
Avatar billede little_kim86 Nybegynder
07. februar 2006 - 18:38 #17
Hvis jeg skriver sådan så reagere den slet ikke på height... Andre muligheder?
Avatar billede johan.o Nybegynder
08. februar 2006 - 10:08 #18
Ang. 07/02-2006 18:18:09 :

Nej, det bør se således ud, istedet for :

<td height='15px' align='left' bgcolor='#A9C0A9' width='100%' style='border-bottom: 1px solid #000000'>

så skriver du :

<td style='height: 15px; text-align: left; background-color: #A9C0A9; width: 100%; border-bottom: 1px solid #000000;'>

Mvh. Johan
Avatar billede mortenbock Nybegynder
08. februar 2006 - 10:23 #19
doh! Det er utroligt man kan have så mange klatter i øjnene på den tid af døgnet. Godt Johan.o er vågen!
Avatar billede johan.o Nybegynder
08. februar 2006 - 14:19 #20
Ja, okay vågen og vågen, jeg var 'lige' kommet hjem fra nattevagt :)

Mvh. Johan
Avatar billede little_kim86 Nybegynder
08. februar 2006 - 15:17 #21
Det hjælper ikke noget, samme problem som gør... Hvis jeg ænder det til 14 passer det i IE men så passer det ikke i FF... :-P
Avatar billede johan.o Nybegynder
08. februar 2006 - 16:08 #22
He he selv :-P

DOCTYPE er ikke en simpel størrelse. Du kan sætte lige så meget korrekt doctype du vil, lige så snart IE møder et stykke kode der ikke er korrekt i forhold til standarderne omkring den DOCTYPE du anvender, ryger din DOCTYPE ud af vinduet og IE tonser videre i quirks-mode.

Altså er det vigtigt at hele din kode er korrekt i forhold til standarderne, ikke bare en enkelt linje.

Jeg ved ikke hvor meget du er med på DOCTYPE efterhånden men jeg har lavet et lille eksempel her : http://twobarrel.dk/exp/doctype_on.htm

Men lad høre om du er med på konceptet :-P

Mvh. Johan
Avatar billede little_kim86 Nybegynder
08. februar 2006 - 16:30 #23
Hvis jeg fjerne doctype så passer du to tabeller sammen? Hvordan kan det så være?
Avatar billede johan.o Nybegynder
08. februar 2006 - 18:34 #24
Se det skal jeg ikke umiddelbart kunne sige da jeg ikke har kigget yderligere på din kode.

Men hvis problemet er i forbindelse med din menu og den kasse nedenunder, så prøv at fjerne indholdet i menu kassen, og se om det hjælper.

Mvh. Johan
Avatar billede little_kim86 Nybegynder
08. februar 2006 - 18:53 #25
Kig på siden svært at forklare...
Avatar billede little_kim86 Nybegynder
13. februar 2006 - 17:47 #26
Slette ikke nogen der kan komme med en løsning... NU har jeg fjernet DOCTYPE og så ser det ordenligt ud...
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