background image,,, 1024x768 will not scroll

travisbickles · Joined: 22 Oct 2008 Posts: 4

this is the first website i have ever made, and i am hitting some snags. I have been checking my work in IE7 and things are different in firefox; however that is not my main issue. My image that i am using as my background is large enough to require scrolling however i have somehow locked the image in such a way so that it does not scroll... in fact no scroll bar on the right shows up at all... i have not used any fixed background code or anything... here is the internal css i have used to insert my background

<style type="text/css">
body
{
background-color: #0b407e;
background-image: url("website-outline.jpg");
background-repeat: no-repeat;

}
</style>

i am not sure if that is the problem or not... but i am stumped... please help!

PayneLess Designs · Joined: 28 Feb 2007 Posts: 1408 Location: Biloxi, MS

Whether you trigger the browser to produce a scoll bar depends on the window size and screen res to a certain extent. Does resizing the browser smaller kick in a scroll bar?

Firefox is the only browser that is close to being CSS 2.1 compliant. ALWAYS use it as your main reference on how your site looks. IE is too sloppy in parsing bad code which is why everyone loves it. If it looks wrong in FF and right in IE doesn't mean IE is correct.

Got a link to online page with problem?

BTW, it's easier to write all that CSS in shorthand:

sticks464 · Joined: 31 Dec 2006 Posts: 1283

If your page content is not enough to exceed the window size (resolution)there will be no scrollbar.

travisbickles · Joined: 22 Oct 2008 Posts: 4

when i resize my browser to make it smaller it does not add in a scroll bar. Also the image is large enough because when i position it as center bottom the lower half of my image appears.

i do not have a link to the site as it is to replace an old out of date one for the club but still has some important info on it. If you want to take a look at my code though i could email it or something along those lines

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Post your html and css so we can see what is happening.

travisbickles · Joined: 22 Oct 2008 Posts: 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> LSSC Website... Son!</title>

<link rel="stylesheet" type="text/css" href="pro_dropdown_3/pro_dropdown_3.css" />

<script src="pro_dropdown_3/stuHover.js" type="text/javascript"></script>

<style type="text/css">
body
{
background: #0b407e url("website-outline.jpg") no-repeat top center scroll;
}
</style>

</head>

<span class="preload1"></span>

<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#nogo22" id="Main" class="top_link"><span class="down">Main </span></a>
<ul class="sub">
<li><a href="#nogo23">Home</a></li>
<li><a href="#nogo26">About</a></li>
<li><a href="#nogo24">Executive</a></li>

<li><a href="#nogo25">Partners</a></li>
<li><a href="#nogo26">Rider Profile</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Trips" class="top_link"><span class="down">Trips </span></a>
<ul class="sub">
<li><a href="#nogo23">Jay PeaK</a></li>

<li><a href="#nogo24">Le Massif</a></li>
<li><a href="#nogo25">Banff</a></li>
<li><a href="#nogo26">Ontario</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Local Events" class="top_link"><span class="down">Local Events</span></a>
<ul class="sub">

<li><a href="#nogo23">Events Local</a></li>
<li><a href="#nogo24">The Masters</a></li>
<li><a href="#nogo25">Rail Jam</a></li>
<li><a href="#nogo26">Super-fun-time</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="Photos" class="top_link"><span class="down">Photos </span></a>

<ul class="sub">
<li><a href="#nogo23">Local</a></li>
<li><a href="#nogo24">Quebec</a></li>
<li><a href="#nogo25">Vermont</a></li>
<li><a href="#nogo26">Banff</a></li>
</ul>
</li>

<li class="top"><a href="#nogo22" id="How To" class="top_link"><span class="down">How To </span></a>
<ul class="sub">
<li><a href="#nogo23">Tricks</a></li>
<li><a href="#nogo24">Tune</a></li>
<li><a href="#nogo25">Set Up</a></li>
</ul>
</li>

<li class="top"><a href="#nogo22" id="Buying?" class="top_link"><span class="down">Buying? </span></a>
<ul class="sub">
<li><a href="#nogo23">Boots</a></li>
<li><a href="#nogo24">Boards</a></li>
<li><a href="#nogo25">Bindings</a></li>
</ul>
</li>

</body>
</html>

.preload1 {background: url(three_0a.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; background:#fff url(three_0.gif) no-repeat; position:absolute;left:147px;top:134px; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#8c117c; text-decoration:none; font-size:14px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif)right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#000; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #000; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#fff; text-decoration:none;border:1px solid #337ccd;}
#nav li ul.sub li a.fly
{background:#337ccd url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#337ccd; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#000 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #337ccd; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#337ccd url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#000 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Without the preload1 and preload2 images sizes available I'd say there is not enough content to initialize a scrollbar. All that's on the page other than the preloads is a menu bar.

travisbickles · Joined: 22 Oct 2008 Posts: 4

so i might feel like an idiot for asking this but does that mean that the background image will not show its entire self unless there is something at the bottom of it... and if so wow not my best effort... I will try it out tomorrow after my exam and if that fixes the problem god bless you... you guys must hate noobs

sticks464 · Joined: 31 Dec 2006 Posts: 1283

Yes, the content must extend past the bottom of the screen to get a scrollbar to appear irregardless of the background image size.

Straystudio · Joined: 14 Apr 2008 Posts: 264 Location: Nord Italy