Fejltolkning af CSS/XHTML i NS 6 og IE 5.x
Efter at have testet http://www.salon-roland.dk i IE 6, NS 6 og IE 5.x fandt jeg frem til at NS 6 og IE 5.x viste dem forkert i forhold til hvad jeg ønskede.Jeg har taget screenshots af fejlene og lagt en lille tekst ved: http://salon-roland.dk/problem.gif
Både XHTML\'en og CSS\'en følger w3c\'s standarder og er blevet valideret. (inkl. den del som indsættes via javascript)
Spørgsmålet går dels på hvad grunden er til disse fejl og dels på hvorledes de løses. (30p/30p)
Relevante dele af CSS\'en:
/*--------------------------------------------------------------------
Logoet i toppen
----------------------------------------------------------------------*/
img.toplogo1 {
display: block;
width: 176px;
}
img.toplogo2 {
display: block;
width: 160px;
float: left;
}
/*--------------------------------------------------------------------
Navigations-bjælken
----------------------------------------------------------------------*/
/* Den sorte bjælke som indeholder menu-punkterne */
#navi {
height: 10px;
background-color: black;
color: white;
padding: 1px 0px 1px 0px;
}
/* Menu-punkt */
#navi a {
font-size: .8em;
text-decoration: none;
margin: 0px;
padding: 0px 8px 0px 8px;
color: #EEEEEE;
display: inline;
height: 10px;
line-height: 10px;
background-color: black;
text-align: center;
float: left;
letter-spacing: .1em;
border-top: 0px;
border-bottom: 0px;
border-right: 1px solid white;
border-left: 0px;
}
/* Menu-punkt ved hover */
#navi a:hover {
background-color: #EEE9FA;
color: black;
text-decoration: none;
}
/*--------------------------------------------------------------------
Info-baren (placeret i vensre spalte på alle sider)
----------------------------------------------------------------------*/
/* Selve boksen som indeholder salonens standardinfo */
#infobar {
margin: 0px;
width: 138px;
background-color: #D8DDF5;
background-image: url(bg_lady.gif);
background-repeat: no-repeat;
background-position: bottom right;
height: 400px;
border: 1px solid black;
border-top: 0px;
float: left;
}
/* Bokse til de 3 forskellige overskrifter (Adresse, Åbningstider og Kontakt) */
#infobar div {
margin: 10px 0px 0px 0px;
padding: 1px 0px 1px 5px;
background-color: #E8EBF9;
background-image: url(\'black_arrow.gif\');
background-repeat: no-repeat;
background-position: center right;
border-top: 1px solid black;
border-bottom: 1px solid black;
cursor: default;
font-size: .8em;
}
/* Formatering af paragraferne som indeholder info-teksten */
#infobar p {
margin: 3px 0px 0px 10px;
font-size: .8em;
}
##########
Det pågældende html:
.....>
<div id=\"main\">
<div id=\"top\">
<a href=\"index.html\">
<img src=\"top_logo.gif\" class=\"toplogo1\" />
<img src=\"top_logo_.gif\" class=\"toplogo2\" />
</a>
<div id=\"navi\">
<a href=\"index.html\">Forside</a>
<a href=\"test.html\">Test på tekst</a>
<a href=\"personale.html\">Personale</a>
<a href=\"kontakt.html\">Kontakt</a>
</div>
</div>
<span style=\"width: 20px; float: left\"> </span>
<div id=\"infobar\">
<div>Adresse</div>
<p>
Frisør Jan Roland<br />
...osv. osv.
