webForumDet fria alternativet

Footer absolut placering 0 bottom - knas i explorer

HTML & CSS

3 svar · 703 visningar · startad av Lisali

Medlem sedan okt. 200698 inlägg
Frågan#1

Hej alla proffs!

Jag är en glad amatör och har pillrat ihop en sida men blir snart knäpp. Jag fattar inte.

Överallt ser sidan bra ut - förutom i Explorer. Hälften av footern försvinner. Kan man lösa det så att det ser bra ut även i Explorer?

Sidan ligger här: www.espri.se

Mycket tacksam för svar.
Lisa

Medlem sedan okt. 2007446 inlägg
#2

Börja med att se till så din html och css validerar.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.espri.se%2F
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.espri.se%2F

Det blir enklare att felsöka eventuellt kvarstående fel då

Sen har vi det här med att använda CSS, fast lite fel

Du "tjatar" tex om vilket typsnitt som skall användas. Det räcker med att säga det EN gång, C i CSS står för Cascading, dvs element ärver sitt parent-elements inställningar såvida inget annat anges. Således räcker det med att sätta typsnitt i body

Din tabell behövs inte ens så den behöver du inte ta hänsyn till
alla a:nånting kan ersättas med enbart a{} eftersom alla ser likadana ut

Döpa cssklasser till style3 och liknande är en ful ovana. om 6 månader när du skall uppdatera nånting så har du inte en susning om vad den är eller vad den gör. Cssklasser skall döpas efter vad de ÄR inte hur de ser ut eller en kryptisk kod. Således borde din span i din footer heta nånting i stil med footertext. Sen att den inte ens behövs är bara en detalj...

Din css (som även innehåller fel) kan således krympas till

@charset "UTF-8";

body{
	font-family: Calibri;
	font-size:12px;
	background-color: #000;
	margin:50px 0
	}
	
a{color: #000;text-decoration: none;}

#container {height: 550px; width: 650px; margin:auto;}

#footer {
	background-color: #ccc;
	height: 35px;
	width: 100%;
	position: absolute;
	bottom: 0;
	padding-top: 5px;
	text-align:center; /*centrerar här istället för att ha en <div align="center">*/
}

Jag passade även på att sanera din html ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Espri Information</title>
	<link href="untitled.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/webkit_version_xl.js"></script>
	<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<script language="JavaScript" type="text/javascript">
	<!--
	var version = get_webkit_version();
	var iPhone_regex = /iPhone|iPod/;
	var result = version['browser'].search(iPhone_regex);
	if (result != -1) {
	window.location = "http://www.espri.se/flash/iphone.html";
	}
	// -->
</script>

<body>
<div id="container">
	<script type="text/javascript">
		AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','600','height','550','src','intro','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','intro' ); //end AC code
	</script>
	<noscript>
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="600" height="550">
          <param name="movie" value="intro.swf" />
          <param name="quality" value="high" />
          <embed src="intro.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="600" height="550"></embed>
        </object>
	</noscript>
</div>
<div id="footer">
	Espri Information AB, Nybrogatan 59, 114 40 Stockholm. 0705 20 64 30. <a href="mailto:info@espri.se">info@espri.se</a>
</div>
</body>
</html>
Medlem sedan okt. 200698 inlägg
#3

Tack! Det var lärorikt! Mycket tacksam. :bire

Det återstår en del fel (footern syns dock i Explorer nu), t ex:

Line 30, Column 22: there is no attribute "src"

Vad betyder det?

Medlem sedan okt. 2007446 inlägg
#4

hittade en sak jag missade, flytta upp javascriptet som ligger mellan </head>
och <body> så det ligger inne i head (eller inne i body)

Gissningsvis gnäller den på din <embed> tagg, som inte är standard testa istället detta

<div id="container">
	<object type="application/x-shockwave-flash" data="http://www.espri.se/intro.swf" width="600" height="550">
		<param name="movie" value="http://www.espri.se/intro.swf" />
	</object>
</div>
262 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
122 ms — deklarationer (db)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)
125 ms — ändringar (db)