CaptainB
04-03-2011, 11:17 AM
Hi there,
All elements in my footer simply ignores padding and margin set on it's containing divs and elements (except for one ul). I can't seem to fint what's causing the bug, so if anybody could kick in and maybe give a hint I'd be really greatful!
Relevant code below (just copy n' paste to a .html file):
See attached image for more info on divs.
The UL mentioned that doesn't ignore margin/padding is #contactform ul (though its margin is set to 0 below).
The #contactform fieldset has a top-margin set to 40px. This is totally ignored. Same if margin is set on other elements within the footerbg div.
<!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>Untitled Document</title>
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<style type="text/css">
#bg {
/* Set rules to fill background */
min-height: 100%; /*keeps filling the browser window vertically*/
min-width: 1280px; /*width of the image so that the image never gets smaller than it actually is.*/
/* Set up proportionate scaling */
width: 100%; /*keeps filling the browser window horizontally*/
height: auto;
/* Set up positioning */
position: absolute;
top: 0;
left: 0;
z-index:-2; /*Makes sure the image stays behind every element*/
}
/*media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.*/
@media screen and (max-width: 1280px) { /* Specific to this particular image */
#bg {
left: 50%;
margin-left: -640px; /* 50% of image width */
}
}
* { margin:0;
padding:0;
}
body { overflow-x:hidden; /*To prevent scroolbars caused by background*/
}
#headerbg { background:url(images/headerbg.png) repeat-x;
width:100%;
height:183px;
}
#header { width:1000px;
height:183px;
margin:0 auto;
}
#logo { font-family:VegurRegular;
font-size:60px;
margin:10px 15px 0 0;
color:#fff;
text-transform:uppercase;
float:right;
}
#logobold { font-family:VegurBold;
color:#48c9ff;
}
#smoky { background:url(images/smoky.png) no-repeat;
margin:-220px 0 0 -280px;
width:642px;
height:677px;
z-index:-1;
position:absolute;
}
#featured { background:url(images/playershadow.png) bottom left no-repeat;
/*width:778px;*/
height:370px;/*height:315px; - current height to place background shadow in right place*/
margin:20px 0 0 -30px;
float:left;
}
#playershadow { width:800px;
height: 86px;
margin:0px 0 0 0;
z-index:0;
}
#container { width:1000px;
margin:0 auto;
}
#footerbg { background:url(images/footerbg.png) repeat-x;
width:100%;
height:331px;
clear:both;
}
#footercontent {width:1000px;
height:244px;
margin:40px auto;
}
#footerinfo { width:1000px;
height:53px;
margin:0 auto;
}
#contactform { width:288px;
border:none;
margin:40px 0 0 0;
}
#contactform ul {margin:0 0 0 0;}
#contactform li {list-style:none;
margin:4px 0 4px 0;
}
#contactform label {
width:65px;
float:left;
}
#contactform #e-mail {
background:url(images/emailbg.jpg) no-repeat;
width:116px; /*Real width:116px;*/
height:27px;
border:none;
line-height:27px;
padding:0 0 0 3px;
color:#fff;
}
#contactform #besked {
background:url(images/beskedbg.jpg) no-repeat;
width:217px;
height:96px;
border:none;
padding:3px;
color:#fff;
}
#contactform #sendbtn {
background:url(images/sendbtnbg.png) no-repeat;
width:98px;
margin:10px auto;
display:block;
border:none;
text-indent:-9999px;
}
#mainmenu { float:right;}
#mainmenu li { background: url(images/navbg-right.png) bottom right no-repeat;
height:44px;
margin:0 11px 0 11px;
list-style:none;
float:left;
font-family:VegurBold;
font-size:20px;
text-transform:uppercase;
}
#mainmenu li a {background:url(images/navbg-left.png) bottom left no-repeat;
height:36px; /*Real height:44px*/
margin-left:-5px; /*To make sure left background doesn't overlap main button bg*/
display:block;
text-decoration:none;
color:#fff;
padding:8px 8px 0 8px;
}
#mainmenu .regularnumb {
font-family:VegurRegular;
font-size:17px;
}
#mainmenu .regular {
font-family:VegurRegular;
font-size:10px;
text-align:right;
display:block; /*Necessary to make the text-align property work*/
margin-top:-3px; /*To drag close to menu text*/
}
h1 { font-family:NewRegular;
text-transform:uppercase;
margin:40px 0 0 300px ;
font-size:38px;
color:#000;
}
h1 #teaserthin { font-family:VegurRegular;
font-size:38px;
}
h1 .teaserfix { font-family:VegurBold;
}
h2 { margin:0 0 10px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#000;
}
p { font-family:VegurRegular;
}
.column { width:340px;
float:left;
}
a { text-decoration:none;}
#mainmenu li:hover {background-position:top right;}
#mainmenu a:hover {background-position:top left;
}
/*------SLIDER BEGIN ------*/
/*Slides CSS and images*/
#fragment-1 {
background:url(images/image1.jpg) no-repeat;
background-size:100%;
}
#fragment-2 {
background:url(images/image2.jpg) no-repeat;
background-size:100%;
}
#fragment-3 {
background:url(images/image3.jpg) no-repeat;
background-size:100%;
}
#fragment-4 {
background:url(images/image4.jpg) no-repeat;
background-size:100%;
}
#fragment-5 {
background:url(images/image5.jpg) no-repeat;
background-size:100%;
}
/*Slides Menu CSS*/
#nav-fragment-1 {
width:297px;
background: url(images/pink.png) no-repeat;
}
#nav-fragment-2 {
width:201px;
background: url(images/blue.png) no-repeat;
}
#nav-fragment-3 {
width:162px;
background: url(images/red.png) no-repeat;
}
#nav-fragment-4 {
width:227px;
background: url(images/yellow.png) no-repeat;
}
#nav-fragment-5 {
width:145px;
background: url(images/green.png) no-repeat;
}
.ui-tabs-nav-item a:hover, .ui-tabs-nav li.ui-tabs-selected a {
background: url(images/undermenubg.jpg) no-repeat;
border: solid 1px #dcdede;
color:#000;
}
.ui-tabs-nav{
width:300px;
margin:15px 0 0 0;
list-style:none;
float:left;
}
.ui-tabs-nav li{
height:42px;
text-transform: uppercase;
font-family:VegurBold;
font-weight: bold;
font-size:16px;
line-height:20px;
color:#666;
margin:0 7px 0 0;
}
.ui-tabs-nav li span{
margin-left:20px;
}
.ui-tabs-nav li a{
height:30px;
margin-top:4px;
padding-top:12px;
display:block;
color:#fff;
text-decoration:none;
}
.ui-tabs-panel{
width:670px;
height:300px;
float:left;
border:5px solid #fff;
margin:0 0 0 50px;
}
.ui-tabs-hide{
display:none;
}
/*------SLIDER END ------*/
</style>
</head>
<body>
<div id="headerbg">
<div id="header">
<a href="#"><span id="logo"><span id="logobold">Logo</span>Morelogo</span></a>
<ul id="mainmenu">
<li id="produkter"><a href="#"><span class="regularnumb">01</span> lalala<br/> <span class="regular">lalala</span></a></li>
<li id="referencer"><a href="#"><span class="regularnumb">02</span> lalalar<br/><span class="regular">lalala</span></a></li>
<li id="omos"><a href="#"><span class="regularnumb">03</span> lalala<br/><span class="regular">lalala</span></a></li>
<li id="kontakt"><a href="#"><span class="regularnumb">04</span> lalala<br/><span class="regular">lalala</span></a></li>
</ul>
</div>
</div>
<div id="container">
<div id="smoky"></div>
<h1><span id="teaserthin">lala</span> lala og [--] til lala,<br/> iv<span class="teaserfix">ę</span>rks<span class="teaserfix">ę</span>ttere og lalalalalala</h1>
<div id="featured">
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel"></div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide"></div>
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span> Pręsentationsvideo</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>WEBDESIGN</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>WEBSHOP</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Kampagnesite</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><span>Backend</span></a></li>
</ul>
</div>
<div class="column">
<h2>Komplet hjemmeside med lalalalallalala</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis ligula, sed luctus mi. Praesent velit tellus, dapibus vel vulputate quis, cursus et turpis. Sed volutpat facilisis ligula dapibus luctus. Praesent elit lorem, pellentesque vestibulum posuere a, sollicitudin dapibus neque. Suspendisse et ultrices est. Nulla arcu magna, eleifend non aliquam vitae, bibendum in magna. Proin ultricies ante in mauris aliquam vitae elementum mi aliquet. Donec elementum, lacus eu placerat porta, nulla diam ornare sapien, vitae ornare tellus purus ac mi. Morbi hendrerit nunc nunc, in porttitor purus. Nam eleifend lorem a justo gravida ut ornare diam dignissim. Suspendisse vitae neque est, eu porta turpis. In fringilla, erat ut pretium ultrices, mi nisl ultricies quam, in adipiscing odio elit at sapien. Aenean consequat lobortis pretium.</p>
</div>
<div class="column">
<h2>Komplet hjemmeside med lalalalallalala</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis ligula, sed luctus mi. Praesent velit tellus, dapibus vel vulputate quis, cursus et turpis. Sed volutpat facilisis ligula dapibus luctus. Praesent elit lorem, pellentesque vestibulum posuere a, sollicitudin dapibus neque. Suspendisse et ultrices est. Nulla arcu magna, eleifend non aliquam vitae, bibendum in magna. Proin ultricies ante in mauris aliquam vitae elementum mi aliquet. Donec elementum, lacus eu placerat porta, nulla diam ornare sapien, vitae ornare tellus purus ac mi. Morbi hendrerit nunc nunc, in porttitor purus. Nam eleifend lorem a justo gravida ut ornare diam dignissim. Suspendisse vitae neque est, eu porta turpis. In fringilla, erat ut pretium ultrices, mi nisl ultricies quam, in adipiscing odio elit at sapien. Aenean consequat lobortis pretium.</p>
</div>
</div>
<div id="footerbg">
<div id="footercontent">
<fieldset id="contactform">
<ul>
<li>
<label for="e-mail">e-mail:</label>
<input type="text" id="e-mail" />
</li>
<li>
<label for="besked">besked:</label>
<textarea id="besked" ></textarea>
</li>
<li><input type="submit" id="sendbtn" /></li>
</ul>
</fieldset>
aaa
</div>
<div id="footerinfo">
info
</div>
</div>
<img src="images/bodybg.jpg" alt="" id="bg" />
</body>
</html>
All elements in my footer simply ignores padding and margin set on it's containing divs and elements (except for one ul). I can't seem to fint what's causing the bug, so if anybody could kick in and maybe give a hint I'd be really greatful!
Relevant code below (just copy n' paste to a .html file):
See attached image for more info on divs.
The UL mentioned that doesn't ignore margin/padding is #contactform ul (though its margin is set to 0 below).
The #contactform fieldset has a top-margin set to 40px. This is totally ignored. Same if margin is set on other elements within the footerbg div.
<!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>Untitled Document</title>
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<style type="text/css">
#bg {
/* Set rules to fill background */
min-height: 100%; /*keeps filling the browser window vertically*/
min-width: 1280px; /*width of the image so that the image never gets smaller than it actually is.*/
/* Set up proportionate scaling */
width: 100%; /*keeps filling the browser window horizontally*/
height: auto;
/* Set up positioning */
position: absolute;
top: 0;
left: 0;
z-index:-2; /*Makes sure the image stays behind every element*/
}
/*media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.*/
@media screen and (max-width: 1280px) { /* Specific to this particular image */
#bg {
left: 50%;
margin-left: -640px; /* 50% of image width */
}
}
* { margin:0;
padding:0;
}
body { overflow-x:hidden; /*To prevent scroolbars caused by background*/
}
#headerbg { background:url(images/headerbg.png) repeat-x;
width:100%;
height:183px;
}
#header { width:1000px;
height:183px;
margin:0 auto;
}
#logo { font-family:VegurRegular;
font-size:60px;
margin:10px 15px 0 0;
color:#fff;
text-transform:uppercase;
float:right;
}
#logobold { font-family:VegurBold;
color:#48c9ff;
}
#smoky { background:url(images/smoky.png) no-repeat;
margin:-220px 0 0 -280px;
width:642px;
height:677px;
z-index:-1;
position:absolute;
}
#featured { background:url(images/playershadow.png) bottom left no-repeat;
/*width:778px;*/
height:370px;/*height:315px; - current height to place background shadow in right place*/
margin:20px 0 0 -30px;
float:left;
}
#playershadow { width:800px;
height: 86px;
margin:0px 0 0 0;
z-index:0;
}
#container { width:1000px;
margin:0 auto;
}
#footerbg { background:url(images/footerbg.png) repeat-x;
width:100%;
height:331px;
clear:both;
}
#footercontent {width:1000px;
height:244px;
margin:40px auto;
}
#footerinfo { width:1000px;
height:53px;
margin:0 auto;
}
#contactform { width:288px;
border:none;
margin:40px 0 0 0;
}
#contactform ul {margin:0 0 0 0;}
#contactform li {list-style:none;
margin:4px 0 4px 0;
}
#contactform label {
width:65px;
float:left;
}
#contactform #e-mail {
background:url(images/emailbg.jpg) no-repeat;
width:116px; /*Real width:116px;*/
height:27px;
border:none;
line-height:27px;
padding:0 0 0 3px;
color:#fff;
}
#contactform #besked {
background:url(images/beskedbg.jpg) no-repeat;
width:217px;
height:96px;
border:none;
padding:3px;
color:#fff;
}
#contactform #sendbtn {
background:url(images/sendbtnbg.png) no-repeat;
width:98px;
margin:10px auto;
display:block;
border:none;
text-indent:-9999px;
}
#mainmenu { float:right;}
#mainmenu li { background: url(images/navbg-right.png) bottom right no-repeat;
height:44px;
margin:0 11px 0 11px;
list-style:none;
float:left;
font-family:VegurBold;
font-size:20px;
text-transform:uppercase;
}
#mainmenu li a {background:url(images/navbg-left.png) bottom left no-repeat;
height:36px; /*Real height:44px*/
margin-left:-5px; /*To make sure left background doesn't overlap main button bg*/
display:block;
text-decoration:none;
color:#fff;
padding:8px 8px 0 8px;
}
#mainmenu .regularnumb {
font-family:VegurRegular;
font-size:17px;
}
#mainmenu .regular {
font-family:VegurRegular;
font-size:10px;
text-align:right;
display:block; /*Necessary to make the text-align property work*/
margin-top:-3px; /*To drag close to menu text*/
}
h1 { font-family:NewRegular;
text-transform:uppercase;
margin:40px 0 0 300px ;
font-size:38px;
color:#000;
}
h1 #teaserthin { font-family:VegurRegular;
font-size:38px;
}
h1 .teaserfix { font-family:VegurBold;
}
h2 { margin:0 0 10px 0;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#000;
}
p { font-family:VegurRegular;
}
.column { width:340px;
float:left;
}
a { text-decoration:none;}
#mainmenu li:hover {background-position:top right;}
#mainmenu a:hover {background-position:top left;
}
/*------SLIDER BEGIN ------*/
/*Slides CSS and images*/
#fragment-1 {
background:url(images/image1.jpg) no-repeat;
background-size:100%;
}
#fragment-2 {
background:url(images/image2.jpg) no-repeat;
background-size:100%;
}
#fragment-3 {
background:url(images/image3.jpg) no-repeat;
background-size:100%;
}
#fragment-4 {
background:url(images/image4.jpg) no-repeat;
background-size:100%;
}
#fragment-5 {
background:url(images/image5.jpg) no-repeat;
background-size:100%;
}
/*Slides Menu CSS*/
#nav-fragment-1 {
width:297px;
background: url(images/pink.png) no-repeat;
}
#nav-fragment-2 {
width:201px;
background: url(images/blue.png) no-repeat;
}
#nav-fragment-3 {
width:162px;
background: url(images/red.png) no-repeat;
}
#nav-fragment-4 {
width:227px;
background: url(images/yellow.png) no-repeat;
}
#nav-fragment-5 {
width:145px;
background: url(images/green.png) no-repeat;
}
.ui-tabs-nav-item a:hover, .ui-tabs-nav li.ui-tabs-selected a {
background: url(images/undermenubg.jpg) no-repeat;
border: solid 1px #dcdede;
color:#000;
}
.ui-tabs-nav{
width:300px;
margin:15px 0 0 0;
list-style:none;
float:left;
}
.ui-tabs-nav li{
height:42px;
text-transform: uppercase;
font-family:VegurBold;
font-weight: bold;
font-size:16px;
line-height:20px;
color:#666;
margin:0 7px 0 0;
}
.ui-tabs-nav li span{
margin-left:20px;
}
.ui-tabs-nav li a{
height:30px;
margin-top:4px;
padding-top:12px;
display:block;
color:#fff;
text-decoration:none;
}
.ui-tabs-panel{
width:670px;
height:300px;
float:left;
border:5px solid #fff;
margin:0 0 0 50px;
}
.ui-tabs-hide{
display:none;
}
/*------SLIDER END ------*/
</style>
</head>
<body>
<div id="headerbg">
<div id="header">
<a href="#"><span id="logo"><span id="logobold">Logo</span>Morelogo</span></a>
<ul id="mainmenu">
<li id="produkter"><a href="#"><span class="regularnumb">01</span> lalala<br/> <span class="regular">lalala</span></a></li>
<li id="referencer"><a href="#"><span class="regularnumb">02</span> lalalar<br/><span class="regular">lalala</span></a></li>
<li id="omos"><a href="#"><span class="regularnumb">03</span> lalala<br/><span class="regular">lalala</span></a></li>
<li id="kontakt"><a href="#"><span class="regularnumb">04</span> lalala<br/><span class="regular">lalala</span></a></li>
</ul>
</div>
</div>
<div id="container">
<div id="smoky"></div>
<h1><span id="teaserthin">lala</span> lala og [--] til lala,<br/> iv<span class="teaserfix">ę</span>rks<span class="teaserfix">ę</span>ttere og lalalalalala</h1>
<div id="featured">
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel"></div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide"></div>
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span> Pręsentationsvideo</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>WEBDESIGN</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>WEBSHOP</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Kampagnesite</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><span>Backend</span></a></li>
</ul>
</div>
<div class="column">
<h2>Komplet hjemmeside med lalalalallalala</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis ligula, sed luctus mi. Praesent velit tellus, dapibus vel vulputate quis, cursus et turpis. Sed volutpat facilisis ligula dapibus luctus. Praesent elit lorem, pellentesque vestibulum posuere a, sollicitudin dapibus neque. Suspendisse et ultrices est. Nulla arcu magna, eleifend non aliquam vitae, bibendum in magna. Proin ultricies ante in mauris aliquam vitae elementum mi aliquet. Donec elementum, lacus eu placerat porta, nulla diam ornare sapien, vitae ornare tellus purus ac mi. Morbi hendrerit nunc nunc, in porttitor purus. Nam eleifend lorem a justo gravida ut ornare diam dignissim. Suspendisse vitae neque est, eu porta turpis. In fringilla, erat ut pretium ultrices, mi nisl ultricies quam, in adipiscing odio elit at sapien. Aenean consequat lobortis pretium.</p>
</div>
<div class="column">
<h2>Komplet hjemmeside med lalalalallalala</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis ligula, sed luctus mi. Praesent velit tellus, dapibus vel vulputate quis, cursus et turpis. Sed volutpat facilisis ligula dapibus luctus. Praesent elit lorem, pellentesque vestibulum posuere a, sollicitudin dapibus neque. Suspendisse et ultrices est. Nulla arcu magna, eleifend non aliquam vitae, bibendum in magna. Proin ultricies ante in mauris aliquam vitae elementum mi aliquet. Donec elementum, lacus eu placerat porta, nulla diam ornare sapien, vitae ornare tellus purus ac mi. Morbi hendrerit nunc nunc, in porttitor purus. Nam eleifend lorem a justo gravida ut ornare diam dignissim. Suspendisse vitae neque est, eu porta turpis. In fringilla, erat ut pretium ultrices, mi nisl ultricies quam, in adipiscing odio elit at sapien. Aenean consequat lobortis pretium.</p>
</div>
</div>
<div id="footerbg">
<div id="footercontent">
<fieldset id="contactform">
<ul>
<li>
<label for="e-mail">e-mail:</label>
<input type="text" id="e-mail" />
</li>
<li>
<label for="besked">besked:</label>
<textarea id="besked" ></textarea>
</li>
<li><input type="submit" id="sendbtn" /></li>
</ul>
</fieldset>
aaa
</div>
<div id="footerinfo">
info
</div>
</div>
<img src="images/bodybg.jpg" alt="" id="bg" />
</body>
</html>