JILI all promotion.Claim Your Free 999 Pesos Bonus Today

(@mhensler)

Ok, so I’ve gotten my theme down to almost where I want it. I just have an issue with my content scrolling when there’s overflow in my blogcontent div. I have it set to 100% height, and overflow:visible, but when I do that, it’s below the footer if there’s an excess amount. I can avoid this by setting it to overflow:scroll, but I don’t really like having a scrollbar in the middle of the page. Can someone take a look at my code, and where I can fix this? I think I just need a second set of eyes on this one:

Here’s the site as it stands (the resources, and Tech 10 class page uses scroll bars right now).

The CSS:

@charset "utf-8";

/* CSS Document */

html, body {height:100%;}

body

   {

   margin: 0px 0px 0px;

   padding: 0px;

   text-align: center;

   background-color:#585858;

 color:#CCC;
 font-size:12px;
 font:Tahoma, Geneva, sans-serif;
   }

h1, h2, h3, ul, li, p, form

   {

   margin: 0px;

   padding: 0px;
    font:Tahoma, Geneva, sans-serif;

   }

hr

   {

   display: none;

   }

a{

   text-decoration:none;
   font-size:12px;
   color:#F90;

   }

a:hover{

   text-decoration:underline;
 font-size:12px;
   color:#F90;
   }

.space

   {

   clear: both;

   }

#page

   {

   margin: 0px auto;

   padding: 0;

   width: 842px;

   background-image:url(images/PNG/contentbg.png);

   background-repeat:repeat-y;
   height:100%;
   overflow:visible;
   font-family:Tahoma, Geneva, sans-serif;

   }

#header

   {

   background:#CCCCCC;

	height: 231px;

   width: 842px;

   text-align: center;

   background-image:url(images/PNG/header.png);

   padding-bottom:0px;

   }

#headerimg

   {

   margin: 0px;

   text-align: left;

   }

#top_nav

   {

   height: 45px;

   padding-left: 65px;

   padding-top:145px;

   text-align: left;

   }

 #top_nav ul

   {

   list-style: none;
   padding-right:0px;

   }

   #top_nav li

   {

   display: inline;

   padding:10px;
   padding-top:0px;

   }

   #top_nav li a:hover

   {

   }

#top_sidebar

   {

   color: #fff;

   font-weight: bold;

   height: 10px;

   padding-right: 155px;

   text-align: right;

   }

#content

   {

   float: none ;

   text-align: left;

   width:842px;
  height:100%;
  font:Tahoma, Geneva, sans-serif;

   }

.blogcontent, .widecolumn

   {

   float: left;

   padding: 10px 0px;

   width: 553px;

   background-image:url(images/PNG/postbg.png);

   background-repeat:repeat-y;
   height:100%;
   overflow:scroll;

   }

.blogcontent form

   {

   color: #fff;

   padding: 10px 50px 0px 0px;

   background-color:transparent;

   }

 .blogcontent input

   {

   background-color: transparent;

   border: 1px solid #F90;

   color: #fff;

   }

   .blogcontent #searchsubmit

   {
	   background-color:transparent;

   color: #CCC;

   font-weight: bold;

   padding: 2px;

   width:auto;

   border: 1px solid #F90;

 font: Tahoma, Geneva, sans-serif;

 overflow:visible;

   }

   .blogcontent h2

   {

   color: #fff;

   font: bold 18px Tahoma, Geneva, sans-serif;

   padding: 0px 50px 0px 90px;

   }

   .blogcontent h3

   {

   color: #fff;

   font: bold 12px Tahoma, Geneva, sans-serif;

   padding: 0px 50px 0px 0px;

   width:auto;

   }

   .blogcontent small a

   {

   font-size: 12px;

   padding: 0px 0px 0px 0px;
   color:#F90;

   }

   .blogcontent small {

	   font-size:12px;
	   color:#FFF;
   }

.post

   {

   text-align: left;

   padding:0px 20px 0px 35px;

   font:Tahoma, Geneva, sans-serif;
   font-size:12px;

   }

.post h2 a{
	padding:0px 0px 0px 0px;

   margin: 0px;

   font: Tahoma, Geneva, sans-serif;

   font-size:18px;

   color:#CCC;

   }

.post h2 a:hover{
	padding:0px 0px 0px 0px;

   margin: 0px;

   font: Tahoma, Geneva, sans-serif;

   font-size:18px;

   color:#F90;}

 .post h2

   {

   padding: 0px 0px 0px 0px;

   color:#fff;

   }

 .post .post_title

   {

   float: left;

   padding-left:25px;

   }

   .post_title h2, a

   {

   padding:0px 0px 0px 0px;

   margin: 0px;

   font: Tahoma, Geneva, sans-serif;

   font-size:18px;

   color:#F90;

   }

.post_title h2 {padding:0px 0px 0px 0px;

   margin: 0px;

   font: Tahoma, Geneva, sans-serif;

   font-size:18px;

   color:#CCC;}

   .post_title a

   {

   text-decoration: none;
   font-size:18px;
   font: Tahoma, Geneva, sans-serif;
    padding: 0px 0px 0px 0px;

   }

   .post_title a:hover

   {color:#CCC;
   text-decoration: underline;
   font-size:18px;
   font: Tahoma, Geneva, sans-serif;
    padding: 0px 0px 0px 0px;

   }

   .post_title small

   {color: #FFFFFF;

   font: normal 12px Tahoma, Geneva, sans-serif;

   }

   .post_title small a

   {

    color: #FFFFFF;

   font: normal 12px Tahoma, Geneva, sans-serif;

   padding: 0px;

   margin: 0px;

   }

   .post .postmetadata

   {

   float: right;

   height: 15px;

   padding: 0px;

   }

   .post p {

	   padding-left:25px;}

   .postmetadatatwo {

	  float: left;

   height: 15px;

   padding: 5px 0px 5px 15px;
   font: normal 12px Tahoma, Geneva, sans-serif;
   border-bottom:1px solid #F90;}

   .postmetadatatwo a {

	   text-decoration: none;

   font-size:12px;

   color:#F90;
   font: normal 12px Tahoma, Geneva, sans-serif;}

   .postmetadatatwo a:hover {

	     text-decoration: underline;

   font-size:12px;

   color:#CCC;
   font: normal 12px Tahoma, Geneva, sans-serif;}

   .postmetadata a

   {

   text-decoration: none;

   font-size:12px;

   color:#F90;
   font: normal 12px Tahoma, Geneva, sans-serif;

   }

   .postmetadata a:hover {
	   text-decoration: underline;

   font-size:12px;

   color:#CCC;
   font: normal 12px Tahoma, Geneva, sans-serif;

   }

   .postmetadata span

   {

   padding-left:5px;

   color:#F90;

   font: normal 12px Tahoma, Geneva, sans-serif;

   }

.entry

   {color: #F90;

   font: normal 12px Tahoma, Geneva, sans-serif;

   padding-bottom:25px;

   padding-top:5px;

   padding-right:5px;
   padding-left:35px;

   }

 .entry a

   {

   padding: 0px;

   margin: 0px;

   color:#F90;

   font: Tahoma, Geneva, sans-serif;

   font-size:12px;

   }

   .entry a:hover

   {

	   color:#CCC;
	   font-size:12px;
	   text-decoration:underline;

   }

   .entry blockquote

   {

   border: 2px dashed #F90;

   }

   .entry img

   {

   float: left;

   padding: 0px 20px 0px 0px;

   }

   .entry ul

   {padding-left:20px;

   }

   .entry li

   {

   }

   .entry ol li

   {

   list-style: decimal;

   } 

   .entry p

   {

   text-align: left;

   padding: 0px;
   padding-right:5px;
   font:Tahoma, Geneva, sans-serif;

   font-size:12px;

   color:#FFF;

   }

   .entry span

   {color:#F90;
   font-size:12px;

   }

#sidebar

   {

   float: left;

   padding: 0px 0px 0px 0px;

   text-align: left;

   width: 289px;

   background-image:url(images/PNG/sidebarbg.png);

   background-repeat:repeat-y;

   color:#CCC;

   font:Tahoma, Geneva, sans-serif;

   font-size:12px;

   }

   #sidebar a {

	   color:#F90;
	   font-size:12px;
	   font:Tahoma, Geneva, sans-serif;

   }

   #sidebar a:hover{

	   color:#F90;
	   font-size:12px;
	   font:Tahoma, Geneva, sans-serif;
	   text-decoration:underline;

   }

 .belowsidebar

 {width:289px;

 background-image:url(images/PNG/belowsidebarbg.png);
 background-repeat:repeat-y;
 float: left;

   padding: 0px 0px 0px 0px ;
   height:100%;

 }

   .sidebartop

   {

   float: left;

   padding: 0px 0px 0px 0px ;

   text-align: left;

   width: 289px;
   height:44px;

   background-image:url(images/PNG/sidebartoporange.png);

   }

 #sidebar ul

   {

   list-style: none;

   margin: 0px 0px 0px 0px; padding:0px 0px 0px 5px;

  font:Tahoma, Geneva, sans-serif;

   }

   #sidebar li

   {

   margin: 0px 10px 0px 45px;

   padding-right:10px;
    font:Tahoma, Geneva, sans-serif;

   }

   #sidebar li h2

   {

   margin: 0px;

   font-size:14px;
   font-family:Tahoma, Geneva, sans-serif;

   color:#FFF;
   padding-right:0px;

   }

 #sidebar li h3

   {

   margin: 0px;

   font-size:14px;

   font: Tahoma, Geneva, sans-serif;

   padding:0px;

   }

 #sidebar ul ul

   {

   list-style: none;

   margin: 0px;

   font-size:11px;

   font: normal Tahoma, Geneva, sans-serif;

   padding-bottom:5px;
   padding-top:5px;

   }

   #sidebar ul ul li

   {

   margin: 0px;

   font: normal 12px Tahoma, Geneva, sans-serif;

  padding:0px 0px 0px 15px;

     padding-bottom:2px;
   padding-top:2px;

   }

   #sidebar ul ul li a

   {font: normal 12px Tahoma, Geneva, sans-serif;

   text-decoration:none;

      padding-bottom:2px;
   padding-top:2px;

   }

   #sidebar ul ul li a:hover

   {text-decoration:underline;

   color:#CCC;

   }

.bottom_sidebar

   {

   float: right;

   height: 40px;

   width: 289px;

   background-image:url(images/PNG/sidebarbottomtwo.png);

   font:Tahoma, Geneva, sans-serif;

   font-size:12px;

   padding:0px 0px 0px 0px;}

#search

   { padding:0px 0px 0px 350px;

  }

 #search input

   {background-color:#F90;

   color:#000;

   font:Arial, Helvetica, sans-serif;

 }

#search #searchsubmit

   {

   background:#3c3c3c;
   border:1px solid #FF9900;
   font:Tahoma, Geneva, sans-serif;
   font-weight:500;
   color:#FFFFFF

}

.footer 

   {

   height: 50px;

   text-align: center;

   width: 842px;/*909*/

   background-image:url(images/PNG/bottomglowbar.png);

   position:relative;
   bottom:0px;
   padding-bottom:0px;
   font:Tahoma, Geneva, sans-serif;

   }

.footer a {color:#F90;
font-size:12px;
font:Tahoma, Geneva, sans-serif;
}

.footer a:hover {color:#CCC;
font-size:12px;
text-decoration:underline;
font:Tahoma, Geneva, sans-serif;}

 .footer .column1

   {

   background:#FF3333;

   float: left;

	width: 300px;
	text-align:center;

   }

   .column1 .bottom

   {

}

   .column1 a

   {

   text-decoration: none;

   }

   .footer .column2

   {

   background-color:#006699;

 float: left;
   width: 250px;

   }

   .column2 h2

   {

   }

   .column2 ul

   {

   list-style: none;

   }

   .column2 a

   {

   text-decoration: none;

   }

.clear {

  clear: both;

}

.footertext {color:#FF9900;
font:Tahoma, Geneva, sans-serif;
font-weight:600;
font-size:12px;

text-align:center;

}

.footertext a{

	color:#CCC;
	text-decoration:none;
	font-size:12px;
	font:Tahoma, Geneva, sans-serif;
}

.footertext a:hover{

	color:#CCC;
	text-decoration:underline;
	font-size:12px;
	font:Tahoma, Geneva, sans-serif;
}

.commentform{
	background-color:transparent;
	font:Tahoma, Geneva, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #F90;
	width:200px;
	}

.commentbox {

	background-color:transparent;
	font: Tahoma, Geneva, sans-serif;
	font-size:12px;
	color:#fff;
	border:1px solid #F90;
	width:400px;
	height:100px;}

#respond {

	width:553px;
	font-size:12px;
	padding:0px 0px 0px 0px;
}

.submitbutton {

	width:auto;
	height:auto;
}

.entrytwo

   {color: #c3c3c3;

   font: normal 12px Tahoma, Geneva, sans-serif;
   padding: 0px 10px 40px 25px;

   }

 .entrytwo a

   {

   padding: 0px;

   margin: 0px;

   color:#F90;

   font: normal 12px Tahoma, Geneva, sans-serif;

   }

   .entrytwo a:hover

   {

	   color:#CCC;

   }

   .entrytwo blockquote

   {

   border: 2px dashed #F90;

   }

   .entrytwo img

   {

   float: left;

   padding: 0px 20px 0px 0px;

   }

   .entrytwo ul

   {padding-left:20px;

   }

   .entrytwo li

   {

   }

   .entrytwo ol li

   {

   list-style: decimal;

   } 

   .entrytwo p

   {

   text-align: left;

   padding: 15px;

   font: Tahoma, Geneva, sans-serif;

   font-size:12px;

   color:#FFF;

   line-height:1.3em;

   }

   .entrytwo span

   {color:#F60;
   font: normal 12px Tahoma, Geneva, sans-serif;

   }

.postmetadata alt {

	color: #F90;

   font: normal 12px Tahoma, Geneva, sans-serif;

   padding-bottom:25px;

   }

  .postmetadata alt a {

	color: #F90;

   font: normal 12px Tahoma, Geneva, sans-serif;

   padding-bottom:25px;

   } 

.sidebartitles{
	background-color:#0F0;
	width:213px;
}

hr {color:#F90;
line-height:5px;
width:220px;}

.navigation {

	padding:0px 0px 0px 0px;
	font:Tahoma, Geneva, sans-serif;
	font-size:12px;
	margin-left:40px;}

.navigation a {

	padding:0px 0px 0px 0px;
	font:Tahoma, Geneva, sans-serif;
	font-size:12px;
	text-decoration:none;
	margin-left:40px;}

.navigation a:hover {
padding:0px 0px 0px 0px;
	font:Tahoma, Geneva, sans-serif;
	font-size:12px;
	text-decoration:underline;}	

.postbg {

	width:553px;
	height:37px;
	background-image:url(images/PNG/postitlebg.png);
}

.contentheading {

	font:Tahoma, Geneva, sans-serif;
	color:#F90;
	font-size:16px;}

.imgfloat {

	float:right;
	padding:2px;
}

.imgfloat img {

	float:right;
	padding:2px;}

.edit {

	font:Tahoma, Geneva, sans-serif;
	font-size:16px;
	color:#F90;
	padding-top:20px;
}

.edit a{

	font:Tahoma, Geneva, sans-serif;
	font-size:16px;
	color:#F90;
	padding-top:20px;
}

.edit a:hover {

	font:Tahoma, Geneva, sans-serif;
	font-size:16px;
	color:#F90;
	padding-top:20px;
	text-decoration:underline;
	margin-top:20px;
}

Index.php:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */

get_header(); ?>

	<div id="content">

    <div class="blogcontent">

   <div class="post">

	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>

			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                <hr />
				<p class="postmetadatatwo"><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --><?php the_tags('Tags: ', ', ', '<br />'); ?>  <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p></div>

				<br /><div class="entrytwo"><hr />
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?>

	<?php endif; ?>
         </div><!---End of Post--><br /><br />
</div><!---End of BlogContent-->
<?php get_sidebar(); ?>
</div><!--End of Content-->
<?php get_footer(); ?>

Viewing 2 replies - 1 through 2 (of 2 total)

esmi
(@esmi)

15 years, 5 months ago

You could try removing position:relative from the .footer and replacing it with clear:left;

Thread Starter mhensler
(@mhensler)

15 years, 5 months ago

Thanks for the suggestion. Tried it, but still doesn’t work. The content on my Tech 10 page overflows and goes under the footer.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Need some help avoiding scrollbars.’ is closed to new replies.

Need some help avoiding scrollbars.

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics