what a strugle CSS can be,
I am for fun building a site but can notunderstand where the prblem is.
The "wrapper" does not wrap in FF, it does in IE7. My IE6 machine broke down so could not verify IE6.
But very curious to see if someone spots the error?
My CSS:
*{margin: 0; padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", Verdana, sans-serif;
text-decoration: none; font-size: 14px;
}
body {display: table;
background-color:#ffffff;
margin: auto;
}
#wrapper {
background-color: transparent;
width: 805px;
color: #000000;
margin: 0 auto;
padding:0;
position: relative;
display: block;
}
#topfc {
height: 20px;
width: 805px;
background-color: #fff;
position: relative;
}
#top {
height: 150px;
width: 803px;
background-image: url(../../images/mmc/images/topbg.jpg);
border-right: solid 1px #cccccc;
border-left: solid 1px #cccccc;
border-right: solid 1px #cccccc;
border-top: solid 1px #cccccc;
}
#navmain {
height: 22px;
width: 800px;
border-right: solid 1px #cccccc;
border-left: solid 1px #cccccc;
}
#leftfc {
height: 100%;
width: 20px;
position: relative;
float: left;
}
#midfc {
height: 80%;
width: 20px;
position: relative;
float: left;
}
#contentwrapper {
clear:both;
height: 100%;
width: 803px;
border-right: solid 1px #cccccc;
border-left: solid 1px #cccccc;
position: relative;
border-bottom: solid 1px #cccccc;
}
.breadcrumbs {
height: 30px;
width: 800px;
float: left;
background : #fff;
border-right: solid 1px #cccccc;
border-left: solid 1px #cccccc;
font-size: 3px;
padding-top: 5px;
padding-left: 5px;
}
#maincontent {
display: block;
float: left;
position:relative;
width: 540px;
height: 100%;
padding-top: 20px;
}
#rightfc {
height: 100%;
width: 20px;
position: relative;
float: right;
}
#news {
width:220px;
height: 100%;
position: relative;
float: right;
background-color: transparent;
padding-top: 10px;
font-size: 10px;
}
#footerfc {
height: 20px;
width: 805px;
border: solid 0px #cccccc;
position: relative;
float: left;
}
#footer {
width: 805px;
height: 30px;
position: relative;
float: left;
text-align: center;
padding-top:23px;
color: #989594;
clear:both;
}
My 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" xml:lang="en" lang="en">
<head>
<base href="[(site_url)]" />
<title>Velocette Demo</title>
<link href="assets/templates/mmc/common.css" rel="stylesheet" type="text/css" />
<link href="assets/templates/mmc/menu.css" rel="stylesheet" type="text/css" />
<script src="[(base_url)]/manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="[(base_url)]/manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="topfc"></div>
<div id="top"></div>
<div id="navmain">[[Wayfinder? &startId=`23` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]] </div>
<div id="contentwrapper">cont wrapper
<div id="leftfc"></div>
<div id="midfc"></div>
<div id="maincontent">[*#content*]</div>
<div id="rightfc"></div>
<div id="news">wat doe jij nou hier</div>
</div>
<div id="footerfc"></div>
<div id="footer">ik hang een beetje te footeren</div>
</div>
</body>
</html>
I am using *fc" div´s as spacers (rightfc etc), so I can avoid margins. Maybe not a brilliant idea,just a test.
Check page on:
http://www.smashit.it/index.php?id=43
Hope someone spots the error,
best, fr.
MODX Staff