Avatar billede lasseq Nybegynder
26. august 2007 - 13:53 Der er 25 kommentarer og
2 løsninger

Hjemmeside vises forkert under Vista / IE7

Hej
En hjemmesides baggrundsbilleder forrykker sig under Vista/IE 7, selvom den virker problemfrit under XP/IE 6.

www.agroplan.biz

Sitet er designet i Dreamweaver og benytter CSS.
Avatar billede jweber Nybegynder
26. august 2007 - 14:18 #1
Kan se du også har samme problem i firefox, prøv at validere din side hos W3C, http://validator.w3.org/.
Avatar billede lasseq Nybegynder
26. august 2007 - 22:31 #2
Kører jeg siden op mod validatoren får jeg ca. 15 fejl. Fejlene er dog små og nogle er ikke deciderede fejl, selvom W3 ikke anderkender dem - jeg synes ikke validatoren peger i nogen rigtig retning. Kan du komme med et konkret løsningsforslag - eller kan du læse noget ud af validatoren, som jeg ikke kan?
Avatar billede mclemens Nybegynder
27. august 2007 - 08:51 #3
Pas på med padding og baggrundsfixering samt størrelsesdefinering.

#indhold{
    background: url(images/agroplan_front_03.gif);
    width:715px;
    height:400px;
    line-height:150%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 45px;
    padding-right: 25px;
    font-size: 13px;
    list-style-position: outside;
    list-style-image: url(images/agroplan_front_03.gif);
}
Avatar billede olebole Juniormester
27. august 2007 - 15:29 #4
<ole>

Alle de 15 fejl, validatoren nævner er deciderede fejl - og visse af dem ret alvorlige. Ret dine fejl, så tager vi den derfra. Det giver ikke mening at råde om invalid kode  =)

/mvh
</bole>
Avatar billede jweber Nybegynder
27. august 2007 - 17:56 #5
Mange af dine attributter findes ikke i html og skal derfor defineres i et stylesheet, og så har du også en alvorlig fejl hvor du har glemt at lukke et div tag.
Avatar billede lasseq Nybegynder
27. august 2007 - 23:03 #6
Tak for jeres indput. Jeg for rettet på det i løbet af ugen. Rettede en attribut her i dag, og pludselig så sitet helt forkert ud (selv i IE6). Jeg gik tilbage igen. Prøver forfra senere på ugen. BRB
Avatar billede lasseq Nybegynder
30. august 2007 - 21:40 #7
Nu har jeg forsøgt mig frem via WWWs validator. Jeg får stadig 3 fejl, når jeg forsøger mig på eksempelvis www.agroplan.biz/agrtoplan.html - se http://validator.w3.org/check?uri=http%3A%2F%2Fwww.agroplan.biz%2Fagroplan.html&charset=%28detect+automatically%29&doctype=Inline&group=0
Avatar billede thesurfer Nybegynder
30. august 2007 - 22:10 #8
Der sneg sig et "t" ind i adressen på siden..

Adressen er: http://www.agroplan.biz/agroplan.html

Hvis du flytte MAP-koden ud af HEAD, hvor det absolut ikke hører hjemme, kommer du ned på 1 fejl.. :-)

Fejlbeskrivelsen er:
---
Line 73, Column 13: document type does not allow element "map" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
---

Hvis du så smider et af disse tags udenom MAP tag'et, bliver siden VALID:

"p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del"


Eksempel:

<div>
<map id="Map">
  <area shape="rect" coords="171,132,259,150" href="referencer.html" alt="" />
  <area shape="rect" coords="263,185,340,204" href="friluftsliv_raadgivning.html" alt="" />
  <area shape="rect" coords="158,185,224,204" href="friluftsliv_aktiviteter.html" alt="" />
  <area shape="rect" coords="26,186,136,204" href="friluftsliv.html" alt="" />
  <area shape="rect" coords="471,159,768,178" href="agroplan_ideudvikling.html" alt="" />
  <area shape="rect" coords="264,159,453,177" href="agroplan_idraet.html" alt="" />
  <area shape="rect" coords="159,159,228,177" href="agroplan_vand.html" alt="" />
  <area shape="rect" coords="26,159,127,177" href="agroplan.html" alt="" />
  <area shape="rect" coords="91,131,153,147" href="kontakt.html" alt="" />
  <area shape="rect" coords="26,131,77,148" href="profil.html" alt="" />
  <area shape="rect" coords="276,131,351,150" href="default.html" alt="" />
  <area shape="rect" coords="26,131,77,148" href="profil.html" alt="" />
</map>
</div>

:-)
Avatar billede thesurfer Nybegynder
30. august 2007 - 22:11 #9
Husk at putte koden (<div><map.......</map></div) efter <body>..
Avatar billede lasseq Nybegynder
30. august 2007 - 22:34 #10
Hej Sufer - TAK for din kommentar om MAP - var lidt i tvivl om, hvad der skulle gøres ved denne!
Alle sider (bortset fra forsiden, da denne skabelon ikke er tilrettet endnu), skulle nu gerne være valid. Det har dog ikke ændret betydeligt på udseendet?
Avatar billede thesurfer Nybegynder
30. august 2007 - 22:58 #11
Jeg fattede heller ikke hvad det var, at jeg skulle gøre for at det blev valid.. så jeg prøvede mig frem, med hvad jeg lige kunne se var logisk.. :-)
Og derefter hvad jeg mente var underligt.. nemlig at putte de tags uden om map.. og så virkede det.. :-)


Lige nu, er du et sted, hvor dit nuværende kode er valid, dvs., fejlfrit ifølge det regelsæt du har valgt at følge, hvilket er XHTML Strict.

Hvad betyder det så?

Du mener at udseendet er forkert. Men er det nu også det? - Både og.. :-)

Det er forkert, fordi det ikke er som du ville have det (/forventer at det skal være)
Der er rigtigt, fordi det er som der står i koden, at det skal være.

Der er altså 2 forskellige ting man skal tænke på.


Løsning må så være: at lave koden, så udseendet bliver som du ønsker det.


1) Jeg går ud fra, at den hvide boks skal være lige så bred som toppen/banneret/menu-området, og placeret lige nede under det område.

Korrekt?


2) Jeg går ud fra, at billedet skal være over i højre side af den hvide boks.

Hvor langt fra kanten skal billedet være?
Avatar billede mclemens Nybegynder
30. august 2007 - 23:09 #12
Har du prøvet at rette css'en til
det jeg skrev i 27/08-2007 08:51:56 ?
(Ret evt. baggrundsdefineringen, da
du har ændret den fra grøn til hvid
siden jeg skrev indlægget ... )
Avatar billede thesurfer Nybegynder
30. august 2007 - 23:16 #13
Jeg har lige testet mclemens' kode live i Opera, og det virker perfekt..
Kanten på den hvide boks, burde dog nok gå helt ud til kanten.. dvs, lige så bred som menu-området..

:-)
Avatar billede thesurfer Nybegynder
30. august 2007 - 23:47 #14
Jeg ville nok lave det sådan her, som stadig er validt XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da"><!-- InstanceBegin template="/Templates/ny.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Agroplan aps &amp; Rauff friluftsliv</title>
<!-- InstanceEndEditable -->
<meta name="robots" content="all" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css" media="all">
html, body {
    margin:0px;
    padding:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:#004AA3;
    color:#000;
}
#banner {
    margin-top:5%;
}
#indhold{
    width:756px;
    height:400px;
    line-height:150%;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 13px;
    list-style-position: outside;
    list-style-image: url(images/agroplan_front_03.gif);
    margin-left: 11px;
    padding-left: 0px;
    padding-right: 0px;
   
}
#indhold li {
    list-style-image: url(grafik/punkttegn.gif);
}
#footer {
    margin-bottom:5%;
}
#indhold h1 {
    font-size: 18px;
}
#indhold p {
    font-size: 13px;
}
#indhold h2 {
    font-size: 14px;
    white-space: normal;
}
.billede {
    border: 1px solid #000000;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 5px;
}
.billedtekst {
    font-size: 10px;
    font-style: italic;
}
</style>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
<body>
<div>
<map name="Map" id="Map">
  <area shape="rect" coords="171,132,259,150" href="referencer.html" alt="" />
  <area shape="rect" coords="263,185,340,204" href="friluftsliv_raadgivning.html" alt="" />
  <area shape="rect" coords="158,185,224,204" href="friluftsliv_aktiviteter.html" alt="" />
  <area shape="rect" coords="26,186,136,204" href="friluftsliv.html" alt="" />
  <area shape="rect" coords="471,159,768,178" href="agroplan_ideudvikling.html" alt="" />
  <area shape="rect" coords="264,159,453,177" href="agroplan_idraet.html" alt="" />
  <area shape="rect" coords="159,159,228,177" href="agroplan_vand.html" alt="" />
  <area shape="rect" coords="26,159,127,177" href="agroplan.html" alt="" />
  <area shape="rect" coords="91,131,153,147" href="kontakt.html" alt="" />
  <area shape="rect" coords="26,131,77,148" href="profil.html" alt="" />
  <area shape="rect" coords="276,131,351,150" href="default.html" alt="" />
  <area shape="rect" coords="26,131,77,148" href="profil.html" alt="" />
</map>
</div>
<table width="786" style="margin:0px auto; border:0px;" cellpadding="0" cellspacing="0">
  <tr>
    <td><div id="banner"><img src="images/agroplan_01.gif" alt="" width="786" height="219" style="border:0px;" usemap="#Map"  /></div></td>
  </tr>
  <tr>
    <td><div id="indhold">
        <div style="padding:5px;margin:0 auto;width:100%;height:100%;background-color:#FFFFFF;"><!-- InstanceBeginEditable name="EditRegion3" -->
      <h1>Om Agroplan aps</h1>
      <p><img style="float:right" src="billeder/agroplan_om.jpg" alt="" width="300" height="229" />Agroplan aps er et r&aring;dgivende firma,  der l&oslash;ser en r&aelig;kke opgaver med naturgenopretning og milj&oslash;planl&aelig;gning i det &aring;bne  land, samt med etablering af idr&aelig;tsanl&aelig;g og gr&oslash;nne omr&aring;der. Opgaver omkring  friluftsliv er et nyt arbejdsomr&aring;de, som nu er taget op i Agroplan aps under  navnet &rdquo;Rauff friluftsliv&rdquo;. Vi l&aelig;gger v&aelig;gt p&aring; at s&aelig;tte kundens ideer, &oslash;nsker og  behov i centrum og levere et forslag til projektforl&oslash;b med udgangspunkt i  seri&oslash;s og kvalitetsbevist r&aring;dgivning. Agroplan aps er medlem af Foreningen af  R&aring;dgivende Ingeni&oslash;rer, FRI og ViborgEgnens Erhvervsr&aring;d. Vi tilbyder god og  seri&oslash;s r&aring;dgivning til konkurrencedygtige priser. </p>
      <p>Agroplan aps har et veletableret  netv&aelig;rk p&aring; b&aring;de r&aring;dgiver- og entrepren&oslash;rsiden og mange gode samarbejdspartnere  indenfor det offentlige system. </p>
      <p>Vi indg&aring;r gerne i nye samarbejder med seri&oslash;se  partnere, n&aring;r det kan gavne og sikre en god l&oslash;sning af opgaverne for vore  kunder.</p>
      <p>P&aring; de f&oslash;lgende sider er i stikordsform givet en oversigt over de opgaver, som vi arbejder med.&nbsp; </p>
    <!-- InstanceEndEditable --></div>
      </div>
    </td>
  </tr>
  <tr>
    <td valign="bottom"><div id="footer"><img src="images/agroplan_05.gif" alt="" width="786" height="32" /></div></td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>


Man burde nok lave en eller anden form for baggrund... og måske reduceret padding-top på #indhold.. :-)
(måske også bunden)
Avatar billede thesurfer Nybegynder
30. august 2007 - 23:50 #15
Jeg har arbejdet med det live, via Opera's source-viewer, hvor man kan redigere og klikke på "Apply changes", for at opdatere siden.. :-)

Det skal nok passe, at det ligner noget der er løgn i andre browsere.. :-)
Avatar billede thesurfer Nybegynder
02. september 2007 - 14:32 #16
lasseq> Hvor langt er du nået? :-)
Avatar billede olebole Juniormester
02. september 2007 - 15:47 #17
Dokumentet serves som 'text/html', så hvorfor overhovedet bruge XHTML? Den browser, der kan parse koden som XHTML under de omstændigheder, findes alligevel ikke  :)
Avatar billede lasseq Nybegynder
02. september 2007 - 17:27 #18
Hej alle
Undskyld min lange svartid. Det er ikke rimeligt, når I er så flinke til at hjælpe mig! Mange for jeres hjælp, alle :)

Jeg har copy/pasted mcclemens forslag, tilrettet det til mine to skabelonfiler (en til forside, og en til alle andre). Resultatet er, at det virker!

P.s. Jeg har fjernet "height:400px", da det gav den fejl, at ved overflow kom der ikke nogen scrollbar. Fjernes height dog, kommer fejlen ikke.

P.p.s. Jeg har ikke fået valideret min forsideskabelon endnu, men det får jeg gjort senere.

Jeg vil genne have et svar fra thesurfer også, så jeg kan fordele lidt point.
OleBole får en verbal tak for hjælpen for hans indspark.
Avatar billede lasseq Nybegynder
02. september 2007 - 17:30 #19
Et bonusspørgsmål: I IE7 kører siden upåklageligt, men kører jeg den i Firefox er der nogle suspekte blå spacers mellem grafikelementerne. Nogen der har en kommentar til dette?
Avatar billede thesurfer Nybegynder
02. september 2007 - 17:47 #20
olebole> Hvor/hvordan kan du se, hvordan siden serveres fra serveren?



lasseq>

Man kan fjerne den blå linie, ved at sætte top marginen til -3px.. jeg ved ikke hvor holdbart det er i længden, og har kun testet med en live udgave af siden (i Opera), så jeg kan ikke se hvordan det ser ud med andre browsere..

Men indhold-koden er således:

#indhold {
    background-image: url(images/agroplan_02.gif);
    background-repeat: repeat-y;
    width:715px;
    line-height:150%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 45px;
    padding-right: 25px;
    font-size: 13px;
    list-style-position: outside;
    list-style-image: url(grafik/punkttegn.gif);
    margin-top:-3px;
}

- Svar
Avatar billede thesurfer Nybegynder
02. september 2007 - 17:59 #21
Hmm... Det med margin -3px passer ikke helt.. og så passer det bedre med 4 end med 3..

Sådan.. Det virker fint i Opera, FireFox og IE.. gider ikke til at skrive versionnr... :-)


#indhold {
    background-image: url(images/agroplan_02.gif);
    background-repeat: repeat-y;
    width:715px;
    line-height:150%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 45px;
    padding-right: 25px;
    font-size: 13px;
    list-style-position: outside;
    list-style-image: url(grafik/punkttegn.gif);
    margin-top:-4px;
    margin-bottom: -4px;
}
Avatar billede mclemens Nybegynder
02. september 2007 - 18:09 #22
"olebole> Hvor/hvordan kan du se, hvordan siden serveres fra serveren?"
TheSurfer >> FF, "højre klik", 'vis sideoplysninger', "se type".
... Eller f.eks. http://www.seoconsultants.com/tools/headers.asp
Avatar billede thesurfer Nybegynder
02. september 2007 - 18:15 #23
Ahh... Opera har en "Info"-ting i panelet.. klikker man på det, kan man se:

(med fed/bold): Eksperten | Programmering :: (D)HTML :: Hjemmeside vises forkert under Vista / IE7


URL of main page:
http://www.eksperten.dk/spm/793439

Encoding from server (used by Opera):
iso-8859-1 (windows-1252)

MIME type from server:
text/html

Size of main page:
55857 bytes

Number of inline elements:
31 (31)

Size of inline elements:
124006 bytes

Local cache file:
G:\OperaCache\cache4\opr09J8I.htm



Security

Summary:
- not secure -

Inline frames
IFrame: &#8212;
http://www.eksperten.dk/new_post.php?qid=793439&nr=2


Det havde jeg glemt alt om.. :-)


lasseq> Takker for points :-)
Avatar billede thesurfer Nybegynder
02. september 2007 - 18:17 #24
Rettelse (fik ikke det hele med):

(med fed/bold): Eksperten | Programmering :: (D)HTML :: Hjemmeside vises forkert under Vista / IE7


URL of main page:
http://www.eksperten.dk/spm/793439

Encoding from server (used by Opera):
iso-8859-1 (windows-1252)

MIME type from server:
text/html

Size of main page:
55857 bytes

Number of inline elements:
31 (31)

Size of inline elements:
124006 bytes

Local cache file:
G:\OperaCache\cache4\opr09J8I.htm



Security

Summary:
- not secure -

Inline frames
IFrame: -
http://www.eksperten.dk/new_post.php?qid=793439&nr=23&time=1188749714
Avatar billede mclemens Nybegynder
02. september 2007 - 18:22 #25
#indhold {
    background-image: url(images/agroplan_02.gif);
    background-repeat: repeat-y;
    width:715px;
    line-height:150%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 45px;
    padding-right: 25px;
    font-size: 13px;
    list-style-position: outside;
    list-style-image: url(grafik/punkttegn.gif);
    margin-top:-4px;
    margin-bottom: -4px;

^ - Slet evt. margin top og bund

}

... og så:


#footer {
    margin-bottom:5%;
}

^ - Slettes (medfører afstandsoprettelse til ovenstående)

...

Tilføj: p {margin:0}
( fjerner margin på p elementer)
...

#banner {
    margin-top:5%;
}

^ - Slettes (medfører nedskubning af andet indhold)

...

Ret top img:
<div id="banner"><img width="786" height="219" usemap="#Map" style="border: 0px none ;" alt="" src="images/agroplan_01.gif"/></div>

til:
<div id="banner"><img width="786" height="219" usemap="#Map" style="border: 0px none ;float:left;" alt="" src="images/agroplan_01.gif"/></div>

eller:
<div id="banner"><img width="786" height="219" usemap="#Map" style="border: 0px none ;display:block;" alt="" src="images/agroplan_01.gif"/></div>

(retter op på problem med at der til tider opstår mellemrum under billeder)



... Og tak for point :)
Avatar billede mclemens Nybegynder
02. september 2007 - 18:24 #26
M.h.t. de to margins jeg sletter kan du kaste
body {margin:5% 0;} ind i css'en istedet :)
Avatar billede mclemens Nybegynder
02. september 2007 - 18:32 #27
"Man kan fjerne den blå linie, ved at sætte top marginen
til -3px.. jeg ved ikke hvor holdbart det er i længden,"

... Jeg tror kun at der kommer problemer med det,
hvis skriftstørrelsen bliver øget i browseren ...
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