Hey guys, last tech problem I seem to have with my site - everything else is checking out but this one issue is still giving me real trouble.
On my laptop, the background image looks fine and extends all the way down to the bottom of the page, however long that page is. However, on a friend's computer (he has a higher screen resolution), the background image is cutting off and not going all the way down to the bottom.
I'm working with a 1280 x 800 res. My site is optimized for 1024 x 768 res. On both my screen and when testing the latter resolution, everything's great. But on larger screens, it seems to cut off and not repeat vertically, no matter what I do. I've tried the standard "repeat-y" settings and a lot of other stuff, and nothing seems to make it take up the full length of the page on my friend's screen. Any suggestions?
Site:
http://www.tigersjunkyard.com/xilon/main.shtml
CSS Code
Code:
/* BASIC INFO */
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
font-size:76%;
font-family: Georgia;
background:#000 url() -18px 0 no-repeat;
/* \*/
/* */ }
/* GENERAL LAYOUT */
div#wrapper{
width: 1006px; height: auto;
}
body {height:100%; max-height:100%; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:160px; padding-top: 100px; position:relative; z-index:3; color: #ffffff; background: url(images/bg.gif); #000000;}
#head {position:fixed; margin:0; padding-left: 134px; display:block; width: 872px; height:100px; background:url(images/space.jpg) #ddd; font-size:6em; z-index:5; color:#ffffff; font-family: Georgia;}
#foot {position:fixed; margin:0; padding-left: 150px; bottom:0px; display:block; width:856px; height:50px; background:url(images/footer.gif) #000000; color:#000000; text-align:center; font-size:10pt; z-index:4; font-family: verdana;}
/* TITLES */
h1, h2, h3 {
font-weight: normal;
color: #CBA61A;
}
h1 {
letter-spacing: -2px;
font-size: 3em;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
color: #ffff66;
font-style: italic;
}
h3 {
font-size: 14pt;
font-style: italic;
text-decoration: underline;
color: #ffffff;
font-family: verdana;}
}
p, ul, ol {
line-height: 150%;
}
.title {
margin: 0;
border-bottom: 2px solid #0F0F0F;
}
body {
margin: 0;
padding: 0;
background: #000000;
font-size: 13px;
color: #ffffff;
}
body, th, td, input, textarea, select, option {
font-family: Georgia;
}
p.faq {color: #3AA0B9;}
/* LINKS WITHIN BODY */
a {text-decoration: none; color: #3AA0B9;}
a:visited {text-decoration: none; color: #3AA0B9;}
a:active {text-decoration: none; color: #3AA0B9;}
a:hover {text-decoration: overline underline; color: #660000;}
p.link a:hover {background-color: #2B2E21;color:#fff;}
p.link a:link span{display: none;}
p.link a:visited span{display: none;}
p.link a:hover span {
position: absolute;
margin:15px 0px 0px 20px;
background-color: #ffffff;
max-width:300px;
padding: 2px 10px 2px 10px;
border: 5px solid #660000;
font: normal 16px verdana;
color: #000000;
text-align:left;
display: block;}
/* POSITION */
#left {position:fixed; left:0; top:0; height:100%; width:150px; background:url(images/stars.gif) #aaa; background-position:0 100px; font-size:1em; color:#fff; z-index:4;}
* html #head, * html #foot,* html #left {position:absolute;}
#content p {padding:5px;}
p.leftmargin {margin-left: 1cm}
.meta {
text-align: right;
color: #646464;
}
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
/* SIDE MENU */
#menu {list-style-type:none; padding: 0px; padding-top: 100px; margin:0; width:150px; z-index:100; float:right; height:360px; background:url(images/stars.gif) #000000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#000000 url(slide/slide_0.gif) no-repeat;}
#menu li.sub {background: #000000 url(slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#ffffff; font-family:Arial; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#660000 url(slide/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#000000;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #660000;}
#menu :hover ul li, #menu :hover ul li a {background:#000000; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #000000 url(slide/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#660000; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#000000;}
#menu :hover ul :hover ul :hover ul li {background:#660000; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #000000 url(slide/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#660000; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#000000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#660000 url(slide/arrow.gif) no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#000000;}
#menu :hover ul :hover ul :hover ul :hover {background:#660000; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
