Mon, 2008-10-13 23:10
I have searched everywhere for this and still havent found the reason why this is happening. I understand why it is happening but i just cant fix it. The problem is, I have my page set to 100% (which means 100% of the current browser window) and if you need to scroll the page the background color and image no longer are there, it is just white until you resize the window then the bg is there. How would i get the bg color and image to always be there whether i need to scroll or not? Heres my code.
page can be found here: http://elite.jaredcoles.com
CSS
@charset "UTF-8"; /* CSS Document */ html, body { margin: 0px; padding: 0px; height: 100%; min-height: 100%; } body { background-color:#141414; background-image:url(../images/bg.jpg); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; } #main { height: 100%; width: 790px; empty-cells: show; border-collapse: collapse; margin:0 auto 0 auto; } #header, #footer, #navigation, #content { vertical-align: top; margin: 0px; padding: 0px; } /*------------------------------------------ Main Navigation Header --------------------------------------*/ #header { height: 75px; } #navWrap{ /* wrapper for the entire top header */ border-bottom:#fe7c26 solid 8px; margin-top:50px; } #logo{ /* elite logo */ width:311px; height:61px; background:url(../images/elite_logo.png) no-repeat; float:left; } #navHead{ /* wrapper for the right side of the header */ margin-left:311px; text-align:right; } #menu1{ /* dealer and contact menu */ padding:15px 0 5px 0; } #menu1 ul{ margin: 0; padding: 0; list-style:none; font-family:Helvetica, Arial, sans-serif; font-size:12px; color:#FFFFFF; } #menu1 li{ display: inline; padding: 0 0 0 5px; margin: 0; } #menu1 li a{ font-family:Helvetica, Arial, sans-serif; color:#FFFFFF; font-size:12px; text-decoration:none; } #mainMenu{ /* main website navigation */ width:410px; margin-left:69px; voice-family: "\"}\""; voice-family: inherit; } /*------------------------------------------ END Main Navigation Header --------------------------------------*/ #largeImage{ height:376px; margin-bottom:5px; } /*------------------------------------------ Main Page Content --------------------------------------*/ #navigation { width: 295px; background-color: #6b4329; } #leftMargin{ margin-left:20px; } #contentBorder{ border-top:#FFFFFF solid 1px; margin-top:3px; } #findDealer{ margin:10px 0 10px 10px; } #hrHomeLeft{ border-top:#9e8574 solid thin; margin:0 10px 15px 10px; } #adds{ margin:0 0 0 10px; } #newsTitle{ width:91px; height:30px; background:url(../images/news.png) no-repeat; margin:15px 0 20px 0; } .newsHead{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#FFFFFF; font-weight:lighter; margin-bottom:5px; } #hrHome{ border-top:#606060 solid thin; margin-bottom:15px; } #frontNewsItem{ margin-bottom:20px; } /*------------------------------------------ END Main Page Content --------------------------------------*/ /*------------------------------------------ Main Page Footer --------------------------------------*/ #footer { height: 1px; } /*------------------------------------------ END Main Page Footer --------------------------------------*/
HTML
<body> <table id="main"> <thead> <tr> <td id="header" colspan="2"> <div id="navWrap"> <div id="logo"></div> <div id="navHead"> <div id="menu1"> <ul> <li><a href="#">Dealer Login</a></li> <li>|</li> <li><a href="#">Contact Elite</a></li> </ul> </div> <div id="mainMenu"> <ul id="nav"> <li><a href="#" class="pro"></a></li> <li><a href="#" class="abo"></a></li> <li><a href="#" class="new"></a></li> <li><a href="#" class="tec"></a></li> <li><a href="#" class="gal"></a></li> <li><a href="#" class="ath"></a></li> </ul> </div> </div> </div> </td> </tr> <tr> <td id="largeImage" colspan="2"> <?php $total = "8"; $file_type = ".jpg"; $image_folder = "images/main"; $start = "1"; $random = mt_rand($start, $total); $image_name = $random . $file_type; echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />"; ?> </td> </tr> <tr><td colspan="2"><img src="images/spacer.gif" width="1" height="1" /><div id="contentBorder"></div></td></tr> </thead> <tfoot> <tr> <td id="footer" colspan="2"> <img src="images/spacer.gif" height="1" width="1" /> </td> </tr> </tfoot> <tbody> <tr> <td id="navigation"> <div id="findDealer"> <img src="images/dealer.png" /> </div> <div id="hrHomeLeft"></div> <div id="adds"> <img src="images/cintron.png" /> </div> </td> <td id="content"> <div id="leftMargin"> <div id="newsTitle"></div> <div id="hrHome"></div> <div id="frontNewsItem"> <span class="newsHead">Elite Bicycles dominates Thundergust Triathlon</span><br /> <span class="smallDate">July 16th, 2008</span><br /> <span class="newsText">Accelerade / Elite athlete Todd Wiley held off an impressive field to take 1st place at the Thundergust Triathlon in Pittsgrove, NJ. Elite riders Rick Fesler, Ryan Jones, and Mike Marsteller rounded out the top 4.</span> </div> <div id="frontNewsItem"> <span class="newsHead">Elite Bicycles sweeps Black Bear Triathlon</span><br /> <span class="smallDate">June 28th, 2008</span><br /> <span class="newsText">Elite Bicycles rider Chris Martin dominated the field at the Black Bear Half Ironman, finishing nearly 10 minutes ahead of 2nd place.</span> </div> </div> </td> </tr> </tbody> </table> </body> </html>
Can some one please help me with this. it is driving me completely nuts.
Tue, 2008-10-14 00:38
#1
When given a link the first
When given a link the first thing helpers do is validate the code to make sure they are not wasting their time trying to debug error riddled code.
You have some errors which when fixed may well solve your problem.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Felite.jaredcoles.com%2F
If you still have problems after fixing the errors, or have trouble understanding how to fix the errors, please post back and someone will try to help.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again 
Tue, 2008-10-14 05:07
#2
those errors do not help me
those errors do not help me with what my problem is.
1) ommit tag, for a linked style sheet linking to yahoo style sheet
2) 3) 4) and 5) alt tags for images? how is that an error?
6) my id of frontNewsItem is udes properly?
7) 
and 9) im not usind xml, how is this an error?
None of the errors that where in that list have anything to do with what my problem is. I would really like to know why i can not see the background when i have to scroll if the page is longer than the viewing area.
Tue, 2008-10-14 06:10
#3
On the contrary those errors
On the contrary those errors may well have a bearing on the way your page is displaying.
1) ommit tag, for a linked style sheet linking to yahoo style sheet
The validator says: You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">". and yes, there is a slash missing.
2) 3) 4) and 5) alt tags for images? how is that an error?
The validator says: The attribute given above is required for an element that you've used, but you have omitted it. Self-explanatory really.
6) my id of frontNewsItem is udes properly?
The validator says: An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element). A particular ID name can only be used once per page.
7) and 9) im not usind xml, how is this an error?
The validator says: Opening and ending tag mismatch:
Usually means just what it says - you've neglected to close one or more divs somewhere.
As I said, if you fix the errors you may well find the page displays differently. While it's true the alt tags won't affect your layout, if you're going to do it, you might as well do it all
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Tue, 2008-10-14 13:31
#4
For images that aren't
For images that aren't saying anything (that's what alt's for) then it's ok to have alt="" with the empty quotes-- though really then those images should maybe be sitting in the background and not in the HTML...
Um, I did a 100% height page once and the only browser that did this exact issue with the backgrounds was IE6-- and I don't think I've looked at it in a native IE6, this was a Tredosoft IE6. IE5.5 and below did it as well. It was only the backgrounds of my h3's which were just CSS colours... in this case, I never looked at it but it might have just been a lack of Haslayout on them.
*edit, you mean the image on the body, which always has Layout so that's not it.
I'm wondering if it's just such a large image?
Also:
7) and 9) im not usind xml, how is this an error?
Heh, XHTML... is HTML reformulated as XML (even though we can never really send it as true XHTML, but even so... the validator just sees that you are calling it XHTML).
I friggin hate smilies... they fux0r with codez : (
*edit2 I sat and waited and waited but I could never finish loading your page... there's always white at the bottom of the page but this never changes. You'd need to add a background color to your body which is the same colour as the very bottom of your gradient (since your page is longer than your bg image).
Tue, 2008-10-14 14:20
#5
There are no more errors for
There are no more errors for my page in the validator. I am still having that problem with the background not filling the entre page when you have to scroll.
My background has the color of the bottom of my background image so it should be set to that color instead of white. Any ideas?
html, body { margin: 0px; padding: 0px; height: 100%; min-height: 100%; } body { background-color:#141414; background-image:url(../images/bg.jpg); background-repeat:repeat-x; font-family:Arial, Helvetica, sans-serif; }
Thanks for the help so far by the way i really appreciate it.
Tue, 2008-10-14 19:53
#6
any one have any idea why it
any one have any idea why it would be doing this?
Tue, 2008-10-14 23:17
#7
Layout.css appears to be
Layout.css appears to be overridden by this -
html {reset-min.css (line 7)
background:#FFFFFF none repeat scroll 0%;
color:#000000;
}
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Wed, 2008-10-15 00:14
#8
well it appears my problem
well it appears my problem was not something i had written, it was however the reset.css file i was linking to on yahoo. I just removed it and the page background is perfect and everything seems to be working great now. Thank you so much for your help!
Wed, 2008-10-15 05:16
#9
Yaaay! for CSScreator and
:thumbsup: Yaaay! for CSScreator and all I've learned here
P.S. ...and thanks poes for filling in the holes!
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Wed, 2008-10-15 12:39
#10
More proof! That Yahoo is
More proof! That Yahoo is evil!
Okay, I just despise their reset-- I think it's usually waaay more than most people need, and makes more unnecessary work for teh browzerz. I duzzin' like, no noes.
Wed, 2008-10-15 12:49
#11
I don't even know what it
I don't even know what it is!! But I do know that Firebug is the best 
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Wed, 2008-10-15 12:53
#12
Bah! I did dl it, but I'm
Bah!
I did dl it, but I'm still using Web Developer Toolbar more.
I have this habit of getting a tool and only using like 9% of all it can do...
Wed, 2008-10-15 14:46
#13
You'll want to take some
You'll want to take some advice from those that have been working for a while and back in the days before the glory of such things as web dev toolbars, Firebug is an absolute godsend almost the most perfect tool for the jobbing developer, you'll want to get familiar with it, once you have you'll understand how damned useful it is.