Forum Home
Press F1
 
Thread ID: 76333 2007-01-29 04:47:00 Height Problem - CSS Erayd (23) Press F1
Post ID Timestamp Content User
520227 2007-01-29 04:47:00 Hi,

I'm having a problem getting this (main.pcresolutions.co.nz) template to behave. Any ideas?

Template Source:
main.pcresolutions.co.nz - main container
main.pcresolutions.co.nz - displays inside #minside

Cheers,
Bletch 		Erayd (23)
520228 2007-01-29 20:00:00 Can you tell me what I'm supposed to be seeing, so I can tell what it is you're expecting?

Mike. 		Mike (15)
520229 2007-01-29 20:09:00 The page has the description of the problem on it... It should fill the viewport, but the page should never grow to a size that requires scrolling. The table cell should scroll instead. Erayd (23)
520230 2007-01-29 20:22:00 The page has the description of the problem on it... It should fill the viewport, but the page should never grow to a size that requires scrolling. The table cell should scroll instead.It doesn't display at all in IE7 (Screenshot (www.mikesarah.net)). But I see what you mean when using Firefox. I'll have a look through your source and see if anything stands out.

Mike. 		Mike (15)
520231 2007-01-29 21:13:00 Cheers - the non display in IE isn't an issue, it's a bug in the javascript code that I know about. At this point I'm more concerned with getting the CSS fixed; I can fix the javascript later.

Give me a shout if you need more source files. 		Erayd (23)
520232 2007-01-29 21:42:00 #chatroom #chatroom_see {
height: 300px;Is this the look you want?? 		Rob99 (151)
520233 2007-01-30 01:08:00 #chatroom #chatroom_see {
display: block;
overflow: scroll;
}

The way you are sub assigning stuff makes them inherit attributes if I remember correctly... Try making it just
#chatroom_see {
display: block;
overflow: scroll;
}

and see if it works. Right now it's inheriting #chatroom's width and height tags of 100% 		CorbinH (37)
520234 2007-01-30 01:09:00 Yeah, afaik, that's what he is wanting.

Maybe you would have to do it with javascript? Find the height of the window, subtract however much, and put a fixed height value in. Because it looks like with a percentage, it's going to keep growing.

Unless someone else can figure out how to get it going with css. 		mejobloggs (264)
520235 2007-01-30 01:14:00 Sorry about my post, for some reason I was oblivious to the one previous mine.

Anyways CSS can handle width % fine. It's just height %s it has problems with...

The only problem with the JS approach is that some people disable JS (yes, I know it's rare; I'm trying to help don't attack me with "NO ONE EVER DOES THAT ANY MORE!")...

I'm not positive of the look you're trying to accomplish, and I'm too lazy to copy and paste the CSS lol... Maybe I will in a minute, but since it's misbehaving that still won't show me what you're aiming for... Maybe draw it in paint? 		CorbinH (37)
520236 2007-01-30 04:57:00 I'm not positive of the look you're trying to accomplish, and I'm too lazy to copy and paste the CSS lol... Maybe I will in a minute, but since it's misbehaving that still won't show me what you're aiming for... Maybe draw it in paint?What I am wanting is for the page to fill the entire viewport, no matter what the size of the browser window. However - if there is more content in the #chatroom_see cell than can fit, I want #chatroom_see to scroll rather than increase the page size.

Regarding the use of Javascript - this is a non-issue. The page is the front-end GUI for a Javascript/PHP AJAX chatroom (ChatF1), and as there's no point in having an interface if you can't run the app... However I would like to avoid a javascript-based solution to the resizing if at all possible, because in my experience javascript-based graphical changes tend to render far, far slower than CSS ones; especially if they repeat.

Regarding CSS inheritance: The way I have structured the rules doesn't trigger inheritence; it limits the scope of the rule. It also bumps up the rule priority to override a previously inherited setting from elsewhere.

Regarding percentage-based height: it needs to be percentage-based, as percentage is the only unit that can be related back to the size of the browser viewport. I can't use any kind of absolute unit for the size of #chatroom_see. 		Erayd (23)
1 2