Float problem (virker sjov nok IE, men ikke FF)
HejEr der nogen som kan svar på hvorfor det her ser fint ud i IE og ikke FireFox (det føles som den omvendte verden!).
Billederne skal være til venstre og tekst skal fylde helt ud til højre (stregen under h1 skal gå helt ud til contentWrapper'en.)
HTML doc kode:
<!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>TEST</title>
<style type="text/css">
<!--
/* START -- Default */
*{
margin:0;
padding:0;
border: 0;
}
html, body{
background: url(../images/tape_bg.jpg) repeat;
font-family:Arial, Helvetica, sans-serif;
color:#000;
height: 100%;
}
p {
font-size:10px;
line-height: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
margin-bottom: 8px;
border-bottom: #FFFFFF 1px solid;
padding-bottom: 4px;
font-size: 30px;
line-height: 32px;
}
#wrapper{
margin:0px;
height:100%;
}
/* END -- Default */
/* START -- Header */
#header {
height: 260px;
background-color:#000000;
padding-left: 20px;
}
#menu {
clear:left;
width: 960px;
height: 50px;
}
ul li {
float:left;
list-style:none;
margin-right: 10px;
}
ul li a {
color:#FFFFFF;
font-size: 40px;
line-height: 40px;
text-decoration:none;
text-transform: uppercase;
font-weight:bold;
display:block;
padding: 4px;
}
ul li a:hover {
background-color:#FFFFFF;
color:#000000;
}
/* END -- Header */
/* START -- Contens */
#wrapperContent {
width: 920px;
margin: 20px 0 20px 20px;
border:#000000 1px solid;
}
#wrapperContent img {
border:#000000 1px solid;
padding: 5px;
background-color:#FFFFFF;
margin: 0 25px 25px 0;
float:left;
}
.mainPost {
display:block;
}
.mainPostText {
float:left;
margin-right: 0;
}
/* END -- Content */
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="menu">
<ul>
<li><a href="?p=home">home</a></li>
<li><a href="?p=contact">contact</a></li>
</ul>
</div>
<!-- END MENU -->
</div>
<!-- END HEADER -->
<div id="wrapperContent">
<div class="main">
<div class="mainPost">
<img src="test2.JPG" width="600" height="444" />
<div class="mainPostText">
<h1>TEST</h1>
<p>TEST</p>
</div>
</div><span class="clearfix"></span><div class="mainPost">
<img src="test.JPG" width="250" height="250" />
<div class="mainPostText">
<h1>TEST</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id diam sed leo semper rhoncus. Aliquam turpis pede, lacinia quis, ultricies et, tincidunt non, tellus.
Curabitur sagittis rutrum enim. Etiam ac dui. Suspendisse magna. Maecenas condimentum. Nullam a neque et dolor feugiat tincidunt. Curabitur mollis mi laoreet nunc. Maecenas eget dolor.
Phasellus orci. Quisque id ipsum sed mi egestas tincidunt. Mauris ultricies pharetra quam. Quisque luctus nibh. Curabitur sem neque, dignissim non, feugiat nec, consequat ac, augue. Phasellus aliquam tortor nec elit. Sed mi orci, sagittis sed, tincidunt eu, eleifend ac, arcu. </p>
</div>
</div><span class="clearfix"></span> </div>
<!-- END MAIN -->
</div>
<!-- END WRAPPER CONTENT -->
</body>
</html>
