[SOLVED] aarrgghh!! help

This is a discussion on "[SOLVED] aarrgghh!! help" within the Web Page Design section. This forum, and the thread "[SOLVED] aarrgghh!! help are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page [SOLVED] aarrgghh!! help

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Oct 26th, 2007, 23:21
Junior Member
Join Date: Sep 2007
Location: Cumbria
Age: 24
Posts: 42
Thanks: 0
Thanked 0 Times in 0 Posts
[SOLVED] aarrgghh!! help
I just added a cool hover box gallery to my photos page but now the page background doesn't go all the way to the bottom it finishes half way down I thought I must of missed a div but I can't find it and the page validates.

http://solidmasonry.co.nz/photos.html

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 

Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="keywords" content="builder, masonry, solid 

masonry, new zealand, nz, bricks, blocks, paving, auckland, 

barney, building, construction, solid">
<title>Solid Masonry - Photos</title>
<link rel="shortcut icon" href="/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; 

charset=utf-8">
<link rel="stylesheet" type="text/css" 

href="stylecenter.css"media="screen, projection" >
<!--[if IE]>
<link rel="stylesheet" href='ie_fixes.css' type="text/css" 

media="screen, projection" >
<![endif]-->
</head>
<body>

<div id="page">

<div id="pageSidebar">

<div id="pageNav">
<h2 class="title c2">Menu</h2>
<ul>
<li><a href="index.html">Main Page</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="barney.html">Barney the Bricky</a></li>
<li><a 

href="http://pub27.bravenet.com/guestbook/2246752207">Gue

stbook</a></li>
</ul>
</div>

<div id="blockD">
<h2 class="title">The Boss</h2>
<p><a href="boss.html" target="_blank"><img 

src="images/the%20boss.jpg" width="125" alt="the 

boss"></a>
</div>
</div>

<div id="frontsplash"></div>
<div id="pagecontent">
<h2>Photos</h2>
<ul class="hoverbox">
<li>
<a href="images/bricks1.jpg"><img 

src="images/s_bricks1.jpg" alt="description" /><img 

src="images/s_bricks1.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks2.jpg"><img 

src="images/s_bricks2.jpg" alt="description" /><img 

src="images/s_bricks2.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks3.jpg"><img 

src="images/s_bricks3.jpg" alt="description" /><img 

src="images/s_bricks3.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks4.jpg"><img 

src="images/s_bricks4.jpg" alt="description" /><img 

src="images/s_bricks4.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks5.jpg"><img 

src="images/s_bricks5.jpg" alt="description" /><img 

src="images/s_bricks5.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks6.jpg"><img 

src="images/s_bricks6.jpg" alt="description" /><img 

src="images/s_bricks6.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks7.jpg"><img 

src="images/s_bricks7.jpg" alt="description" /><img 

src="images/s_bricks7.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks8.jpg"><img 

src="images/s_bricks8.jpg" alt="description" /><img 

src="images/s_bricks8.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks9.jpg"><img 

src="images/s_bricks9.jpg" alt="description" /><img 

src="images/s_bricks9.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks10.jpg"><img 

src="images/s_bricks10.jpg" alt="description" /><img 

src="images/s_bricks10.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks11.jpg"><img 

src="images/s_bricks11.jpg" alt="description" /><img 

src="images/s_bricks11.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/bricks13.jpg"><img 

src="images/s_bricks13.jpg" alt="description" /><img 

src="images/s_bricks13.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks1.jpg"><img 

src="images/s_blocks1.jpg" alt="description" /><img 

src="images/s_blocks1.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks2.jpg"><img 

src="images/s_blocks2.jpg" alt="description" /><img 

src="images/s_blocks2.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks3.jpg"><img 

src="images/s_blocks3.jpg" alt="description" /><img 

src="images/s_blocks3.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks4.jpg"><img 

src="images/s_blocks4.jpg" alt="description" /><img 

src="images/s_blocks4.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks5.jpg"><img 

src="images/s_blocks5.jpg" alt="description" /><img 

src="images/s_blocks5.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks6.jpg"><img 

src="images/s_blocks6.jpg" alt="description" /><img 

src="images/s_blocks6.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks7.jpg"><img 

src="images/s_blocks7.jpg" alt="description" /><img 

src="images/s_blocks7.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks8.jpg"><img 

src="images/s_blocks8.jpg" alt="description" /><img 

src="images/s_blocks8.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks9.jpg"><img 

src="images/s_blocks9.jpg" alt="description" /><img 

src="images/s_blocks9.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/blocks10.jpg"><img 

src="images/s_blocks10.jpg" alt="description" /><img 

src="images/s_blocks10.jpg" alt="description" class="preview" 

/></a>
</li>
<li>
<a href="images/truck.jpg"><img src="images/s_truck.jpg" 

alt="description" /><img src="images/s_truck.jpg" 

alt="description" class="preview" /></a>
</li>
<li>
<a href="images/van.jpg"><img src="images/s_van.jpg" 

alt="description" /><img src="images/s_van.jpg" 

alt="description" class="preview" /></a>
</li>
<li>
<a href="images/van2.jpg"><img src="images/s_van2.jpg" 

alt="description" /><img src="images/van2.jpg" 

alt="description" class="preview" /></a>
</li>
<li>
<a href="images/van3.jpg"><img src="images/s_van3.jpg" 

alt="description" /><img src="images/s_van3.jpg" 


alt="description" class="preview" /></a>
</li>
<li>
<a href="images/landr.jpg"><img src="images/s_landr.jpg" 

alt="description" /><img src="images/s_landr.jpg" 

alt="description" class="preview" /></a>
</li>
</ul>

<div id="navlist">

<ul>
<li>|</li>
<li><a href="sitemap.html">Site Map</a></li>
<li>|</li>
<li><a href="index.html">Homepage</a></li>
<li>|</li>
<li><a href="barney.html">Barney</a></li>
<li>|</li>
<li><a href="photos.html">Photos</a></li>
<li>|</li>
<li><a href="contact_us.html">Contact Us</a></li>
<li>|</li>
<li><a href="faqs.html">Faqs</a></li>
<li>|</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Code: Select all
*{
padding:0; margin:0;
}

body {
background : url(images/transbrick.jpg);
background-attachment: fixed;
font : 14px verdana, arial, sans-serif;
color : #036;
}

a, a:visited {
color : #f93;
text-decoration:none;
}

a:hover {
color : #036;
text-decoration:none;
}

#page {
width : 780px;
margin : auto;
background : #ffffff;
font : 14px verdana, arial, sans-serif;
text-align : left;
}

#page p{
font : 14px verdana, arial, san-serif;
Color: #036;
margin: 0 10px 15px 20px;
padding:0px 10px 15px 20px;
}

#pagecontent {
margin-left : 190px !important;
width : 490px;
font : 14px verdana, arial, sans-serif;
padding :20px;
text-align: left;
}

#pagecontent p{
margin-bottom: 15px;
}

#page h2 {
text-align: center;
padding-bottom: 40px;
}

#page h4 {
padding-top: 25px;
}
#pageHead {
height : 123px;
width : 760px;
position : relative;
padding-top : 10px;
margin: 0px 0px 5px 10px;
background : #ffffff url(theme_images/auckland2.jpg) no-

repeat;
}

#pageHead cite {
position : absolute;
width : 465px;
text-align : right;
right : 20px;
top : 20px;
color : #ffc;
text-transform : uppercase;
font-style : normal;
padding : 5px 20px 0px 0px;
font-weight : bold;
}

#pageSidebar {
float : left;
margin: 0px 20px 20px 10px;
width : 180px;
background : #ece1be url(theme_images/pagesidebar-bg.gif) 

repeat-y top left;
}

#pageNav {
margin-left: 0px;
background : #f93 url(theme_images/pageNav-bg.gif) repeat-y 

top left;
}

#pageNav h2.title {
background : url(theme_images/pageNav-heading.gif) no-

repeat top left;
color: #036;
padding : 0;
margin : 0px;
font-size : 150%;
text-align : center;
height : 34px;
padding : 15px 20px 0 0;
}

#pageNav ul, #pageNav li {
padding : 0;
margin-left : 8px;
list-style-type : none;
margin : auto;
}

#pageNav ul {
width : 148px;
padding-bottom : 5px;
}

#pageNav li {
height : auto !important;
padding-top : 5px;
padding-left : 10px;
height : 23px;
min-height : 23px;
background : url(theme_images/pageNav-button.gif) no-repeat 

top left;
margin-bottom : 2px;
}

#pageNav li a, #pageNav li a:visited {
color : #339;
text-decoration : none;
font-size : 12px;
}

#pageNav li a:hover {
color : #c30;
}

#blockD {
background : url(theme_images/pagesidebar-end.gif) no-repeat 

bottom left;
padding-bottom: 5px;
}

#blockD h2.title {
padding : 0;
margin : 0;
background : url(theme_images/pagesidebar-heading2.gif) no-

repeat top left;
height : 30px;
text-align : center;
font-size : 16px;
padding-top : 8px;
}

#blockD p {
text-align: center;
margin:2.5em 0 2.5em 0;
}

#blockD a {
text-decoration: none;
}



#frontsplash {
margin-bottom: 40px;
margin-left: 332px;
width : 300px;
height : 164px;
background : url(theme_images/logo2.png) no-repeat top;
}

#pageFooter2 {
position : relative;
color : #ffffff;
margin-top : 8px;
margin-left : 10px;
width : 757px;
height : 41px;
background : url(theme_images/footer.gif) repeat-x top left;
}

#pageFooter2 #footNav {
position : absolute;
top : 10px;
right : 15px;
}

#pageFooter2 p {
position : absolute;
top : 10px;
margin : 0;
padding : 0;
left : 15px;
color : #f93;
}

#pageFooter2 #footLeft2 {
float : left;
background : url(theme_images/footer-left2.gif) no-repeat top 

left;
width : 9px;
height : 41px;
}

#pageFooter2 #footRight2 {
float : right;
background : url(theme_images/footer-right2.gif) no-repeat top 

left;
width : 9px;
height : 41px;
}

#navlist {
padding: 10px;
margin-top: 40px;
text-align:center;
}

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
text-align: center;
color: #f93;
}

#navlist li a, #navlist li a:visited {
color : #036;
text-decoration : none;
font-size : 12px;
}

#navlist li a:hover {
color : #f93;
}

#photo {
padding : 5px;
text-align : center;
}

.photo2 {
float: right;
margin: 0px 20px 20px 40px;
}

.photo3 {
float: left;
margin: 0px 20px 10px 50px;
}

.photo4 {
text-align:center;
margin: 0px 20px 10px 20px;
}
ul.none {
list-style-type: none; 
list-style-position: inside;
}

li.marg {
margin-bottom: 10px;
margin-left: 50px;
}

.hoverbox
{            background: #ffffff;
    cursor: default;
    list-style: none;
}

.hoverbox a
{
    cursor: default;
}

.hoverbox a .preview
{
    display: none;
}

.hoverbox a:hover .preview
{
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
}

.hoverbox img
{
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
}

.hoverbox li
{
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}

.hoverbox .preview
{
    border-color: #000;
    width: 200px;
    height: 150px;
}
Reply With Quote

  #2 (permalink)  
Old Oct 27th, 2007, 03:50
Highly Reputable Member
Join Date: Sep 2007
Age: 15
Posts: 717
Blog Entries: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Re: aarrgghh!! help
I can't find any errors. Hmm, this is similar to an issue I had a while ago. My solution was adding this:
HTML: Select all
<div style="clear:both;"></div>
In your case, like this:
HTML: Select all
...<li><a href="faqs.html">Faqs</a></li>
<li>|</li>
</ul>
</div>
</div>

<div style="clear:both;"></div>

</div>
</body>
</html>
The div contains nothing, unless you want it to. The idea is to clear all divs (this does not mean erase content). IE does this automatically, all other browsers don't. Try it out, and it should work. If it doesn't, try moving the div around a bit. Sometimes, only a certain position works.

Cheers,
SWagner
Last Blog Entry: Windows Vista vs. Mac Leopard (Nov 4th, 2007)
Reply With Quote
  #3 (permalink)  
Old Oct 27th, 2007, 09:05
Junior Member
Join Date: Sep 2007
Location: Cumbria
Age: 24
Posts: 42
Thanks: 0
Thanked 0 Times in 0 Posts
Re: aarrgghh!! help
OMG thank you so much swagner!

Thats sorted it out a treat, I never would of thought of that.
Reply With Quote
  #4 (permalink)  
Old Oct 27th, 2007, 14:58
Highly Reputable Member
Join Date: Sep 2007
Age: 15
Posts: 717
Blog Entries: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Re: aarrgghh!! help
Quote:
Originally Posted by xkatx21x View Post
I never would of thought of that.
Neither did I when my site was doing the same thing . Glad to help.

Cheers,
SWagner
Last Blog Entry: Windows Vista vs. Mac Leopard (Nov 4th, 2007)
Reply With Quote
Reply

« box height problem in Safari | [SOLVED] weird question marks.... »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] 1 solved problem causes another delusion Web Page Design 9 Dec 21st, 2007 08:12
Adding "Topic Solved" for solved topics AdRock Webforumz Suggestions and Feedback 21 Oct 4th, 2007 15:08


All times are GMT. The time now is 13:40.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Web Hosting :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43