[Løst]IE gir oss trøbbel med xhtml og css stilark

Freke88 · 26. mars 2009

Vi har satt samens en side som fungerer utmerket på alle nettlesere bortsett fra IE

siden ligger lokalt så kan ikke linke til den men her er et skjermbilde: se vedlagt fil

XHTML:

<!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="en" lang="en">

<head>

<!--
Nidaros Domers Webside
Laget av Freke88, Lerto og Lanol Heimdal IKT 08-09
-->
<title>Nidaros Dragons</title>	
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Nidaros Dragons amerikansk fotball lag" />
<link href="stilark.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="outer"></div>
<div id="upbg"></div>

<div id="inner">
<div id="header">
	<h1><span>Nidaros</span> Dragons</h1>
</div>

<div id="splash"></div>
<div id="menu">
	<ul>
		<li class="first"><a href="index.php?p=news">Home</a></li>
		<li><a href="/forum/">Forum</a></li>
		<li><a href="index.php?p=curious">Informasjon for nysgjerrige</a></li>
		<li><a href="index.php?p=interested">Vil du spille fotball?</a></li>
		<li><a href="index.php?p=profiles">Profiler</a></li>
		<li><a href="index.php?p=contact">Kontaktpersoner</a></li>
	</ul>


<div id="primarycontent">

</div>
</div>
<!-- Andreinnhold start -->

<div id="secondarycontent">
	<h3>myDragons Login</h3>
	<div class="content">

	<form id="login" method="post" action="login.php">
	<p>Brukernavn:
	<input type="text" name="bruker" id="bruker" />
	</p>
	<p>Passord:
	<input type="password" name="pass" id="pass" />
	</p>

	<pre><a href="#">Logg Inn</a></pre>
	<pre><a href="#">Registrer meg</a></pre>
	<pre><a href="#">Glemt Passordet?</a></pre>
	</form>
	</div>

		<h3>Lenker</h3>
		<div class="content">
			<ul class="linklist">
				<li class="first"><a href="#">Lenke #1</a></li>
				<li><a href="#">Lenke #2</a></li>
				<li><a href="#">Lenke #3</a></li>
				<li><a href="#">Lenke #4</a></li>
				<li><a href="#">Lenke #5</a></li>
				<li><a href="#">Lenke #6</a></li>
				<li><a href="#">Lenke #7</a></li>
				<li><a href="#">Lenke #8</a></li>
			</ul>
		</div>
</div>
</div>	
<!-- Andreinnhold slutt -->

<div id="footer">		

© Laget av <a href="#">Freke88, Lerto og Lanol Heimdal IKT 08-09</a>

</div>

</body>
</html>

Stilark:

/*
Nidaros Dragons Webside
Laget av Freke88, Lerto og Lanol Heimdal IKT 08-09
*/

* {
padding : 0;
margin : 0;
}
body {
background : #f9f9f7 url('bilder/a1.gif') repeat-x;
font-size : 11px;
font-family : "trebuchet ms", helvetica, sans-serif;
color : #8c8c73;
line-height : 18px;
}
a {
color : #ff7800;
text-decoration : underline;
}
a:hover {
text-decoration : none;
}
sup {
font-size : 0.5em;
}
p {
margin-bottom : 14px;
text-align : justify;
}
img.picA {
position : relative;
top : -2px;
background : url('bilder/a47.gif') no-repeat;
width : 76px;
height : 74px;
padding : 8px;
}
img.picB {
position : relative;
top : -2px;
background : url('bilder/a26.gif') no-repeat;
width : 146px;
height : 75px;
padding : 7px;
}
img.floatleft {
float : left;
margin : 0 14px 3px 0;
}
ul.linklist {
list-style : none;
}
ul.linklist li {
border-top : 1px solid #eeeeee;
padding-top : 5px;
margin : 5px 0 0 0;
}
ul.linklist li.first {
border-top : 0;
margin-top : 0;
padding-top : 0;
}
#upbg {
position : absolute;
top : 0;
left : 0;
background : #fff url('bilder/toppbg.gif') no-repeat;
width : 747px;
height : 264px;
z-index : 1;
}
#outer {
position : relative;
width : 747px;
margin : 0 auto;
background : #fff url('bilder/yttre.gif') repeat-y;
}
#inner {
position : relative;
padding : 13px 30px 13px 30px;
z-index : 2;
}
#header {
position : absolute;
background : #000 url('bilder/header.gif') repeat-x;
width : 202px;
height : 92px;
color : #fff;
padding-left : 20px;
}
#header span {
font-weight : normal;
}
#header h1 {
position : absolute;
font-size : 23px;
letter-spacing : -1px;
top : 30px;
line-height : normal;
}
#header h2 {
position : absolute;
font-size : 10px;
font-weight : normal;
color : #fce2ca;
top : 51px;
}
#header sup {
color : #fce2ca;
}
#splash {
position : absolute;
right : 30px;
background : #eaeae2 url('bilder/logo.jpg') no-repeat;
width : 458px;
height : 92px;
}
#menu {
position : relative;
background : #46461f url('bilder/meny.gif') repeat-x;
height : 67px;
padding : 0 20px 0 5px;
margin : 98px 0 20px 0;
}
#menu ul li {
display : inline;
line-height : 52px;
padding-left : 3px;
}
#menu ul li.first {
border-left : 0;
}
#menu ul li a {
background-color : transparent;
background-repeat : repeat-x;
padding : 8px 12px 8px 12px;
font-size : 12px;
color : #fff;
font-weight : bold;
}
#menu ul li a:hover {
background : #fff url('bilder/meny_hover.gif') repeat-x top;
color : #4a4a24;
text-decoration : none;
}
#date {
position : absolute;
top : 0;
line-height : 52px;
color : #bdbda2;
right : 30px;
font-weight : bold;
font-size : 12px;
letter-spacing : -1px;
}
#secondarycontent {
position : relative;
width : 180px;
float : right;
}
#secondarycontent h3 {
position : relative;
top : 4px;
font-size : 16px;
line-height : 25px;
color : #656551;
letter-spacing : -1px;
background : url('bilder/innhold.gif') repeat-x bottom;
padding : 0 0 10px 10px;
margin-bottom : 20px;
}
#secondarycontent .content {
padding : 0 10px 0 10px;
margin-bottom : 20px;
}
#primarycontent {
position : relative;
top : 35px;
width : 480px;
float : left;
}
#primarycontent h3 {
position : relative;
top : 4px;
font-size : 18px;
line-height : 25px;
letter-spacing: -1px;
color : #656551;
background : url('bilder/innhold.gif') repeat-x bottom;
padding : 0 0 10px 15px;
margin-bottom : 20px;
}
#primarycontent .content {
padding : 0 15px 0 15px;
margin-bottom : 20px;
}
#primarycontent .post {
margin-bottom : 30px;
}
#primarycontent .post .header {
position : relative;
}
#primarycontent .post .date {
position : absolute;
right : 15px;
top : 0;
line-height : 35px;
color : #afafa4;
font-weight : bold;
}
#primarycontent .post .content {
margin-bottom : 0;
}
#primarycontent .post .footer {
position : relative;
top : -10px;
background : url('bilder/innholdfooter.gif') repeat-x;
height : 64px;
}
#primarycontent .post .footer ul {
list-style : none;
position : absolute;
right : 15px;
bottom : 15px;
}
#primarycontent .post .footer ul li {
display : inline;
line-height : 14px;
padding-left : 17px;
margin-left : 25px;
background-repeat : no-repeat;
background-position : 0 2px;
}
#footer {
position : relative;
clear : both;
height : 66px;
text-align : center;
line-height : 66px;
background-image : url('bilder/footer.gif');
color : #a8a88d;
}
#footer a {
color : #8c8c73;
}
#registerinput {
position : absolute;
left : 150px;
}
#addnewstextarea {
width : 350px;
height : 300px;
}

Profil CSS:

/*
Nidaros Dragons Webside
Laget av Freke88, Lerto og Lanol Heimdal IKT 08-09
*/

.profiltop {
font-family : "trebuchet ms", helvetica, sans-serif;
font-size : 12px;
color : #fff;
font-weight : bold;
top : 10px;
}
.profil {
font-family : "trebuchet ms", helvetica, sans-serif;
font-size : 12px;
color : #000;
}
.profilbg {
background-color : #eee;
background : #f9f9f7 url('bilder/a1.gif') repeat-x;
border : 1px solid #000;
position : relative;
}
.profiltop {
position : relative;
background : #46461f url('bilder/meny.gif') repeat-x;
height : 35px;
padding : 0 20px 0 5px;
margin : 98px 0 20px 0;
}

Endret 26. mars 2009 av Freke88

4588pkdkrikue5c · 26. mars 2009

Du bør moglegens lage eit eiga CSS for IE.

Lag eit som er optimalisert for IE, og brok følgende kode:

<!--[if IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

No har eg ikkje lest over koden din, men somregel går det ann å få eit stilark til å fungere i alle. Men eg gidd ikkje lese igjennom alt no.

Freke88 · 26. mars 2009

Yes har sett på den ekstra stilark løsningen, men hvordan vet jeg hva IE ikke forstår med stilarket jeg bruker nå?

viss jeg lager et nytt stilark vil jo det bare ende opp identisk med det jeg allerede har

Jeg har også kjørt W3 validate på både html og css dokumenter og har resultert med 0 errors 0 warnings

Endret 26. mars 2009 av Freke88

AKIRAx77 · 26. mars 2009

Du bør nulle ut CSSen først. Jeg bruker alltid denne først i alt HTML arbeid jeg gjør:

html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
color: #000000;
text-decoration:none;
}

Den gjør at siden har samme utgangpunkt i IE, Opera, Firefox osv.

Det er ikke sikkert det løser ditt problem, men det er en lur ting å gjøre.

Google også: "Designing CSS for IE6" eller "CSS tips for IE6". Så ser du litt tips og råd om hva du bør gjøre for å få ting til å funke i IE.

AKIRA

Freke88 · 27. mars 2009

fant problemet det var en div som ikke var avsluttet i menyen, men det rare var at når vi avsluttet den funket det i IE men ble feil på alle andre nettlesere, og viss vi slettet div tagen funket det i alle nettlesere bortsett fra IE så løsningen ble

<!--[if IE]></div><![endif]-->

takker for svar og føler nå med alle webdesignere som bannlyser IE

ukjentbrukergitt · 27. mars 2009

folk må lære seg å sjekke at koden er ok. http://validator.w3.org/

hvis den er helt korrekt, tollker alle sider den likt, noe visuelt annerledes men ca det samme.

Freke88 · 27. mars 2009

folk må lære seg å sjekke at koden er ok. http://validator.w3.org/
hvis den er helt korrekt, tollker alle sider den likt, noe visuelt annerledes men ca det samme.

@ Simester: Alle koder har blitt validert og besto W3 med 0 errors og 0 warnings, så det hjalp ikke oss veldig mye akkurat denne gangen

4588pkdkrikue5c · 29. mars 2009

folk må lære seg å sjekke at koden er ok. http://validator.w3.org/
hvis den er helt korrekt, tollker alle sider den likt, noe visuelt annerledes men ca det samme.

Det er bra å validere, men at alle lesere tolker likt er berre sprøyt. Internet Explorer har nokon merkelege måtar å lese CSS på, å krever ofte såkalla hacks, eller eiga CSS. Eg har fått til å få ting til å verke i alle nettlesere, men då må eg broke masse kode som eg ikkje heilt forstår kvifor eg bruker, og egentleg ikkje gjer meining. Men som berre gir IE eit spark i ræva. IE støtter ikkje CSS skikkelig, og eg vil seie at sjølv om ikkje alle nettleserene les rett, er dette verstingen.

Logg inn

[Løst]IE gir oss trøbbel med xhtml og css stilark

Anbefalte innlegg

Freke88

Lenke til kommentar

Videoannonse

4588pkdkrikue5c

Lenke til kommentar

Freke88

Lenke til kommentar

AKIRAx77

Lenke til kommentar

Freke88

Lenke til kommentar

ukjentbrukergitt

Lenke til kommentar

Freke88

Lenke til kommentar

4588pkdkrikue5c

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer