PING: Web Developers / Designers

Yossarian · 09-20-2006, 01:56 PM

Hi there,

I've been battling with this all day (which, since I'm in uk is about 10 hours).

Website here: http://paidiasoftware.co.uk/overflowbug/outputtest.html
css here: http://paidiasoftware.co.uk/overflowbug/basic.css

Now this is a stripped down version of what I'm doing - I had it looking fine in firefox but it will look fugly just now because I'm trying to nail the one issue.

If you look at the page and click in the middle + drag, you'll see that there is content to the right that isn't being shown. I want a scrollbar to appear at the bottom of the page to allow the user to access the data to the right.

Now, I can hear you say "use overflow:scroll" and I've tried that. But it doesn't show the scrollbar unless i manually force the height of the content panel to a fixed height. ie - If I put "height:400;" inside the "* html #content_panel {" area of my css, then I get a scrollbar horizontally as I require.

this solution is no good for me though,

I want the page to be able to stretch vertically. If a user has a browser that is longer than 768 high, the 'height:400' looks rubbish because all the content is squished.

So..

long story short

how do i change my css to have the page be as long as the user's web browser allows but have a scrollbar horizontally.

Can anyone help me? I'm going nuts with this!

Cheers!

GoldenEagle · 09-20-2006, 02:01 PM

Is JavaScript an option?

Coffee Warlord · 09-20-2006, 02:02 PM

width:10240px;
min-width:1024px;

Fix that. In fact, get rid of that. Let the browser decide its own width.

And try getting rid of that overflow bullshit entirely.

And while you're at it, make the world happy and stop using css to do everything on a site.

Yossarian · 09-20-2006, 02:22 PM

well, not quite the angle I was expecting :-)

This image:

Might show why I'm using css / fixed widths.

The blue area is for the table. Most of the time it'll fit in a 1024 screen but on occasion it won't. In those circumstances, I want the blue area to scroll to the right but I want the banner at the top and the navigation elements to remain fixed.

With these constraints, I believe CSS is an appropriate tool to use - IFrames would work but I'd rather not go that way.

Anyway, this isn't necessarily the best place for a "dont use css" crusade, I think css is appropriate for this site but I can't get past this IE quirk.

I think the scrollbar IS being drawn, but below the visible screen. The Div thinks it is higher up than it is. That's why (I think) limiting its height works - because it thinks that it is 768 pixels high instead of 768 -us banner+nav height.

Celeval · 09-20-2006, 02:57 PM

Gah.

The problem is, it thinks it has 10240 pixels of space (the width you have in there somewhere), and so will never scroll horizontally. Use this as a starting baseline, and add the top banner and stuff back in later:

<body>
<div id="content_wrapper">
<div id="content_panel">
... table stuff ...
</div>
</div>
</body>

CSS:
#content_panel {
background:#ffffff;
font-family:Arial, Helvetica, Verdana, sans-serif;
}

#content_wrapper {
overflow: scroll;
height: 100%;
width: 100%;
align: left;
}

09-20-2006, 02:01 PM	#2
GoldenEagle Grizzled Veteran Join Date: Dec 2002 Location: Little Rock, AR	Is JavaScript an option? __________________ Xbox 360 Gamer Tag: GoldenEagle014

09-20-2006, 02:02 PM	#3
Coffee Warlord Head Coach Join Date: Oct 2002 Location: Colorado Springs	width:10240px; min-width:1024px; Fix that. In fact, get rid of that. Let the browser decide its own width. And try getting rid of that overflow bullshit entirely. And while you're at it, make the world happy and stop using css to do everything on a site. Last edited by Coffee Warlord : 09-20-2006 at 02:06 PM.

09-20-2006, 02:22 PM	#4
Yossarian High School Varsity Join Date: Jul 2003	well, not quite the angle I was expecting :-) This image: Might show why I'm using css / fixed widths. The blue area is for the table. Most of the time it'll fit in a 1024 screen but on occasion it won't. In those circumstances, I want the blue area to scroll to the right but I want the banner at the top and the navigation elements to remain fixed. With these constraints, I believe CSS is an appropriate tool to use - IFrames would work but I'd rather not go that way. Anyway, this isn't necessarily the best place for a "dont use css" crusade, I think css is appropriate for this site but I can't get past this IE quirk. I think the scrollbar IS being drawn, but below the visible screen. The Div thinks it is higher up than it is. That's why (I think) limiting its height works - because it thinks that it is 768 pixels high instead of 768 -us banner+nav height. Last edited by Yossarian : 09-20-2006 at 02:23 PM.

09-20-2006, 02:57 PM	#5
Celeval Pro Starter Join Date: Nov 2000 Location: Cary, NC, USA	Gah. The problem is, it thinks it has 10240 pixels of space (the width you have in there somewhere), and so will never scroll horizontally. Use this as a starting baseline, and add the top banner and stuff back in later: <body> <div id="content_wrapper"> <div id="content_panel"> ... table stuff ... </div> </div> </body> CSS: #content_panel { background:#ffffff; font-family:Arial, Helvetica, Verdana, sans-serif; } #content_wrapper { overflow: scroll; height: 100%; width: 100%; align: left; } Last edited by Celeval : 09-20-2006 at 04:50 PM. Reason: Stupid > <

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)