Preserved Topic: Overflow troubles.

After finally settling on one out of 4 or 5 new designs, I've started really coding my site again. I'm focusing on big resolutions but it will still be usable at 800x600 (if all goes well). So far all is not going well. I have a header graphic that is wider than 800. All the important stuff on it is visible at 800x600, the rest just fades away so 800x600 users arn't missing out. It works great except the image causes a horizontal scroll bar. I tried messing with overflow but I realized that it applied to the contents of the element not the element itself. So I surronded the header with a div style="overflow: hidden" and then the entire header dissapeared. I tried messin' with clip and width etc. to bring it back but to no avail so I threw out the big parent div. I'm pretty sure there is a way to just elimnate the h scrollbar from the window but that just doesn't seem as sage as simply letting the image oveflow. After all what if someone in 800x600 isn't viewing at max res and a hscroll bar is needed? Any solutions?
http://wind.prohosting.com/thedorm/home.html

Thanks,
Schitzo

[This message has been edited by Schitzoboy (edited 02-23-2002).]

If you're sure that a horizontal scrollbar will never be needed, you should be able to say:

body {
width:100%;
overflow:hidden;
}

Theoretically, at least; I may be wrong.

The large surrounding div I made used that exact same code and it made the images disappear. I didn't try it on the body tag though. The layouts far from complete as of yet so I'm not sure if that srollbar will be needed or not yet. that's why I was hoping for something that just let the image overflow.

Aaaahhhh the dreaded Horizontal Scrollbar Of Death!!!

But seriously, I think you just might be ok with the page as is, here's why. Your design features an orange frame on each side and your scroll bars match very well with that frame. So even with the HSOD, it actually looks like it's part of the design and I think it looks pretty darn good.

So normally the HSOD would be *much* worse than it is in this case so I would vote for not worrying too much about it.

But if you really want to lose it, I'll have to look into a few things and get back to this thread to see what's possible. I've tried similar things with limited success.

Slime: That code gets rid of the vertical scroll bar as well. damn it

Bugs: True, however, the only time the scrollbar is visible is at low resolutions, and at those low resolutions i have less pixels to waste on a scrollbar I don't need. At 1600x1200 an hbar wouldn't bother me at all, but at 800x600 I need that space.

[edit]p.s. not everyone uses IE so the scrollbar won't ALWAYS fit in [/edit]

[This message has been edited by Schitzoboy (edited 02-23-2002).]

Ok there are other ways to do this.

One way is to make sure your upper graphic fits nicely into an 800x600 layout. Then in order to accomodate the huge resolutions you can have a background image load to make the upper section look like it's extended. In your case the background image would consist of an orange bar on the top and it would be really high so it wouldn't repeat for long pages.

HEY!!! I just got a "404 Error - File Not Found" on your link. What gives?

Whoops! I just changed the filename to home.html to test the javascript menu. I completely forgot to change the link here. My bad.

Background image won't work cuz I've already got a background image. Notice the verticle cordiroy lookin' stuff? Its pretty suttle and I'd be upset if I had to trash it.

Alright, try this...

replace your top image tag (something like

<img src="topimg.jpg" width="x" height="y">

) and replace it with the following DIV:

<div id="topimage">&amp;nbsp;</div>

Then give that DIV the following style:

#topimage {
width:100%;
height:ypx; /* replace that "y" with the height of the image */
margin:0px;
padding:0px;
background: url(topimg.jpg) no-repeat;
}

See if that works.

It *won't* work for older browsers. If you're really worried about that, then you can put an image inside the DIV tag which is just like the bigger image, except with part of the right-hand-side cut off to fit 750 or so pixels. Then people with browsers that don't support CSS well will at least see something.

[edit: friggin' UBB doesn't turn ampersands into &amp;amp;'s...]

[This message has been edited by Slime (edited 02-23-2002).]

Already tried it with no luck. Apparently even though the background for a page can be however long without scrolling, the background of a div or span affects a scroll. I guess its because the span or div is technically and object that is wider than the page even though its empty. *sigh* I'm determined to figure this thing out.

Are you sure? Because if you set the width:100%, then the div doesn't actually overflow off the edge of the page, and the background it contains is clipped.

[This message has been edited by Slime (edited 02-23-2002).]

Lemme try again. The banner is actually 3 images, 2 transparent gifs so the bg will show through and the guy is a jpeg.

WOOHOO kinda! We've won the battle but not the war. No more scroll bar but... IE apparently doesn't think 100% means the whole page so the image only goes so far. Any clues how to fix this NEW bug?

Here is the CSS file if it'll help http://wind.prohosting.com/thedorm/styles/main.css

Oh, I think it's because of the body's 25px padding. The 100% width makes it the maximum width that it can be within its parent element, and the maximum width it can be inside the body is the width of the window minus 25 pixels of padding on either side. So it falls 50 pixels short.

Try this: instead of saying width:100%, change it to width:auto, and since it's already absolutely positioned add right:0px in there. Then it should try to put the left of the element up against the left, and the right of the element up against the right, thereby stretching it across the whole page. Theoretically.

If I were you, I'd change your <span> tags to <div> tags. NN4.x likes that better (i think), and <span>s are inline elements, whereas <div>s are block-level elements. (simply put: spans go around peices of text; divs go around chunks of the page.)

BTW, you shouldn't just say left:0; top:0; , you should put in the measurements (left:0px; top:0px . Most browsers understand, but it's a good habit nonetheless.

You were right about the padding but when I set width to auto the div became only as wide as its contents which doesn't include the background. Argh, mozilla rendered it correctly! I took your advce and switched to spans and put all the pxs in (thanks for checkin' up on me) Oh and even when I got rid of the padding the div stopped when it encountered the right side orange bar instead of continuing underneath.

If I set the width to 102% it works perfectly. Should I settle with this hack?

[edit]never mind, I lied [/edit]

[This message has been edited by Schitzoboy (edited 02-23-2002).]

Try giving the div

position:absolute;
left:0px;
top:0px;
right:0px;

and don't specify a width at all.

thats the same as auto which is the default

thats the same as auto which is the default

SB: I'm jumping in a little late but if you only want to kill the scrollbar when its not needed then give the body the style overflow: auto - or have you tried that and it didn't work? I've done that before and it works nicely (unless you are going for a solution with its own scroller its never wise to switch of the scrollbars altogether as you can never predict the odd things the user may do!!).

Emps

Slime, after a little reading I found that CSS only recognizes one left or right value. It defaults to left so if you have a value for both left and right, the right gets ignored

Emp, that doesn't work because the browser thinks it needs a scrollbar because the image DOES bleed off the page.

I've decided that I can settle with eliminating the hscroll bar entirely if thats possible. Overflow: hidden applied to body gets rid of both scroll bars, is their an easy way to just get rid of the horizontal one, and If someone can figure out a way to fix this with out removing the scroll bar I'm still open to suggestions

Schitzo

Hey! I think I got it!!! Tell me if it works please

Works. How'd you do it?

#header	     { position: absolute; background: url(../images/title.gif) no-repeat 163px 0px; top: 0px; left: 0px; z-index: 3; height: 215px; width: 100%; margin:0px; padding:0px;}

#titleMan      { position: absolute; left: 0px; top: 0px; margin: 0px; padding: 0px;}

#titleBottom { position: absolute; left: 0px; top: 215px; margin: 0px; padding: 0px;}

Header is a div with 2 images in it and the 3rd problematic image set as its background. Unfortunelty it only works when body's padding and (get this) margin are set to 0.

[This message has been edited by Schitzoboy (edited 02-24-2002).]