Forum Moderators: not2easy
<div class="blocktitle">Title</div> //no border & background color
<div class="block">
stuff
stuff
stuff
</div>
<div class="blocktitle">Title</div> //yes border & background color
<div class="block">
stuff
stuff
stuff
</div>
<div class="blocktitle">Title</div> //yes border & background color
<div class="block">
stuff
stuff
stuff
</div>
etc...
.block {
padding: 5px;
margin: 0px;
text-align: left;
}
.blocktitle {
margin: 0px;
padding: 4px;
background-color: #BDE4C9;
text-align: center;
border: 1px solid #003333;
font-family: verdana, sans-serif;
font-weight: bold;
color: #003333;
line-height: 100%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >> no break
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>stuff</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="presentation.css" />
<link rel="stylesheet" type="text/css" href="elements.css" /></head>
<body><div id="main" class="show-all">
<div id="header"><img src="top.jpg" alt="Advanced Web Design" /></div>
<div id="columns">
<div class="cols-wrapper">
<div class="float-wrapper">
<div id="col-a">
<div class="main-content">
stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
</div>
</div>
<div id="col-b" class="sidecol">
<div class="box">
<div class="blocktitle">Topics</div>
<div class="block">
stuff
stuff
stuff
stuff
stuff
</div>
<div class="blocktitle">More</div>
<div class="block">
stuff
stuff
stuff
stuff
</div>
</div>
</div>
</div>
<div id="col-c" class="sidecol">
<div class="box">
stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
</div>
</div>
<div class="clear" id="em"></div>
</div>
</div>
<div id="footer" class="clear">
stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
</div>
</div>
</body>
</html>
When I take out the layout stylesheet it seems to work. I don't see a problem but here it is. Again, part of the template. Worked fine at first.
UPDATE: When I take out the line position: relative from the .sidecol class, the headers appear correctly.
body {
margin: 0px;
padding: 0px;
font-size: 100.1%;
}
#col-a {
float: right;
width: 100%;
}
#col-a[id] {
margin-left: -1px;
}
#col-b {
float: left;
margin-left: -12em;
display: inline;
z-index: 10;
}
#col-b[id] {
margin-right: 1px;
}
#col-c {
float: right;
margin-right: -12em;
z-index: 11;
display: inline;
}
#col-c[id] {
margin-left: 1px;
}
.show-all #columns {
padding: 0 12em;
}
.hide-left #columns {
padding: 0 12em 0 0;
}
.hide-right #columns {
padding: 0 0 0 12em;
}
.cols-wrapper {
width: 100%;
}
.cols-wrapper[class] {
padding-bottom: 0.1px;
}
.float-wrapper {
float: left;
width: 100%;
position: relative;
z-index: 0;
}
.float-wrapper[class] {
margin-right: -1px;
}
.sidecol {
position: relative;
overflow: hidden;
}
.box, .main-content {
margin: 0 1em;
}
.clear {
clear: both;
}
.none {
display: none;
}
<div class="dummy"> </div>
and set the class .dummy to:
.dummy {
font-size: .1em;
}
and it clears up the problem.
