Hjelp med kompatibilitet med IE

dsbilling · 11. mars 2010

Hei!

Jeg driver med et web design for IKT avdelingen på Bjørnholt Skole i Oslo. Og jeg trenger litt hjelp med å få koden til å funke i IE også. Den trenger ikke fungere med IE7 eller lavere, alle maskinene på skolen er oppdatert til det nyesete. Men det hadde vært fint om det funket i IE7 også.

Sånn ser det ut i Firefox:

Sånn ser det ut i IE8:

Her er HTML koden:

<header>

		<!-- LOGO -->
 			<div id="logo"><img alt="" src="image/oslo_logo2.png"></div>
           <!-- LOGO END -->

           <!-- TITLE -->
 			<div id="title"><center><h1>IKT Avdeling</h1></center></div>
           <!-- TITLE END -->

   		<!-- NAVIGATION -->
   		<nav>
           	<div id="line-over"></div>
           	<ul>
               	<li><a href="kontakt/">Kontakt</a></li>
                   <li><a href="hjelp/">Hjelp</a></li>
                   <li><a href="info/">Info</a></li>
               	<li><a href="#">Hjem</a></li>

               </ul>
               <div id="line-under"></div>

           </nav>
           <!-- NAVIGATION END -->

	</header>

Her er CSS koden:

/* ----------------------------------------
-------- Header Styles --------------------
-----------------------------------------*/

header {
width:900px;
height:90px;
margin-left:auto;
margin-right:auto;
margin-bottom:25px;
}

header #logo {
width: 200px;
height: 90px;
float:left;
}

header #title {
height:90px;
width:700px;
float:right;
background:url(../image/skyline.png) top center no-repeat;
}

header #title h1 {
color:#333;
}


/* ----------------------------------------
-------- Navigation Styles ----------------
-----------------------------------------*/

nav {
margin:0 auto;
font-size:1em;
width:900px;
height:50px;
padding-left:auto;
padding-right:auto;
}

nav #line-over {
height:1px;
width:900px;
/* ALT: background:url(../image/nav-line.png) no-repeat; */
margin-top:120px;
padding:0px;
}

nav #line-under {
height:1px;
width:900px;
background:/*#000;*/url(../image/nav-line.png) no-repeat;
margin-top:30px;
padding:0px;
}

nav ul {
width:325px;
padding:0px;
margin-left:260px;
margin-right:260px;
margin-top:5px;
float:left;
}

nav ul li {
list-style:none;
float:right;
margin-right:30px;
}

nav a {
color:#333 !important;
text-decoration:none;
position:relative;
}

nav a:hover {
text-decoration:none;
border-bottom:1px solid #666;
color: #666;
}

nav a.selected {
border-bottom:1px solid #666;
}

Jeg har skrevet koden i HTML 5 og CSS 3, BTW.

Noen som har noen ideer på hvordan dette kan fikses? Må jeg skrive en egen kode for IE?

4588pkdkrikue5c · 11. mars 2010

Trur ikkje HTML5 fungerer særleg bra i IE enno. Hadde berre ordinær HTML eg, ser ikkje vitsen i å nytte HTML5 ennå. Same gjeld for CSS3. Vart meir arbeid å finskrive alt for IE, enn å berre nytte ein kode som fungerer i alle.

dsbilling · 11. mars 2010

Trur ikkje HTML5 fungerer særleg bra i IE enno. Hadde berre ordinær HTML eg, ser ikkje vitsen i å nytte HTML5 ennå. Same gjeld for CSS3. Vart meir arbeid å finskrive alt for IE, enn å berre nytte ein kode som fungerer i alle.

Det er veldig liten forskjell mellom HTML4 og HTML5. De har fjernet et par koder og lagt til 25 nye koder. Ikke noe spessielt som gjør at det ikke skulle funke.

Det er bare i IE det ikke funker, fordi IE leser koden på en annen måte. :/

Endret 11. mars 2010 av dsbilling

4588pkdkrikue5c · 11. mars 2010

Eg har ikkje moglegheit til å sjå over koden din no, men eg bruker alltid å få alt til å fungere i både IE og alle dei andre nettleserane. Det finnes ein heil del css-hacks for IE (kodar IE ikkje forstår) for posisjonering (som ikkje alltid stemmer i IE), men ellers bruker eg å lage EIN versjon for alle nettlesare.

dsbilling · 11. mars 2010

Eg har ikkje moglegheit til å sjå over koden din no, men eg bruker alltid å få alt til å fungere i både IE og alle dei andre nettleserane. Det finnes ein heil del css-hacks for IE (kodar IE ikkje forstår) for posisjonering (som ikkje alltid stemmer i IE), men ellers bruker eg å lage EIN versjon for alle nettlesare.

Hvilken kode bruker du for å meny? Bruker du <ul> og <li>?

----

Men hvorfor blir bildet i tittelen brote i det hele tatt?

Bjonski · 12. mars 2010

Prøv å legg til denne koden helt på toppen, før <html>

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Eller HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Alle nettlesere skal lese siden nogenlunde likt om du definerer doctype.

dsbilling · 12. mars 2010

Prøv å legg til denne koden helt på toppen, før <html>

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Eller HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Alle nettlesere skal lese siden nogenlunde likt om du definerer doctype.

Jeg vet det. Men hvis du hadde lest den første post'n min så står det at jeg har skrevet det i HTML 5 og i CSS3...

Bjonski · 12. mars 2010

Anbefaler deg heller å skrive siden i XHTML eller HTML 4 om siden skal se lik ut i alle nettlesere.

HTML 5 er fortsatt i test-fasen og er ikke støttet av IE såvidt jeg vet.

CSS3 er vel heller ikke støttet av alle nettlesere.

Endret 12. mars 2010 av Bjohansen

dsbilling · 12. mars 2010

Anbefaler deg heller å skrive siden i XHTML eller HTML 4 om siden skal se lik ut i alle nettlesere.

HTML 5 er fortsatt i test-fasen og er ikke støttet av IE såvidt jeg vet.

CSS3 er vel heller ikke støttet av alle nettlesere.

Hvis det ikke kan fikses så må jeg kode siden på nytt... :S

Sokkalf™ · 12. mars 2010

Det er sånn det er når man må ta hensyn til IE, dessverre.. du kan være glad du slipper å få dette til å funke i IE6.

MikkelRev · 12. mars 2010

Link?

Kaptein Snus · 14. mars 2010

Er jo ikke så veldig mye som skal til for å gjøre om siden til xhtml da

masb · 14. mars 2010

her var det mye css3 du

Jeg vil tro det er html5-tagene som gjør det. Som du ser er child-elementene til disse tagene uten CSS-stil

Endret 14. mars 2010 av masb

trygveaa · 14. mars 2010

Tipper på samme som masb, prøv å bytte ut header- og nav-taggene med div. center-taggen er forresten ikke støttet i HTML 5, og deprecated i HTML 4, så du bør bytte ut denne med css.

Du burde foreløpig bruke HTML 4.1 eller XHTML 1.1 p.g.a. lite støtte for HTML 5. Særlig på en så enkel side som dette er det ikke noe vits å bruke HTML 5 enda. På den koden du har lagt ut her er vel de to taggene jeg nevnte det eneste du trenger å bytte ut.

dsbilling · 15. mars 2010

Ok, da får jeg se om jeg får fikset det i dag.

Takk for alle svar!

EDIT

Da har jeg testet og dette har skjedd:

I Firefox:

I IE8:

Hvor ble av linja i FF?

EDIT 2

Og nå sjekket jeg på en Mac, og da så den sånn ut:

Firefox på Mac:

Endret 15. mars 2010 av dsbilling

Kaptein Snus · 15. mars 2010

Slenger du ut den nye CSSn og HTMLn?

dsbilling · 15. mars 2010

Slenger du ut den nye CSSn og HTMLn?

Ja, det er jo kanskje lurt

EDIT:

Her er kodene:

HTML:

<!-- HEADER -->
   	<div id="header">

		<!-- LOGO -->
 			<div id="logo"><img src="../image/oslo_logo2.png" alt=""></div>
           <!-- LOGO END -->

           <!-- TITLE -->
 			<div id="title"><center><h1>IKT Avdeling</h1></center></div>
           <!-- TITLE END -->

   		<!-- NAVIGATION -->
   		<div id="nav">
           	<div id="line-over"></div>
           	<ul>
               	<li><a href="../TEST---/kontakt">Kontakt</a></li>
                   <li><a href="../TEST---/hjelp">Hjelp</a></li>
                   <li><a href="../TEST---/info">Info</a></li>
               	<li><a href="#">Hjem</a></li>

               </ul>
               <div id="line-under"></div>

           </div>
           <!-- NAVIGATION END -->

	</div>
       <!-- HEADER END -->

CSS:

/* ----------------------------------------
-------- Header Styles --------------------
-----------------------------------------*/

#header {
width:900px;
height:150px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}

#header #logo {
width: 200px;
height: 90px;
float:left;
}

#header #title {
height:90px;
width:700px;
float:right;
background:url(../image/skyline.png) top center no-repeat;
}

#header #title h1 {
color:#333;
margin-top:25px;
}


/* ----------------------------------------
-------- Navigation Styles ----------------
-----------------------------------------*/

#nav {
margin:0 auto;
font-size:1em;
width:900px;
height:50px;
padding-left:auto;
padding-right:auto;
}

/*#nav #line-over {
height:1px;
width:900px;
/* ALT: background:url(../image/nav-line.png) no-repeat;
margin-top:5px;
padding:0px;
}*/

#nav #line-under {
height:1px;
width:900px;
background:/*#000;*/url(../image/nav-line.png) no-repeat;
margin-top:0px;
padding:0px;
}

#nav ul {
width:325px;
padding:0px;
margin-left:260px;
margin-right:260px;
margin-top:20px;
float:left;
margin-bottom:5px;
}

#nav ul li {
list-style:none;
float:right;
margin-right:30px;
}

#nav a {
color:#333 !important;
text-decoration:none;
position:relative;
}

#nav a:hover {
text-decoration:none;
border-bottom:1px solid #666;
color: #666;
}

#nav a.selected {
border-bottom:1px solid #666;
}

Endret 15. mars 2010 av dsbilling

Kaptein Snus · 15. mars 2010

Har du link til sia?

dsbilling · 15. mars 2010

Har du link til sia?

Gammel kode:

http://webs.skolen.oslo.no/bjh/ikt/

Nye koden:

http://webs.skolen.oslo.no/bjh/ikt/test/

masb · 15. mars 2010

den er ikke valid verken som html 5 eller html 4.

Hjelp med kompatibilitet med IE

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer