PDA

View Full Version : 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 (paidiasoftware.co.uk/overflowbug/layout.png):

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>


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

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