Avatar billede goggen Nybegynder
11. juli 2006 - 20:09 Der er 23 kommentarer og
1 løsning

Siden vises forskelligt i IE og FF - why?

Er der nogen der kan fortælle mig hvad der er galt i min css koden på hjemmesiden  www.espset.com? De vises nemlig forskelligt i Internet Explorer og FireFox.
Alle boxer er bygget op vha css.
Avatar billede miqe Nybegynder
11. juli 2006 - 20:51 #1
Der er uhyre mange fejl i Internet Explorer.
Du har højst sandsynligt designet siden efter Internet Explorer og dermed også efter de bugs IE har.
Her er en side der beskriver alle de kendte fejl og hvordan man retter op på dem.
http://positioniseverything.net/
Avatar billede goggen Nybegynder
11. juli 2006 - 21:00 #2
Jeps. Jeg har designet efter IE. Er der ingen der kan se nogle umiddelbare fejl? Det er jo en svært lang artikkel du har fundet frem til mig mige :)
Avatar billede miqe Nybegynder
11. juli 2006 - 21:12 #3
Hæhæ! Er ved at kigge det igennem, men ville bare give dig et rigtigt godt link med på vejen, der næsten er uundværligt, når man arbejder med css.
Du skal også huske på at de forskellige browsere hver især har nogle css metoder de ikke understøtter. Dette kan du læse mere om på http://www.w3schools.com/
Jeg håber jeg har et svar til dig om lidt.
Avatar billede goggen Nybegynder
11. juli 2006 - 21:19 #4
:) Jeg vil også læse http://positioniseverything.net/ igennem, men er lidt bange for at det kan tage lidt tid at komme frem til de fejl der er.
Avatar billede miqe Nybegynder
11. juli 2006 - 21:24 #5
Det kan meget vel være det der skal til.
Det er rart at se at du har designet efter w3 standarderne.
Så der skulle ikke være så langt igen.
Det er ofte svært at finde fejlen, når hjemmesiden er lavet med IE, som pejlemærke.
Avatar billede goggen Nybegynder
11. juli 2006 - 21:31 #6
Jeps, i fremtiden vil jeg nok kigge lidt mere efter i FF også inden siden bliver lagt ud offentlig...
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:32 #7
Prøv de 3 css rettelser her:





#outer {
text-align:left;
border:1px solid #000000;
width:800px;
margin:auto;
background: #dcdcdc;
}






#hdr {
   
    background:#eeeeee;
    color: #333333;
    width: 800px;
}






#ftr {
    border-left:0px solid black; border-right:0px solid black; border-top:1px solid black; border-bottom:0px solid

black;
    background:#c0c0c0;
    color: #333333;
    margin:0;
    width: 800px;
clear:both;
}
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:33 #8
Hov, den ene linje blev ombrudt... den skal lige samles :o)
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:36 #9
Pas på med height defineringer på elementer der skal kunne udvide sig ... du havde defineret en højde på hdr som FF overholder ... det forstår IE dog ikke at den skal - den læser altid height som min-height ...

I #ftr skulle floatede divs cleares med en clear css attribut... og height skulle også fjernes.

- og outer har lige fået en baggrundsfarve klistret på så baggrunden følger med ned af på siden ...
Avatar billede miqe Nybegynder
11. juli 2006 - 21:37 #10
2 hurtige noter:
Det er en god idé at indrykke med hensyn til scope, så koden bliver lettere at debugge.
f.eks.
<div id="cont">
<h3 align="left">Seneste endringer:</h3>
<div class="news">
  <img src="images/newsdot.gif" width="4" height="5" border="0" alt="" style="margin-bottom:1px;margin-left:7px;margin-right:1px;" />
  <span class="smallfattext">25.april 2006</span><br/>
  <div class="smallthingrey" style="margin-top:3px;margin-left:18px;margin-right:4px;margin-bottom:5px;"> Ændret adresse til Sønderkær 21.
  </div>
</div>
</div>

Hvad angår:
<img src="images/newsdot.gif" ...style="..."/>
bør du nok lave en class så du kan få in-line style væk fra html dokumentet:
<img class="newsdot" src="images/newsdot.gif" .../>

Prøv at kigge lidt nærmere på denne sektion i IE:
http://positioniseverything.net/explorer/escape-floats.html
Kan være det er hér at liget er begravet.
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:39 #11
Det var der liget var begravet - ligesom
med css rettelserne i 11/07-2006 21:32:32 :o)
Avatar billede goggen Nybegynder
11. juli 2006 - 21:40 #12
Ok, jeg har rettet de 3 steder mclemens kom med. Det ser bedre ud nu, men vi er ikke i mål endnu :)
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:40 #13
Næh, ikke helt det var clear:both; der manglede som i 11/07-2006 21:32:32...
- Havde ikke lige klikket på linket (læste kun det escape floats ) :o)
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:42 #14
#ftr {
/*    border-left:0px solid black; border-right:0px solid black; border-top:1px solid black; border-bottom:0px solid black; height:25px;  */
    border-left:0px solid black; border-right:0px solid black; border-top:1px solid black; border-bottom:0px solid black; height:25px; <------ Du har ikke fjernet height ligesom jeg gjorde i min post ;o)
    background:#c0c0c0;
    color: #333333;
    margin:0;
    width: 800px <--------! Du mangler ; her ligesom i min post ;o)
    clear:both;
}
Avatar billede goggen Nybegynder
11. juli 2006 - 21:45 #15
Kanon mclemens!  Nu mangler der bare at få copyright på ret plads :)
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:46 #16
Du mangler p.t. height ligesom nævnt i ovenstående...
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:46 #17
Edit: Du mangler p.t. at fjerne height ligesom nævnt i ovenstående...
Avatar billede goggen Nybegynder
11. juli 2006 - 21:48 #18
:) Skulle ønske jeg havde evnen til at læse det hele rigtig fra starten :)

Tusind tak mclemens! Smid et svar!
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:49 #19
Helt ok, jeg overser også selv ting ;)
Velbekom, her er lige et svar :o)
Avatar billede mclemens Nybegynder
11. juli 2006 - 21:51 #20
- Og tak for point :o)
Avatar billede goggen Nybegynder
11. juli 2006 - 21:53 #21
Det var fortjente points :) Du har sparet mig for sikkert flere timers arbejde  :)
Avatar billede mclemens Nybegynder
11. juli 2006 - 22:15 #22
Lige en lille ting mere - prøv at fjerne den kommentar du
har i toppen af din side - den gør at IE går i quirks så
IE ikke overholder visse css ting ordentligt...

Prøv f.eks. at kaste denne linje ind i
adresselinjen og enter på dit site...

java script:alert(document.compatMode);

... ved back compatibility mode overholdes css ikke ordentligt ...
Din doctype skal være det første der er i markup'en der
må ikke være nogen kommentar før den...

(hvis man designer med IE i quirks kan css koden hurtigt blive
meget svær at rette så andre browsere kan vise siden ... )

... Ved dog ikke hvordan siden ser ud i
IE når IE overholder alt css igen ...
Avatar billede mclemens Nybegynder
11. juli 2006 - 22:16 #23
<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Rettes til (kommentar fjernet) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Avatar billede goggen Nybegynder
11. juli 2006 - 22:32 #24
Ok. Tak skal du have. Jeg benytter DW, så jeg tror kommentaren kommer der fra? Jeg har i hvert fald ikke skrevet den kommentar :)
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