CSS Error Driving Me NUTS - Will PayPal $5.00 or 2 Months Free Hosting

Hello,

I dont know why but some of the pages on my site template are messing up on longer pages. See http://k-disk.net/portal/knowledgebase/6/Terms-of-Service.html for an example. Does anyone have anyone have any Idea on how to fix it?

I will either send the hero $5.00 (via PayPal) or give 2 free months of hosting. Your Choice
​

 

remove the height declaration from "wrapperh" and remove the float declaration from "plans." if it must be floated, make sure to clear it after "plans." hope that works for you.

 

And don't forget to add overflow:hidden; to div.wrapperh

 

Hi,

You have a couple of errors firstly to begin with, which could effect the rendering in some browsers..

1. Firstly Towards the top of the document you are closing one more DIV than there actually exists, as shown below:

<div class="header">

  <div class="logo">
    <a href="https://K-Disk.net"><img src="https://k-disk.net/host/imgs/logo.gif" alt="K-Disk Networks" border="0" /></a>
  </div>

  <div class="contact">
  <script type="text/javascript" src="https://k-disk.net/crafty/livehelp_js.php?eo=1&department=1&amp;serversession=1&amp;pingtimes=15&amp;secure=Y"></script>
  <a href="https://k-disk.net/portal/contact.php"><img src="https://k-disk.net/host/imgs/mailus.gif" alt="Email us" border="0" style="margin-left:5px; margin-top:25px;" /></a>
  </div>

<!--Header Ends Here--></div>

[B]</div>[/B]

Code (markup):

There is no DIV left open for the last </div> to close if you look closley. You've already closed the two inner DIV's, and the header, as outlined in the comment.

2. Secondly also related, you never close off your wrapperh DIV, so you need to add an extra </div> at the very end of the document to close it off. You want to close it off before the footer, so the footer appears at the bottom. So add another </div> before the footer starts like:

[B]</div>[/B]
<div class="footer">

Code (markup):

3. OK now to the problem. As explained above, you have declared a height for the #wrapperh DIV, so anything larger than this will stick out. As shown here in your style.css

/*hosting plans page start*/
.wrapperh {
background-color:#FFFFFF;
width:750px;
[B]height:905px;[/B]
margin:auto;
}

Code (markup):

You could get rid of this altogether, but suppose you still wanted a minimum height of 905px for some pages which don't have much content in. Then to this you'd just use min-height instead of height, so you would replace the above with:

/*hosting plans page start*/
.wrapperh {
background-color:#FFFFFF;
width:750px;
[B]min-height:905px;[/B]
margin:auto;
}
* html .wrapperh {
height:905px;
}

Code (markup):

The bit at the bottom is for IE6 because it doesn't understand min-height, and thinks height is min-height..

4. Get rid of the followig in bold, there is no need for it:

.content1h {
background-image:url(https://k-disk.net/host/imgs/wel.jpg);
background-repeat:repeat-x;
width:750px;
[B]height: inherit;[/B]
}

Code (markup):

5. Lastly we need to clear your floats, so the footer sticks to the bottom of the page. So find in your style.css:

.footer {
background-image: url(https://k-disk.net/host/imgs/bg2.gif);
background-repeat:repeat-x;
width:750px;
height:30px;
background-color:#999999;
margin:auto;
color:#FFFFFF;
font-size:12px;
line-height:30px;
}

Code (markup):

and simply add clear:both to this, so it clears the floats above it. So it will then become:

.footer {
[B]clear:both;[/B]
background-image: url(https://k-disk.net/host/imgs/bg2.gif);
background-repeat:repeat-x;
width:750px;
height:30px;
background-color:#999999;
margin:auto;
color:#FFFFFF;
font-size:12px;
line-height:30px;
}

Code (markup):

That should solve the problem at hand. Other than that i'd change your menu to an un-ordered list so it allows for greater flexibility and styling, and after all your menu is a list of links. By that I mean the HTML for the menu would look like:

<ul id="menu>
<li><a href=#>Link 1</a></li>
<li><a href=#>Link 2</a></li>
<li><a href=#>Link 3</a></li>
</ul>

Code (markup):

Also i'd probably remove the table as theres no need for it, and remove the random <div></div> you have around some pieces of text in your main content. Also i'd make use of CSS padding's and margin's to prevent the constant use of &nbsp; and <br /> to create gaps. But these are just possible improvements, your site will still function without making these changes.

 

This worked like a charm. Please contace me to claim the reward.