Enkida
07-13-2006, 10:14 AM
Hi all. I'm sort of just getting into CSS, and have been using Stu Nichol's 'play' site as a guide for most of my attempts.
I've run into a problem with a div tag on one of the pages I'm making that I can't quite figure out. Some background: the page is hosted on SmackJeeves, which is a web-comic site; that is, I *think* it uses php, but basically you have to enter all of your code into a 'template' that then translates into a web page. This shouldn't be affecting the CSS at all, I don't think. the SJ site also uses an integrated phpbb-style board to post the 'news' comments; again, I don't know if that will have an effect on the CSS but I don't think it should.
So, the problem: http://enkida.smackjeeves.com/
If you scroll down, notice that the 'content' box's borders just sort of disappear halfway down the page. I have no idea why; I've been playing with the height of the div creating those borders in both pixels and percentiles, and nothing seems to change it.
Here's the stylesheet for that page:
<style type="text/css">
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
font-size:80%; /*set default font size */
font-family:tahoma, verdana, arial, sans-serif; /* set default font */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
}
a, a:link, a:visited { color: #666; font-style: normal; text-decoration: none; }
a:hover { color: #f00; font-style: normal; text-decoration: none;}
#content {
display:block; /* set up as a block */
height:100%; /* set height to full page */
max-height:100%;
overflow:auto; /* add scroll bars as required */
padding-left:143px; /* pad left to avoid navigation div if required */
position:relative; /* set up relative positioning so that z-index will work */
z-index:3; /* allocate a suitable z-index */
word-wrap:break-word;
}
#content p {padding:5px; text-indent: 0.6cm;}
.bold {font-size:1.2em; font-weight:bold;}
#head {position:absolute; margin:0; padding:0; top:0; right:18px; display:block; width:100%; height:100px; background-color:#fff; z-index:5; color:#000;}
#foot {position:absolute; margin:0; padding:0; bottom:0; right:18px; display:block; width:100%; height:20px; background:url(http://www.eccentrik.org/smacktalk/stfoot.png); background-position: bottom left; background-repeat:no-repeat; background-color:#fff; background-attachment:fixed; color:#000; text-align:center; font-size:0.8em; line-height:8px; z-index:4;}
.pad1 {display:block; width:18px; height:100px; float:left;background-color:#fff;}
.pad2 {display:block; height:100px;background-color:#fff;}
.blackline {
display:block;
text-align:justify;
background-color: #fff;
border-left: 5px solid #000;
border-right: 5px solid #000;
position:relative;
padding:5px;
margin:0;
font-weight:normal;
width:611px;
height:100%;
}
#menu {
position:fixed;
display:block;
top:100px;
left:17px;
width:105px;
height:1000px;
background-color:#fff;
border-left: 5px solid #000;
border-right: 5px solid #000;
margin:0 0 0 0px;
padding:5px 0 5px 5px;
z-index:20;
}
* html #menu {position:absolute;}
hr#short { color:#000; background-color:#000; border:0; margin-left:-5px; line-height:5px; height: 5px; width:115px; padding:0;}
}
</style>
The div that's creating the problem is .blackline, though maybe #content could also be causing the problem. I don't know! :-(
Here's the XHTML that calls it. The stuff in curly brackets is the SJ code; there's nothing there that should be making the page freak out. Right now the {CONTENT} portion is filled with the integrated phpBB code. However, when I had that section set to plain old text separated by <p> tags and nothing else, it was still having the same 'disappearing div' problem.
<body>
<div id="head"><div class="pad1"></div><img src="http://www.eccentrik.org/smacktalk/sthead.png" width="780" height="100" alt="Smacktalk" title="Smacktalk" />
<!-- {GOOGLE_AD_120x600} is knocking the header to the bottom of the page -->
</div>
<div id="content">
<div class="pad2"></div>
<div id="menu">
<div align="center"><b>SmackTalk</b></div>
<hr id="short">
<a href="latestissue" title="Index">Index</a><br />
<a href="faq" title="FAQ">FAQ</a><br />
<a href="staffpage" title="Staff">Staff</a><br />
<a href="index_archive" title="Archives">Archives</a><br />
<a href="http://www.smackjeeves.com" title="Smack Jeeves">Smack Jeeves</a><br />
<hr id="short">
<div align="center"><b>Services</b></div>
<hr id="short">
<a href="how_to_get_reviewed" title="Get Reviewed">Get Reviewed</a><br />
<a href="how_to_get_interviewed" title="Get Interviewed">Get Interviewed</a><br />
<a href="how_to_advertise" title="Advertise">Advertise</a><br />
<hr id="short">
<div align="center"><b>Contact Us</b></div>
<hr id="short">
<a href="join_us" title="Join">How to Join</a><br />
<a href="staffpage" title="Email">Email</a><br />
<a href="http://cutething.net/forum/index.php" title="Forum">Forum</a><br />
</div>
<div class="blackline">{CONTENT}</div>
</div>
<div id="foot"><br />all content © 2006 SmackTalk and Respective Authors</div>
</body>
So.. can anyone help me figure out what's wrong? Thanks in advance :)
I've run into a problem with a div tag on one of the pages I'm making that I can't quite figure out. Some background: the page is hosted on SmackJeeves, which is a web-comic site; that is, I *think* it uses php, but basically you have to enter all of your code into a 'template' that then translates into a web page. This shouldn't be affecting the CSS at all, I don't think. the SJ site also uses an integrated phpbb-style board to post the 'news' comments; again, I don't know if that will have an effect on the CSS but I don't think it should.
So, the problem: http://enkida.smackjeeves.com/
If you scroll down, notice that the 'content' box's borders just sort of disappear halfway down the page. I have no idea why; I've been playing with the height of the div creating those borders in both pixels and percentiles, and nothing seems to change it.
Here's the stylesheet for that page:
<style type="text/css">
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
font-size:80%; /*set default font size */
font-family:tahoma, verdana, arial, sans-serif; /* set default font */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
}
a, a:link, a:visited { color: #666; font-style: normal; text-decoration: none; }
a:hover { color: #f00; font-style: normal; text-decoration: none;}
#content {
display:block; /* set up as a block */
height:100%; /* set height to full page */
max-height:100%;
overflow:auto; /* add scroll bars as required */
padding-left:143px; /* pad left to avoid navigation div if required */
position:relative; /* set up relative positioning so that z-index will work */
z-index:3; /* allocate a suitable z-index */
word-wrap:break-word;
}
#content p {padding:5px; text-indent: 0.6cm;}
.bold {font-size:1.2em; font-weight:bold;}
#head {position:absolute; margin:0; padding:0; top:0; right:18px; display:block; width:100%; height:100px; background-color:#fff; z-index:5; color:#000;}
#foot {position:absolute; margin:0; padding:0; bottom:0; right:18px; display:block; width:100%; height:20px; background:url(http://www.eccentrik.org/smacktalk/stfoot.png); background-position: bottom left; background-repeat:no-repeat; background-color:#fff; background-attachment:fixed; color:#000; text-align:center; font-size:0.8em; line-height:8px; z-index:4;}
.pad1 {display:block; width:18px; height:100px; float:left;background-color:#fff;}
.pad2 {display:block; height:100px;background-color:#fff;}
.blackline {
display:block;
text-align:justify;
background-color: #fff;
border-left: 5px solid #000;
border-right: 5px solid #000;
position:relative;
padding:5px;
margin:0;
font-weight:normal;
width:611px;
height:100%;
}
#menu {
position:fixed;
display:block;
top:100px;
left:17px;
width:105px;
height:1000px;
background-color:#fff;
border-left: 5px solid #000;
border-right: 5px solid #000;
margin:0 0 0 0px;
padding:5px 0 5px 5px;
z-index:20;
}
* html #menu {position:absolute;}
hr#short { color:#000; background-color:#000; border:0; margin-left:-5px; line-height:5px; height: 5px; width:115px; padding:0;}
}
</style>
The div that's creating the problem is .blackline, though maybe #content could also be causing the problem. I don't know! :-(
Here's the XHTML that calls it. The stuff in curly brackets is the SJ code; there's nothing there that should be making the page freak out. Right now the {CONTENT} portion is filled with the integrated phpBB code. However, when I had that section set to plain old text separated by <p> tags and nothing else, it was still having the same 'disappearing div' problem.
<body>
<div id="head"><div class="pad1"></div><img src="http://www.eccentrik.org/smacktalk/sthead.png" width="780" height="100" alt="Smacktalk" title="Smacktalk" />
<!-- {GOOGLE_AD_120x600} is knocking the header to the bottom of the page -->
</div>
<div id="content">
<div class="pad2"></div>
<div id="menu">
<div align="center"><b>SmackTalk</b></div>
<hr id="short">
<a href="latestissue" title="Index">Index</a><br />
<a href="faq" title="FAQ">FAQ</a><br />
<a href="staffpage" title="Staff">Staff</a><br />
<a href="index_archive" title="Archives">Archives</a><br />
<a href="http://www.smackjeeves.com" title="Smack Jeeves">Smack Jeeves</a><br />
<hr id="short">
<div align="center"><b>Services</b></div>
<hr id="short">
<a href="how_to_get_reviewed" title="Get Reviewed">Get Reviewed</a><br />
<a href="how_to_get_interviewed" title="Get Interviewed">Get Interviewed</a><br />
<a href="how_to_advertise" title="Advertise">Advertise</a><br />
<hr id="short">
<div align="center"><b>Contact Us</b></div>
<hr id="short">
<a href="join_us" title="Join">How to Join</a><br />
<a href="staffpage" title="Email">Email</a><br />
<a href="http://cutething.net/forum/index.php" title="Forum">Forum</a><br />
</div>
<div class="blackline">{CONTENT}</div>
</div>
<div id="foot"><br />all content © 2006 SmackTalk and Respective Authors</div>
</body>
So.. can anyone help me figure out what's wrong? Thanks in advance :)