Gå til innhold

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

Freke88

Anbefalte innlegg

Freke88

Freke88

Skrevet
Skrevet (endret)

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;
}

 

post-114014-1238069250_thumb.jpg

Endret av Freke88

Videoannonse

Videoannonse
Annonse
4588pkdkrikue5c

4588pkdkrikue5c

Skrevet
Skrevet

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

Freke88

Skrevet
  • Forfatter
Skrevet (endret)

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 av Freke88
AKIRAx77

AKIRAx77

Skrevet
Skrevet

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

Freke88

Skrevet
  • Forfatter
Skrevet

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 :p

Freke88

Freke88

Skrevet
  • Forfatter
Skrevet
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

4588pkdkrikue5c

Skrevet
Skrevet
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.

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...