FF, padding:
p {margin:0px;}
IE box hop:
(<div class="center">)
</div>
</div>
<div class="content_area">
...
</div>
Rettes til:
(<div class="center">)
</div>
<div class="content_area">
....
</div>
</div>
FF, border:
<div class="bottom_area"></div>
->
<div class="bottom_area"></div><div style="clear:both;height:0;overflow:hidden;"></div>
...
Eksempel, fra lokal test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Sportal - En del af vivaa.dk</title>
<meta name="generator" content="TSW WebCoder">
<link rel="stylesheet" type="text/css" href="1_files/styles.css"><style base="/test/css/" type="text/css">p {margin:0px;}
.center {
margin-left: auto;
margin-right: auto;
width: 800px;
}
.top {
width: 800px;
border: 1px solid #000;
height: 100px;
}
.top_menu {
width: 400px;
border: 1px dashed #000;
height: 25px;
text-align: right;
position: relative;
left: 399px;
top: 54px;
}
.middle {
width: 800px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.side_area {
width: 150px;
border-right: 1px dashed #000;
float: left;
position: relative;
}
.login_area {
width: 140px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #3399CC;
padding-top: 5px;
}
.small_title_bar {
width: 120px;
height: 15px;
font: 12px Verdana, Sans-serif;
margin-right: auto;
margin-left: auto;
background: #fff;
padding-left: 10px;
}
.login_contents {
width: 130px;
height: 125px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
background: #fff;
font: 12px Verdana, Sans-serif;
}
.annonce_area {
width: 140px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #3399CC;
padding-top: 5px;
}
.annonce_contents {
width: 130px;
height: 125px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
background: #fff;
font: 12px Verdana, Sans-serif;
}
.rss_area {
width: 140px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background: #3399CC;
padding-top: 5px;
}
.rss_contents {
width: 130px;
height: 125px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
background: #fff;
font: 12px Verdana, Sans-serif;
}
.content_area {
float: left;
width: 570px;
position: relative;
}
.welcome_area {
width: 600px;
background: #3399CC;
padding-bottom: 5px;
float: left;
}
.large_title_bar {
width: 590px;
height: 25px;
font: 16px Verdana, Sans-serif;
background: #fff;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
.large_content_area {
width: 590px;
background: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}</style></head><body>
<div class="center">
<div class="top">TOP
<div class="top_menu">TOP_MENU</div>
</div>
<div class="middle">
<div class="side_area">
<div class="login_area">
<div class="small_title_bar">Login</div>
<div class="login_contents"></div>
</div>
<div class="annonce_area">
<div class="small_title_bar">Annonce</div>
<div class="annonce_contents"></div>
</div>
<div class="rss_area">
<div class="small_title_bar">RSS Feed</div>
<div class="rss_contents"></div>
</div>
</div>
<div class="content_area">
<div class="welcome_area">
<div class="large_title_bar">Velkommen</div>
<div class="large_content_area">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc risus
quam, iaculis in, sodales vestibulum, interdum non, risus. Curabitur
faucibus rutrum lorem. Mauris nec mi non lacus imperdiet varius. Sed
odio. Aenean pretium justo. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Sed a dui id nunc
lobortis tristique. Etiam fringilla, elit ut ullamcorper interdum,
libero nisl rhoncus lorem, ut ornare libero orci a purus. In augue leo,
feugiat nec, fringilla sed, tempor non, risus. Aenean ipsum eros,
congue vel, lobortis in, mollis quis, diam. Phasellus nec elit. Vivamus
volutpat mattis urna. Phasellus luctus. Fusce magna neque, mollis ut,
blandit nec, iaculis ac, neque. Etiam quam. Pellentesque dictum
malesuada magna. Fusce et nisl. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. <p>Suspendisse ac est. Sed sit amet libero id arcu
venenatis
imperdiet. In nulla. Ut blandit commodo nulla. Nam mattis tempor odio.
Aliquam id dui. Mauris dui. Duis a mauris. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Vivamus ligula felis, hendrerit vel, dictum a, vehicula nonummy, dolor.</p>
</div>
</div>
<div class="news_area">
<div class="large_title_bar"></div>
</div>
</div>
<div class="bottom_area"></div><div style="clear:both;height:0;overflow:hidden;"></div>
</div>
</div>
</body></html>
Ny bruger
Nybegynder
Opret
Preview
