Footer på vift!

Nu när jag hållt på och designat och lagt in nya divar har det uppstått ett märkligt problem. "Footern" har fått för sig att rymma och det är ju inte alls bra det :e

I den bifogade bilden kan man se hur den ligger en bit ut åt höger när den egentligen ska ligga dikt an mot nederdelen av webbläsaren.

Vad kan problemet vara?

CSS-kod:

#content
{
	width: 718px;
	font-family: verdana, helvetica, impact, sans-serif;
	background-color: #FFFFFF;
	margin-left: 21px;
	margin-right: 21px;
	margin-bottom: 0px;
	margin-top: 30px;
	padding: 0px;
}

#content_inline_left
{
	float: left;
	top: 0;
	left: 0;
	padding: 0px 20px 0px 0px;
	margin: 0;
	width: 450px;
	height: auto;
	border: #0A364B solid 0px;
}

#spacer
{
	float: left;
	top: 0;
	left: 0;
	padding: 0px 0px 0px 0px;
	margin: 0;
	width: 30px;
	height: auto;
}

#content_inline_right
{
	/*position: absolute;*/
	/*position: relative;*/
	float: left;
	top: 0;
	/*left: 500px;*/
	width: 180px;
	height: auto;
	border: #0A364B solid 0px;
	text-color: #ffffff;
}

#infobox_header
{
width: 180px;
padding: 4px 0px 4px 15px;
/*background-color: #69D3FF; ORG*/
background-color: #1952A2;
border: #0A364B solid 1px;
color: #ffffff;
font-weight: bold;
font-size: 12px;
}

#infobox_content
{
width: 180px;
padding: 4px 0px 4px 15px;
border: #0A364B solid 1px;
border-top: 0px;
background-color: #ffffff;
color: #000000;
font-size: 12px;
}

#belowthebottom {
  height: 25px;  /* samma som #bottom */
}

#footer
{
    width: 740px;
	height: 25px;
	border-left: solid 1px #BFBFBF;
	border-right: solid 1px #BFBFBF;
	border-bottom: #9C9C9C groove 2px;
	border-top: #0D4159 solid 1px;
	background-color: #69D3FF;
	padding: 14px 0px 5px 0px;
	text-align: center;
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 12px;
	/*background-image: url(footer.jpg);*/
	margin-left:auto; 
	margin-right: auto;
	overflow:hidden;
	margin-top:-48px;
	color: #000000;
}

HTML-kod:

<div id="content"> 
	<div id="content_inline_left">
	<h1>Rubrik</h1>
	</div>
	<div id="spacer">
	&nbsp;
	</div>
	<div id="content_inline_right">
		<div id="infobox_header">
		Relaterad information
		</div>
		<div id="infobox_content">
		<ul>
		<li>Cessna</li>
		<li>Flygskola</li>
		</ul>
		</div>
	</div>
</div>

I min iver glömde jag ju att bifoga bilden... :r

Ursäkta men.. var har du "footer" i html koden ?

Allting som finns under CONTENT-delen på sidan har jag lagrat i en footer-include.

Här är resterande del av HTML-koden:

<div id="belowthebottom">
	&nbsp;
	</div>

</div>

<div id="footer">Copyright&nbsp;&copy;&nbsp;Flygfyren.nu, 2005&nbsp;
	<!--<p>
      <a href="http://validator.w3.org/check?uri=referer"><img border="0"
          src="http://www.w3.org/Icons/valid-html401"
          alt="Valid HTML 4.01!" height="31" width="88"></a>
    	
 	<a href="http://jigsaw.w3.org/css-validator/">
  	<img style="border:0;width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!">
 	</a>
	</p>-->
	</div>

</body>
</html>

snabb hackade lite...

div { font-family: verdana, helvetica, impact, sans-serif; font-size: 12px; }
#content
{
	width: 718px;
	background-color: #FFFFFF;
	margin-left: 21px;
	margin-right: 21px;
	margin-bottom: 0px;
	margin-top: 30px;
	padding: 0px;
}

#content_inline_left
{
	float: left;
	padding: 0px 20px 0px 0px;
	margin: 0;
	width: 450px;
	height: auto;
	border: #0A364B solid 0px;
}

#content_inline_right
{
	float: right;
	width: 180px;
	height: auto;
	border: #0A364B solid 0px;
	text-color: #ffffff;
}

#infobox_header
{
	width: 180px;
	padding: 4px 0px 4px 15px;
	background-color: #1952A2;
	border: #0A364B solid 1px;
	color: #ffffff;
	font-weight: bold;
}

#infobox_content
{
	width: 180px;
	padding: 4px 0px 4px 15px;
	border: #0A364B solid 1px;
	border-top: 0px;
	background-color: #ffffff;
	color: #000000;
}

#footer
{
	clear:both;
        width: 740px;
	height: 25px;
	border-top: #0D4159 solid 1px;
	background-color: #69D3FF;
	padding: 14px 0px 5px 0px;
	text-align: center;
	margin:0;
	color: #000000;
}
#content_inline_left h1 { margin-top:0; }

</style>
<div id="content"> 

	<div id="content_inline_left">
	
	<h1>Rubrik</h1>
	
	<p>Tetx asd asdas dsad asd sa adsas dsadd asd 
	sada sd asdsa dsad asd asd asd as dasd as asd
	s asd sdas asda sdsad aasd asd asd as dasd as 
	dsad d as asdas sads d asdsa sad asd sad sa d
	asd sa dasdsa asdsa sad a sada sda asda sdsad</p>
	</div>

	<div id="content_inline_right">
	
		<div id="infobox_header">
		Relaterad information
		</div>
		
		<div id="infobox_content">
		<ul>
		<li>Cessna</li>
		<li>Flygskola</li>
		</ul>
		</div>
		
	</div>
	
	<div id="footer">Copyright &copy; Flygfyren.nu 2005</div>
	
</div>

Nystädad kod :) Snabbkikade lite på koden. Har du gjort några stora övergripande saker med koden du kan berätta något om så jag förstår tänket? :OO

Att footern hamnade fel förut tror jag delvis berodde på att jag hade en massa divar både enskilda och nästlade som sedan förhöll sig fel till varandra beroende på om float-attributen var satt eller ej.

Nu ska jag ta mig en :birp samt pröva din omgjorda css!

nja.. rensade bara bort lite grejjer som var "ivägen" :)

din footer flöt med div:arna ovanför .. grejjen var att jag satte clear:both; på footern

..och float:right på den lilla rutan så jag fick den max ut åt höger

Du kan nästla ganska mycket så länge som den yttersta är rätt positionerad

en grej som jag brukar köra med p.gr av IE´s box model är att använda dubbla div:ar ( kanske inte helt snyggt men det funkar ) och köra width på den yttersta och ex. padding på den innersta så ser det bra ut i både IE & FF

ex

.div1 { padding:0; margin:0; width:150px; }
.div2 { padding:1em; }

<div class="div1">
<div class="div2">
Lite text
</div>
</div>

Nu har jag prövat att implementera den något rensade koden :) Detta är resultatet:http://www.flygfyren.nu/showarticle.php

Det verkar fortfarande vara något knas eftersom den vita content-delen inte "stretchar ut" till rätt höjd så att hela textmassan får plats i den diven?! :) Sedan verkar nu footern ligga till vänster och flyta runt!

huh ? ..såg bra ut när jag mekade med din kod .. men jag har nog inte all kod

hold.. de mig 20 minuter i nästa paus av hockeyn så ska jag fixa.. brb

alright! tack för hjälpe :)

du skulle nog inte orka leva om du fick se min fullständiga CSS-kod som förmodligen är uppbyggt på ett hjärtskärande sätt :e

Komplett CSS-kod del 1:
[KOD]
/*Definitioner HTML- och BODY-delen */
/*==================================*/
html, body{
margin: 0px;
padding:0px;
/*background-color: #F5F3EB; ORG*/
/*background-color: #ECF9FF; ORG ORG*/
background-color: #F7F7F7;
height: 100%;
}

#main {
min-height: 100%;
width:740px;
border-left: solid 1px #BFBFBF;/*#0D4159;*/
border-right: solid 1px #BFBFBF;
margin-left:auto;
margin-right: auto;
background-color:#ffffff;
}

/*Definiering av typsnitt */
/*==================================*/
p
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 12px;
/*line-height: 0px;*/
color: #0A364B;
}

p.notregistered
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 12px;
text-align: center;
color: #000000;
padding-top: 40px;
}

p.text
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 12px;
line-height: 22px;
color: #000000;
margin: 0px 0px 0px 0px;
padding-top: 0px;
}

p.admin
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 12px;
line-height: 18px;
color: #000000;
margin-right: 21px;
/*background-color: #F7F7F7;*/
/*border-right: #D4D4D4 solid 1px;*/
padding-right: 20px;
}

p.meny
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 12px;
color: #0A364B;
}

p.form
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 12px;
color: #0A364B;
font-weight: bold;
}

p.login
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 12px;
color: #0A364B;
}

p.logotext
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 18px;
color: #FFFFFF;
font-weight: bold;
}

p.author
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 10px;
line-height: 20px;
letter-spacing: 2px;
color: #000000;
margin: 0px 0px 15px 0px;
padding-top: 0px;
}

p.breadtext
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 12px;
line-height: 20px;
color: #000000;
}

p.heading1
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 16px;
color: #0A364B;
font-weight: bold;
letter-spacing: 3px;
margin-bottom: 0px;

background-color: #FFFFFF;	

}

p.article_date
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 14px;
color: #0A364B;
/*font-weight: bold;*/
margin-bottom: 0px;
background-color: #FFFFFF;
float: right;
}

p.utc
{
font-family: verdana, helvetica, impact, sans-serif;
font-size: 18px;
color: #FFFFFF;
font-weight: bold;
font-style: italic;
margin-bottom: 0px;
}

h1 {
font-family: verdana, helvetica, impact, sans-serif;
font-size: 15px;
color: #1952A2;
font-weight: bold;
letter-spacing: 3px;
margin: 0px 0px 0px 0px;
padding-top: 0px;
}

hr.special {
color: #0A364B;
background-color: #FFFFFF;
height: 1px;
text-align: left;
}

/*Definiering av olika länktillstånd för menyn*/
/*============================================*/
.menu a {
font-family: verdana, helvetica, impact, sans-serif;
#color: #0A364B;
color: #000000;
background: transparent;
font-weight: bold;
text-decoration: none;
/*padding:.1em 0;*/
}
.menu a:hover {
color: #F5A027;
background: transparent;
font-weight: bold;
text-decoration: none;
}

/*Definiering av olika länktillstånd för menyn*/
/*============================================*/
/*a:link
{
font-family: verdana, helvetica, impact, sans-serif;
#font-size: 12px;
#color: #FFFFFF;
#font-weight: bold;
color: #0A364B;
background-color: transparent;
text-decoration: none;
}

a:active
{
font-family: verdana, helvetica, impact, sans-serif;
color: #FF0000;
background-color: transparent;
text-decoration: none;
}

a:hover
{
font-family: verdana, helvetica, impact, sans-serif;
#font-size: 12px;
#font-weight: bold;
color: #F5A027;
background-color: transparent;
text-decoration: none;
}

a:visited
{
font-family: verdana, helvetica, impact, sans-serif;
#font-size: 12px;
#font-weight: bold;
color: #000000;
#color: #0A364B;
background-color: transparent;
text-decoration: none;
}*/

/*Flygfyren.nu huvudstruktur*/
/*==================================*/

/*input {
background-color: #000000;
}*/

#login .buttons {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
height: 17px;
background-color: #EFEFEF;
/*background-color: transparent;*/
color: #0A364B;
border: 1px solid;
margin: 0px;
padding: 0px;
}

.texta {
font-size: 10px;
background-color: #FFFFFF;
border: 1px solid #666666;
margin: 0px;
}
[KOD]

Vet ej om du har läst Jarvklo's tutorial på hur man får en footer att ligga dikt an mot botten i webbläsaren?

I min CSS-kod fanns det är par attribut speciellt i footern som enligt hans exempel var tvunget att finnas i #main html,body-deklartionen samt i divarna #belowthebottom och #footern. Det var en av förutsättningar för att footern skulle ligga kvar längst ner. Dessa inställningar ser till så att om innehållet är mindre än en websida så flyttas footern automatiskt ner mot sidans slut. Skulle det vara mer innehåll skjuts bara footern längre ner.

Hans ursprungskod såg ut så här:

html,body { /**/
color: #fff;
background-color:#ff6600;
margin:0;
padding:0; 
height:100%; /**/
}

<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->

#belowthebottom {
  height:28px;  /* samma som #bottom */
}
#bottom{
width:740px;
height: 28px; /* height = p height + p margin-top + p margin-bottom */
background-color:#999;
margin-top:-28px; /* samma som height */
}

Komplett CSS-kod del 2:

#login
{
	position: relative;
	top: 0px;
	/*left: 0px;*/
	width: 719px;
	/*height: 12px;*/
	margin: 0px;
	/*border-top: #1E77A4 groove 2px;*/
	/*border-bottom: #3AA4D9 groove 2px;*/
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 12px;
	/*color: #000000;*/
    /*background-color: #00A0DB; ORG*/
	/*background-color: #BFBFBF;OLD OLD OLD*/
	/*background-image: url("http://www.flygfyren.nu/bg_metar.jpg");*/
	/*background-color: #006599;*/
	/*background-color: #1E79A6; SENASTE*/
	/*background-color: #BFDDF4;*/
	/*background-color: #1E79A6;*/
	background-color: #69D3FF;
	/*background-color: #ffffff;*/
	color: #000000;
	padding: 4px 0px 4px 21px;
}

#testlogin
{
	position: absolute;
	top: 135px;
	left: 265px;
	width: 719px;
	margin: 0px;
	font-family: verdana, helvetica, impact, sans-serif;
 	font-size: 12px;
	font-weight: bold;
	background-color: transparent;
	color: #1952A2;
	padding: 4px 0px 4px 21px;
}

form { margin: 0; }

#loggaut
{
	position: absolute;
	top: 140px;
	left: 778px;
	width: 100px;
	height: 20px;
	margin: 0px;
	/*border-top: #3AA4D9 groove 2px;*/
	/*border-bottom: #3AA4D9 groove 2px;*/
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 10px;
	font-weight: bold;
  	/*color: #000000;*/
        /*background-color: #ECF1F5;*/
	/*background-color: #BFDDF4;*/
	/*background-color: #1E79A6;*/
	/*padding: 3px 0px 0px 21px;*/
}

#menu
{
	position: relative;
	top: 2px;
	/*left: 0px;*/
	width: 719px;
	height: 27px;
	margin: 0px;
	/*border-top: #000000 solid 1px;*/
	/*border-top: #9C9C9C groove 2px;*/
	border-bottom: #9C9C9C groove 2px;
	border-bottom: #0D4159 solid 1px;
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 12px;
  	/*color: #000000;*/
        /*background-color: #ECF1F5;*/
	/*background-color: #BFDDF4;*/
	/*background-color: #1E79A6;SENASTE*/
	/*xbackground-color: #BFBFBF; ORG ORG ORG*/
	/*background-image: url("http://www.flygfyren.nu/bg_metar.jpg");*/
	background-color: #69D3FF;
	padding: 0px 0px 0px 21px;
	color: #FFFFFF;
}

#metar
{
	position: relative;
	top: 1px;
	/*left: 0px;*/
	/*width: 719px;*/
	width: 698px;
	/*height: 25px;*/
	height: auto;
	margin: 0px;
	border-top: #1E77A4 groove 0px;
	/*background-image: url("http://www.flygfyren.nu/bg_metar.jpg");*/
	/*border-bottom: #3AA4D9 groove 2px;*/
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 10px;
  	/*color: #000000;*/
    /*background-color: #ECF1F5;*/
	/*background-color: #BFDDF4;*/
	/*background-color: #00A0DB; ORG*/
	/*background-color: #ffffff;*/ 
	/*background-color: #69D3FF;*/ 
	/*background-color: #5FBED6;*/
	background-color: #006599;
	/*background-color: #4AADDE; NÄST*/
	/*background-color: #E5FF66; NÄST NÄST*/
	/*background-color: #FFFF00; NÄST NÄST NÄST*/
	/*background-color: #BFBFBF;*/
	padding: 3px 21px 3px 21px;
	/*color: #F5A027;*/
	/*color: #80DFFF;*/
	color: #ffffff;
}

td#metar td
{ 
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 10px;
	/*font-weight: bold;*/
  	/*color: #80DFFF; SENASTE*/
	color: #ffffff;
}

#content
{
	width: 718px;
	background-color: #FFFFFF;
	margin-left: 21px;
	margin-right: 21px;
	margin-bottom: 0px;
	margin-top: 30px;
	padding: 0px;
}

#content_inline_left
{
	float: left;
	padding: 0px 20px 0px 0px;
	margin: 0;
	width: 450px;
	height: auto;
	border: #0A364B solid 0px;
}

#content_inline_right
{
	float: right;
	width: 180px;
	height: auto;
	border: #0A364B solid 0px;
	text-color: #ffffff;
}

#infobox_header
{
	width: 180px;
	padding: 4px 0px 4px 15px;
	background-color: #1952A2;
	border: #0A364B solid 1px;
	color: #ffffff;
	font-weight: bold;
}

#infobox_content
{
	width: 180px;
	padding: 4px 0px 4px 15px;
	border: #0A364B solid 1px;
	border-top: 0px;
	background-color: #ffffff;
	color: #000000;
}

#footer
{
	clear:both;
    width: 740px;
	height: 25px;
	border-top: #0D4159 solid 1px;
	background-color: #69D3FF;
	padding: 14px 0px 5px 0px;
	text-align: center;
	margin:0;
	color: #000000;
}

div { font-family: verdana, helvetica, impact, sans-serif; font-size: 12px; }

#content_inline_left h1 { margin-top:0; }

#belowthebottom 
{
  height: 25px;  /* samma som #bottom */
}

#footer2
{
    width: 740px;
	height: 25px;
	border-left: solid 1px #BFBFBF;
	border-right: solid 1px #BFBFBF;
	border-bottom: #9C9C9C groove 2px;
	border-top: #0D4159 solid 1px;
	background-color: #69D3FF;
	padding: 14px 0px 5px 0px;
	text-align: center;
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 12px;
	/*background-image: url(footer.jpg);*/
	margin-left:auto; 
	margin-right: auto;
	overflow:hidden;
	margin-top:-48px;
	color: #000000;
}

/*Definiering av loginruta i headerdelen*/
/*======================================*/
.box
{
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 200px;
	height: 50px;
	border: #5497D5 groove 2px;
	padding: 5px;
}

td.login 
{ 
	font-family: verdana, helvetica, impact, sans-serif;
  	font-size: 10px;
  	color: #FFFFFF;   
}

#typein input 
{ 
color: #000000; 
font-size: 8px; 
background-color: #EDEFED; 
padding: 1px; 
border: solid 1px white; 
}

.button 
{
background-color: #EDEFED;
font-family:"Courier New", Courier;
border: #000000 1px solid;
font-size: 10px;
color: #000000;
} 

.button2 
{
color:#00f; 
background-color:#ddd; 
color:#fff; background-color:#33b; 
border-width:4px; 
border-color:#00f; 
border:0; 
font-family:"Courier New", Courier; 
font-size:150%; 
font-size:10%; 
font-weight:bold; 
padding:0; 
margin:0; text-align:right; width:10em; 
} 

ul
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 5px;
}

/*IMAGE                                 */
/*======================================*/
.borderbottom
{
border-bottom: #0D4159 solid 1px; 
/*border-bottom: #ffffff solid 1px;*/
}

Anledningen till att det är så många background-attribut kvar beror på att jag laborerat med färger fram och tillbaka. Dessa som är remmade skall ju självklart tas bort :)

Du hade bl.a dubbla body taggar .. hold on .. jag sitter & hackar just nu .. svar kommer strax

så.. prova detta .. och gröta inte till det nu :h

<!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>

	<title>Flygfyren.nu</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css" media="all">
html, body
{
	margin: 0px;
	padding:0px;
	background-color: #F7F7F7;
	height: 100%;
}

#main
{
	min-height: 100%;
	width:740px;
	border-left: solid 1px #BFBFBF;/*#0D4159;*/
	border-right: solid 1px #BFBFBF;
	margin-left:auto;
	margin-right: auto;
	background-color:#ffffff;
}

img { border:none; }
form { margin:0; }
div, span, td { font-family: verdana, helvetica, impact, sans-serif; font-size: 12px; }

#logo
{
	padding:0;
	margin:0;
}

#login
{
	padding:4px 0 4px 20px;
	background-color:#83D6FE;
	color: #0A364B;
	border-top:1px solid #000;
}

#login .texta
{
	font-size: 10px;
	background-color: #FFFFFF;
	border: 1px solid #666666;
	margin: 0px;
}

#login .buttons
{
	font-size: 10px;
	height: 17px;
	background-color: #EFEFEF;
	color: #0A364B;
	border: 1px solid;
	margin: 0px;
	padding: 0px;
}

#metar
{
	padding:5px 0 5px 20px;
	background-color:#006FA4;
	color: #fff;
	border-top:1px solid #fff;
	font-size:10px;
	line-height:190%;
}

#menu
{
	padding:4px 0 4px 20px;
	background-color:#83D6FE;
	color: #0A364B;
	border-top:1px solid #fff;
}

#content
{
	clear:both;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	border-top:1px solid #888;
}

#content_inline_left
{
	float: left;
	padding: 20px;
	margin: 0;
	width: 450px;
}

#content_inline_left h1
{
	margin-top:0; 
	font-size: 15px;
	color: #1952A2;
	font-weight: bold;
	letter-spacing: 3px;
	margin: 0;
}

#content_inline_left p
{
	line-height:170%;
}

#content_inline_left p.author
{
	font-size: 10px;
	letter-spacing: 2px;
}

#content_inline_right
{
	float: right;
	width: 180px;
	margin: 15px 15px 0 0;
	text-color: #ffffff;
	border: #0A364B solid 1px;
}

#infobox_header
{
	padding: 4px 0 4px 15px;
	background-color: #1952A2;
	color: #ffffff;
	font-weight: bold;
}

#infobox_content
{
	padding: 15px;
	border-top: #0A364B solid 1px;
	border-top: 0;
	color: #000000;
}

#infobox_content ul
{
	padding: 0;
	margin:0 0 0 15px;
}

#infobox_content li
{
	list-style-type:square;
}

#footer
{
	clear:both;
	height: 25px;
	border-top: #0D4159 solid 1px;
	background-color: #69D3FF;
	padding: 14px 0px 5px 0px;
	text-align: center;
	margin:0;
	color: #000000;
}
</style>

</head>
<body>

<div id="main">

	<div id="logo">
	<img src="LogoFlygfyren3.jpg" width="740" height="167" alt="Logo" style="display: block;" />
	</div>
	
	<div id="login">
	<form action="login.php" method="post">
	Användarnamn: <input type="text" name="username" class="texta" onfocus="this.style.backgroundColor='#FFFFCC';" onblur="this.style.backgroundColor='#ffffff';" />
	Lösenord: <input type="password" name="password" class="texta" onfocus="this.style.backgroundColor='#FFFFCC';" onblur="this.style.backgroundColor='#ffffff';" />
	<input type="submit" value="Logga in" class="buttons" />
	</form>
	</div>
	
	<div id="metar">
	<strong>METAR:</strong> ESSA 091820Z 26005KT 9999 FEW031 BKN045 05/01 Q1009 NOSIG=<br />
	<strong>TAF:</strong> ESSA 091730Z 091803 23005KT 9999 SCT025 PROB30 0103 3000 BR=
	</div>

	<div id="menu">
	Din | Coola | Meny | Finnes | Hära
	</div>

	<div id="content">

	<div id="content_inline_left">
	
	<h1>Idén bakom Flygfyren.nu</h1>
	
	<p class="author">Skriven av <a href="asdf">Gäst</a>, 2005-03-26 14:22</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras id felis. Vestibulum cursus lacus eget magna. Praesent pellentesque. Aenean ligula nisl, feugiat vitae, pellentesque id, malesuada ut, pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean porttitor sem sed sapien. Aliquam quis enim. Maecenas sed enim et dolor suscipit tincidunt. Cras ante velit, gravida id, posuere eu, hendrerit at, erat. Maecenas tellus justo, consectetuer sit amet, porttitor sed, nonummy non, sapien. Ut consequat justo in odio. Sed id enim.<br /><br />
	<p>Donec ut est quis mauris sagittis facilisis. Maecenas volutpat massa id erat.<br /><br />
	<p>Donec ut est quis mauris sagittis facilisis. Maecenas volutpat massa id erat. Nulla ornare, metus ut fringilla dignissim, neque risus placerat sem, quis fringilla magna lectus ac risus. Sed ultrices. Morbi eget neque. Nullam wisi ligula, laoreet ac, dapibus id, scelerisque id, sem. Sed dignissim sapien sed ipsum convallis sodales. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ut risus eget ante convallis scelerisque. Integer metus arcu, placerat dignissim, scelerisque quis, consectetuer vitae, eros. Praesent vel erat non massa semper mattis. Duis pede. Donec in eros sit amet lectus condimentum malesuada. Pellentesque porttitor ante ac elit. Etiam a enim id wisi aliquam varius. Suspendisse iaculis velit id mauris. Sed in pede tempor ligula tincidunt malesuada. Integer quis ante. Ut sem justo, iaculis ac, sollicitudin venenatis, aliquet a, mauris. Aenean facilisis nulla et lacus.<br /><br />
	<p>Aliquam erat volutpat. Praesent a odio in ligula viverra pretium. Morbi semper dignissim arcu. Sed eget erat ac arcu feugiat ultricies. Nulla vestibulum justo nec velit. Suspendisse potenti. Donec tempus. Morbi gravida, sem vel tincidunt tincidunt, leo enim adipiscing wisi, quis tincidunt justo ante eu turpis. Suspendisse potenti. Pellentesque risus. Suspendisse tellus wisi, consequat fringilla, aliquet vel, luctus tempus, enim. Etiam quis nibh ut enim consequat pellentesque. Mauris ultricies quam id mauris. Nunc venenatis sem ut massa.<br /><br />
	<p>Quisque justo est, iaculis et, euismod ut, eleifend vitae, pede. Suspendisse porttitor, sapien vitae ornare posuere, urna ipsum lobortis velit, sit amet vulputate magna nibh eget orci. Quisque elementum. Aenean non quam. Proin fringilla. Sed in sem. Aenean non lorem. Donec eleifend quam sed tellus. Etiam scelerisque mauris ac libero. Donec a dui. In et dolor ac elit consequat facilisis. Quisque volutpat rutrum nunc. Donec vehicula. Curabitur vehicula, nisl et cursus euismod, ante felis iaculis massa, nec cursus mauris purus at pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sed est. Phasellus leo diam, feugiat et, tempor pharetra, auctor id, elit. Morbi molestie massa et est. Phasellus vel leo. Vestibulum porttitor bibendum purus.<br /><br />
	<p>Quisque odio magna, sollicitudin sed, auctor eu, volutpat tempor, turpis. Sed id sem. Proin at neque at metus congue fermentum. Proin nec sapien. Maecenas porta quam. Ut mollis ligula. Etiam molestie, erat nec mollis volutpat, mi risus sodales ipsum, vitae tincidunt ante mauris et diam. Vivamus ut lacus ultricies massa vulputate porta. Aenean at elit. Ut condimentum leo ac risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ultrices ante sed turpis. Donec pretium feugiat justo. Nunc eu wisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque metus justo, euismod eget, interdum sed, scelerisque in, arcu.<br /><br />
	<p>Phasellus commodo erat at orci. Nunc felis dolor, eleifend vel, venenatis iaculis, semper ac, elit. Fusce at tellus. Curabitur non leo. Aenean pede enim, egestas ut, ullamcorper non, ornare quis, dui. Duis a turpis eu turpis semper porttitor. Vivamus in risus quis ipsum venenatis euismod. Proin et nibh. Nunc a ante non nibh rhoncus rhoncus. Duis tortor risus, rhoncus eget, facilisis et, dapibus id, neque. Donec at ligula eu elit rutrum luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus justo.<br /><br />
	<p>Phasellus commodo erat at orci. Nunc felis dolor, eleifend vel, venenatis iaculis, semper ac, elit. Fusce at tellus. Curabitur non leo. Aenean pede enim, egestas ut, ullamcorper non, ornare quis, dui. Duis a turpis eu turpis semper porttitor. Vivamus in risus quis ipsum venenatis euismod. Proin et nibh. Nunc a ante non nibh rhoncus rhoncus. Duis tortor risus, rhoncus eget, facilisis et, dapibus id, neque. Donec at ligula eu elit rutrum luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus justo.</p>
	
	</div>
	
	<div id="content_inline_right">
		<div id="infobox_header">
		Relaterad information
		</div>
		<div id="infobox_content">
		<ul>
		<li>Cessna</li>
		<li>Flygskola</li>
		</ul>
		</div>
	</div>
	
	<div id="footer">Copyright &copy; Flygfyren.nu, 2005</div>
	
	</div>

</div>

</body>
</html>

Nått att tänka på är att du inte får använda underscore ( _ ) när nu namnger class och id värden.

Eric Meyer skrev:

Both CSS1 and CSS2 did not permit the use of underscores in class and id values, which made values like test_class illegal.

En av många källor

ja .. bindestreck ( - ) får däremot användas .. eller är jag helt ute och cyklar ?

Palle skrev:

Nått att tänka på är att du inte får använda underscore ( _ ) när nu namnger class och id värden.

Eric Meyer skrev:

Both CSS1 and CSS2 did not permit the use of underscores in class and id values, which made values like test_class illegal.

En av många källor

Hoppsan, det hade jag inte en aning om... Då har jag ännu en sak på "att-fixa-listan". :)

fuel skrev:

så.. prova detta .. och gröta inte till det nu :h

jag vill börja med att tack för din hjälp! :) helt ovärdelig! själv hade jag inte klarat av att reda ut detta (insåg väl kanske inte att det fanns några problem) med mina än så länge ringa kunskaper om CSS. nu kan jag dock glatt meddela att sidan renderas nästa exakt lika ibåde IE och FF. det gjorde den INTE förut!

om du behöver hjälp med databaser någon gång får du säga till. det är jag betydligt bättre på än CSS :e

nu har jag endast ett litet problem kvar. menyn som jag hade i div #menu förut har helt plötsligt hamnat längst upp till vänster på sidan. hur kan detta komma sig? den ligger ju bevisligen i #menu? :OO

In CSS 2.1, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit.

http://www.w3.org/TR/CSS21/syndata.html#q6

# ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

http://www.w3.org/TR/REC-html40/types.html#type-name

Det är tillåtet att använda underscore i CSS2.1, men det kanske är bäst att låta bli ändå eftersom det var olagligt i CSS1 och CSS2 (vilket betyder att vissa webbläsare tillåter underscores och andra gör det inte).