Avatar billede m-rachlitz Nybegynder
22. april 2008 - 22:57 Der er 16 kommentarer og
2 løsninger

IE fejl læser

Indledning:
Jeg er ifærd med at opbygge en lille side for mine klassekammerater og jeg hvor vi skal dele notater og tips omkring skolen.

Fejl:
http://www.team-magnitude.dk/error.gif

CSS:

#header {
padding: 0px 0px 0px 0px;
width: 784px;
height: 62px;
margin: 0;
z-index: 2;
float: left;
background-color: RED;
border: 0;
}

background-color: RED; er selvfølgelig kun skrevet for at illustrerer fejlen.

Hvad skyldes forskellen på IE og FF?

MVH Michael
Avatar billede mash Mester
23. april 2008 - 03:31 #1
lav et browser tjek og kompensere der efter, træls men såden er det.
Avatar billede fennec Nybegynder
23. april 2008 - 08:20 #2
Du kunne evt også bare ændre din struktur, så den virker i alle browsers. I visse tilfælde må man så gå på kompromis med layouts, men jeg ser intet i dit layout, som ikke burde kunne laves simpelt, så det altid virker.

Hvis vi kan få et link til side, kan vi se den fulde kode og rettet den til.
Avatar billede mclemens Nybegynder
23. april 2008 - 10:52 #3
Måske skal du nulstille margin på
p og/eller h elementer samt evt.
padding/margin på ul/li elementer.
Avatar billede mclemens Nybegynder
23. april 2008 - 11:01 #4
(det er også muligt at det er et mellemrum der får IE til at rendere en ekstra linjes
mellemrum ... hvis det er tilfældet kan du slette mellemrummet eller prøve at kaste en
overflow:hidden; på din #header) - ellers så vil et link som fennec nævner være rart.
Avatar billede fennec Nybegynder
23. april 2008 - 11:47 #5
Lige for at uddype mclemens kommentar, så har IE et renderings problem. Der må ikke være linjeskift før afslutningstags (som indeholder data), da det skaber et ekstra mellemrum. Data kan være billeder eller tekst.

eks.
<tr><td>Data</td></tr> <-- Ok

<tr>
  <td>Data</td> <-- OK
<tr> <-- OK da <tr> elementet ikke indholder data

<tr>
  <td>
      Data
  </td> <-- FEJL da <td> indeholder data. Der må ikke være linjeskift efter "Data"
<tr>

<tr>
  <td>
      text</td> <-- OK
<tr>

Hvis man har noget data og afslutningstage på næste linje vil IE skabe et ekstra mellemrum på et par milimeter. Jeg har lavet et eks her:
http://henriknygaard.dk/experten/IERenderError.html

Prøv at se den i IE og FF. Den nedderste Tabel og Div rendere forkert i IE.
Avatar billede m-rachlitz Nybegynder
23. april 2008 - 16:05 #6
jeg tilføjede overflow:hidden; og det virker nu perfekt.

Der er en del andre problemer med IE.

første problem er min content div der bliver skubbet ned under menuen - hvilket hvis du checker den fulde kode ikke giver mening i mine øjne.
Hvis du ikke forstår hvad jeg mener så bare sig til, så uploader jeg nogle billeder der illustrerer det.

selve siden:
http://www.just-simple.dk/blog/

Tak for de mange svar forresten, hvordan vil i dele points? :-)

MVH Michael
Avatar billede m-rachlitz Nybegynder
23. april 2008 - 16:08 #7
#fennec

mht. til designet så er det faktisk lavet udelukkende så simpelt for at det burde kunne vises korrekt i alle browsere. og jeg synes virkelig koden er ultra light og simpel - så simpel at selv ie bør forstå :)
Avatar billede mclemens Nybegynder
23. april 2008 - 16:18 #8
Doctype skal stå først ellers overholder IE ikke css (ordentligt)
(og du får grå hår med en IE i quirks mode ...).

<html>
    <head>
        <title>HH 2010 Lektie blog</title>
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>HH 2010 Lektie blog</title>
       


Deler gerne halv om halv med fennec.

P.s.: Du bruger doctype til html og skriver xhtml enkelte steder ...
Avatar billede mclemens Nybegynder
23. april 2008 - 16:22 #9
Foresten så med doctypen på burde det ikke være nødvendigt med overflow:hidden;
Avatar billede m-rachlitz Nybegynder
23. april 2008 - 16:28 #10
klarede egentlig fejlen igen med overflow: hidden; :-)

smid svar og hvordan i vil fordele points =)
Avatar billede m-rachlitz Nybegynder
23. april 2008 - 16:29 #11
af en underlig grund så ændre det utrolig meget med overflow dog mclemens :0 - bør jeg fjerne doctype ?
Avatar billede fennec Nybegynder
23. april 2008 - 16:31 #12
Du må aldrig fjerne doctype. Den SKAL være der.

Desuden så er din kode lang fra valid:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.just-simple.dk%2Fblog%2F&charset=iso-8859-1&doctype=HTML+4.01+Transitional&group=0

Så længe koden ikke er valid, kan du heller ikke forvente at browserne kan rendere rigtigt.
Avatar billede fennec Nybegynder
23. april 2008 - 16:37 #13
ps. Jeg var nød til at overstyre Encoding og doctype på valideringen. På et valid dokument ville det ikke være nødvendigt.

så du mangler også encoding. F.eks denne (eller en UTF8)
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Avatar billede olebole Juniormester
23. april 2008 - 16:37 #14
<ole>

m-rachlitz >> Nej, endelig ikke - uden DTD disabler du CSS i IE ... og så er det iøvrigt ikke længere et HTML-dokument! Du _skal_ skrive en fuld DTD som det allerførste i dokumentet  ;o)

Denne syntaks er yderst uhensigtsmæssig:
    <div id="hvorfor" onclick="location.href='?page=hvorfor'" style="cursor:pointer;">
            </div>

- den vil altid give afvigende rendering i IE. Det samme gælder:

                <div id="login_user">
                    <input type="text" name="username" class="username">
                </div>

- og denne:
    <a href="#">
                            Nyhedsarkiv                        </a>
                    </li>

Hvad laver iøvrigt al det white-space? Det giver ikke mening - men derimod renderings fejl  ;o)

De fejl har du bunker af - og de bør rettes, hvis du forventer, siden skal se ens ud i forskellige browsere  ;o)

/mvh
</bole>
Avatar billede olebole Juniormester
23. april 2008 - 16:39 #15
fennec >> Husk HTTP-headers har case-sensitive navne. Det hedder 'Content-Type'  ;o)

Derudover er iso-8859-1 defacto deprecated, så utf-8 er helt klart at foretrække  =)
Avatar billede m-rachlitz Nybegynder
23. april 2008 - 16:58 #16
Validerede med http://jigsaw.w3.org/css-validator/

W3C CSS Validator results for http://www.just-simple.dk/blog (CSS level 2.1)

Congratulations! No Error Found.

This document validates as CSS level 2.1 !

-- men jeg vil helt sikkert tage kritikken til efterretning og prøve at validere den med den side du brugte fennec. :-)

mht. alt et white-space du snakker om, så tror jeg det skyldes min editor. Bruger Zend Studio og inde i mine filer har jeg tilsyneladende utrolig meget orden, men checker man source er det buttfucked. kender i eventuelt til zend og ved hvordan jeg skal sætte det op så det white-space vises i min editor også, så jeg derved også kan fjerne det?

MVH Michael
Avatar billede m-rachlitz Nybegynder
23. april 2008 - 17:00 #17
#Olebole

mht. til mine uhensigtsmæssige syntakser. hvordan bør jeg skrive fx:

<div id="hvorfor" onclick="location.href='?page=hvorfor'" style="cursor:pointer;">
</div>

<div id="login_user">
  <input type="text" name="username" class="username">
</div>

I cssen og i php filen
Avatar billede roenving Novice
28. april 2008 - 15:25 #18
-- slut-tags skal op i røven på indholdet, som fennec også skriver i 23/04-2008 11:47:14 !-)
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