Safari VS Opera

K

KFKF

Medlem
Hei

Har begynt å ta opp igjen html og css. Tatt i betraktning at jeg aldri har vært helt sikker på språkene, har det godt fint, jeg har oppnådd de resultatene jeg ønsket. Helt til i går. Da skulle jeg for første gang teste koden i Opera (tidligere har jeg kjørt testene i Safari) og lite er som det skal. Det er ikke et avansert kodesett jeg har skrevet og jeg antar at det kun er et lite kompatibilitetsproblem.

Hovedsak: Lenkene er ikke aktive, bildene forsvinner og det skjer noe merkelig med h1-teksten.

Legger ved et skjermbilde fra safari, hvor alt ser ut som jeg ønsker:

skjermbilde20110510kl13.png


Hadde vært svært takknemmelig om noen kunne sett over koden og kommet med tilbakemelding.
 
K

KFKF

Medlem
…

Trodde jeg hadde gjort det.


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


	<head>
		<title> Arkitekt </title>
		<style type="text/css">
		
		
		a { 
		color:black; 
		background:transparent; 
		text-decoration:none; 
		} 

		a:hover { 
		color:black; 
		background:transparent; 
		text-decoration:underline; 
		} 
		
		.overskrift {
		color: black;
		margin-left: 40px;
		margin-top: -25px;
		width:230px;
		font-size: 2.14em;
		}
		
		.sivark {
		margin-left: 44px;
		width:230px;
		font-size:0,9em
		}
		
		
		.navigasjon {
		font-size: 0.7em;
		}

		
		.navigasjonNORSK {
		font-size: 0.7em;
		}
		
		
		.navigasjonNORSK 
		a:link {
		font-style: italic;
		}
		
	
		</style>
		
	
	
</head>
		
	<body>
		
		
		<basefont face="Verdana, Helvetica, sans-serif"/>
		<font face="Helvetica, Verdana">
	
				<body 
					bgcolor="ffffff"
					bgproperties="fixed"
					marginwidth="0px"
					topmargin="30px"
					vlink="black"
					alink="da4e34"
					link="black"
					
					>
				</body>
	
				
	
<!--Overskrift-->
	
		
		<hr
			width=268px
			color=black
			size=5
			align="left"
		/>


<p>
</p>

<div 
	class="sivark"		<a>
						Arkitektene
						</a>
</div>


<div 
	style="position:absolute;top:70px;"	
		
		<hr
			width=268px
			color=black
			size=1
			align="left"
		/>
</div>
		
		
		
			
<div
	class="overskrift"		
				<h1 
					href="http://hoem-fol.no"
					style="text-decoration:none">
							NAVN-FIRMA
				</h1>
</div>


<div 
	style="position:absolute;top:250px;"		
		<hr 
			width=268px 
			color=black
			size=5
			align="left"
		/>
</div>
	
	
		
	
	
<!-- Grafik -->
<div 
	style="position:absolute;top:25px;left:1160px">
	
		<table cellspacing="5" border="0" cellpadding="0">
		<tr valign="top" align="left">
		</td>
		<td width="5px" bgcolor="black"><BR></td>
		<td height="650px" valign="top" align="right">
		</td>
		</tr>
		</table>
</div> 		<!-- Høyrelinje -->

<div 
	style="
		width: 550px;
		height: 550px; 
		background :ffffff;
		position:absolute;top:100px;left:380px;
		">
<span>


<div
	style="position:absolute;top:40px;left:30px"
	>
	
	<a href="http://hoem-fol.no/work/hytter"
		<img src="logo_hytte.png"
			height="230px" 
			width="230px"
			>
	</a>
</div>

<div
	style="position:absolute;top:40px;left:280px"
	class="lleil">
	
	<a href="http://hoem-fol.no/work/leil"
		<img src="logo_leil.png"
			height="230px"
			width="230px"
			/>
	</a>
</div>

<div
	style="position:absolute;top:290px;left:30px"
	class="leneb">
	
	<a href="http://hoem-fol.no/work/eneb"
		<img src="logo_eneb.png"
			height="230px"
			width="230px"
			/>
	</a>
</div>
			
<div
	style="position:absolute;top:290px;left:280px"
	class="lpb">
	
	<a href="http://hoem-fol.no/work/pb"
		<img src="logo_pb.png"
			height="230px"
			width="230px"
			/>
	
	</a>		
</div>
	

</span>
</div>


<!-- Navigasjon-->




<div 
	style="position:absolute;top:270px;left:4px"
	class="navigasjon">
	
		
		<ul>
			<li style type=none
				<a 
					href="http://hoem-fol.no/work"
					
					>
							Work
			</li>
			<p></p>
				</a>
			
			<li style type=none
				<a 
					href="http://hoem-fol.no/about">
							About
			</li>
			<p></p>
				</a>
			
			<li style type=none
				<a 
					href="http://hoem-fol.no/contact">
							Contact
			</li>
				</a>
		</ul>
</div>



<!-- Navigasjon NORSK -->


<div 
	class="navigasjonNORSK"
	style="position:absolute;top:270px;left:67px"
	
				
		<ul>
			<li style type=none 
				<a 	
					href="http://hoem-fol.no/work">
							Arbeid
			</li>
			<p></p>
				</a>
			
			<li style type=none
				<a 
					href="http://hoem-fol.no/om">
							Om
			</li>
			<p></p>
				</a>
			
			<li style type=none
				<a 
					href="http://hoem-fol.no/kontakt">
							Kontakt
			</li>
				</a>
		</ul>
</div>







	
<!-- Foto -->
	


		</font>
	</body>
</html>
 
K

KFKF

Medlem
Nei, desverre. Har kun tilgang på ftp-serveren deres, kan ikke tillate meg å legge ned den nåværende siden for å opplaste dette her.
 
adeneo

adeneo

Medlem
Jeg vil anbefale deg å lese mer på W3Schools om HTML og CSS.

Den siden du har lagt inn koden til inneholder så mange feil at jeg ville anbefale deg å starte på nytt.
Det er ikke stygt ment, alle må begynne et sted, og kudos for innsatsen, men det finnes omtrent ikke en linje som ikke er feil, desverre :(

For å nevne noe så starter en doctype alltid med utropstegn, f.eks. slik : <!DOCTYPE html>

Doctypen er heller ikke riktig i seg selv, og må endres.

CSS bør legges i en egen fil og linkes inn, selv om du selvfølgelig kan gjøre slik som du har gjort.

når vi kommer til <body> så begynner problemene, du forsøker å bruke basefont og font face som ikke lenger er i bruk og bør unngås, du forsøker også å sette CSS på <body> med en merkelig teknikk som ikke er i henhold til noen kjent webstandard, og <body> avsluttes så før koden til selve siden kommer.

Når jeg retter doctypen og ikke avslutter <body> før koden, så får jeg rundt 100 feil, og det dreier seg for det meste om feil med <table> og <hr> samt manglende avslutninger og merkelig inline CSS som ikke fungerer.

Dette er i all korthet grunnen til at siden din ikke virker i Opera, og det er i grunn et under at den virker i Safari.

Opera er nok den nettleseren som følger webstandarder best, og når noe ikke fungerer i Opera så er det gjerne fordi det er feil, det samme kan ikke sies om Safari så jeg ville nok i fremtiden testet med Opera, eller aller helst Firefox med Firebug, samt kontrollsjekke med en webkit nettleser, som for eksempel Google Chrome.

Den siden atomet linker til ovenfor er også nesten pålagt ved webdesign etter min mening, da en side som validerer ikke vil ha skrivefeil og andre ting som man kan ha oversett eller gjort feil, og slike sider har en langt større sannsynlighet for å fungere optimalt enn sider som ikke validerer, selv om man selvfølgelig også kan ha problemer med sider som validerer.
 
Sist redigert:
Du må logge inn eller registrere deg for å svare her.
Topp