Because I haven't posted enough new topics this week...
I'm having some css problems, and Fahim, the geek that he is, doesn't know enough about css to help. So I turn to you, oh Geeks of HatCrack, for your wisdom.
1. When I have a short entry, it doesn't end until where the left column ends, leaving all sorts of blank space.
2. The left and right columns don't extend to the very bottom. I would prefer either that they did, or that the center column took over that empty real estate.
And, um, that's it for now.
Help? Please?
Posted by human_2.0 (Member # 6006) on :
I just learned this yesterday: Get Firefox. Then within Firefox, open this url. Install the Web Developer Extension. Quit Firefox and relaunch. There should be a row of icons right above the webpage (below the toolbar). One icon is for CSS. Click it, and select "Edit CSS". You can then edit your CSS and the webpage will reflect changes AS YOU EDIT it.
COOLNESS.
Makes it a lot easier to mess around with css.
I'm not sure how to solve your problem. I'm new with css too.
Posted by human_2.0 (Member # 6006) on :
If I empty it, then the extra space goes away. I don't know what in there is causing the problems.
Posted by erosomniac (Member # 6834) on :
Not to mention that in IExplorer, there's a huge gap between the top horizontal bar and the center column when the window is maximized.
I'll take a look at it.
Posted by Dagonee (Member # 5818) on :
The Web Developer Extension's ability to outline block elements is enormously helpful in tracking down where extra space comes from.
Posted by human_2.0 (Member # 6006) on :
Solution to 1 is to remove your "clear: both" and it snaps right up.
If you find the solution to 2, let me know because a coworker was asking me the same question yesterday.
Posted by erosomniac (Member # 6834) on :
I don't know of a way to do solution 2 without using tables - which sort of defeats the purpose of a well-designed CSS page in the first place. You could define the size of the divs, I suppose, but that's zero fun.
Posted by Dagonee (Member # 5818) on :
I got the left-hand column to extend to the bottom at www.princeclan.org, but I forgot exactly how I did it. It involves floating the columns, using margins and a repeat-y image to make the columns extend down.
Posted by Bokonon (Member # 480) on :
Not sure if all browser support it, but to drop the columns, you should be able to use height: 100%
-Bok
Posted by Chris Bridges (Member # 1138) on :
This is one of the toughest things to get to work using only CSS. Check www.alistapart.com and do a search for "columns all the way to the bottom" to see some suggestions.
However, the easiest way is usually to make a background image that has your column colors on it and let it repeat down the page. It sounds like cheating and it's trickier to make an expandable page with it, but it works.
Posted by Dagonee (Member # 5818) on :
quote:However, the easiest way is usually to make a background image that has your column colors on it and let it repeat down the page. It sounds like cheating and it's trickier to make an expandable page with it, but it works.
That's the essence of what I did. It's actually not that hard to do, as long as you do the clearing correctly.
It is easier with one than two, though.
Posted by quidscribis (Member # 5124) on :
quote:Install the Web Developer Extension.
Yep, have that already, and I use FireFox almost exclusively, which is why I didn't notice the horrible space issue in IE (thanks, erosomniac). I've tried outlining the block elements, and it still didn't help me - probably because I'm not that familiar with either css or divs yet.
Thanks for the comment on deleting clear:both - it's done, and yes, that solves the one major problem in FireFox. IE still looks like crap, of course.
quote:Not sure if all browser support it, but to drop the columns, you should be able to use height: 100%
I did that. Not positive that I did it correctly, of course, but I tried, and that doesn't seem to make a difference.
Chris & Dags, I know I can use a repeating image to bring the two side columns down all the way, but I don't want to. Not trying to be ornery... Chris, thanks for the link. I'll check it out.
Thanks for your suggestions, y'all! Posted by Chris Bridges (Member # 1138) on :
FYI: height: 100% doesn't work reliably in IE.
Posted by quidscribis (Member # 5124) on :
Chris, thanks for letting me know. Why am I not surprised?
At the same time, in theory, it should work fine in FireFox, right? Which means that I probably didn't do it properly. As in, I didn't apply it to the right place. *sigh*
Posted by Dagonee (Member # 5818) on :
quote:Chris & Dags, I know I can use a repeating image to bring the two side columns down all the way, but I don't want to.
Out of curiosity, why not?
Posted by quidscribis (Member # 5124) on :
Because I don't feel like it. *sigh* I know it's not a good enough reason for, well, probably everyone other than me, but I don't feel like it. I want to see if I can solve this without having to resort to that.
Unfortunately, from the site you linked to, that was their offered solution, so it appears that, if I want those columns going all the way to the bottom, I have no choice but to use images. That is, if I stay with DIVs.
Given the problem with the way it views in IE, it looks like I'll have no choice but to go to tables. I can't fix it - I've tried. With tables, it would be fixed inside of five minutes, plus I'd have the columns going all the way to the bottom, so everything solved. But then the css doesn't work the way it's intended.
If I could resolve the way it looked in IE, then I would probably give in and use images.
What a pain in the butt.
Posted by DMat (Member # 9115) on :
Add the following to the respective sections of your CSS to extend each of the columns to the bottom:
#left-menu { padding-bottom: 30000px; margin-bottom: -30000px; }
Posted by quidscribis (Member # 5124) on :
Why do you look familiar, DMat? Is it from Hatrack Writer's Forums? Or somewhere else?
What I've done at the moment is toss the lot into tables because that seemed to be the only way - that I could come up with, at any rate - to fix the stupid IE problem. Nothing else worked, and now, it's at least working properly.
If I could fix that problem without needing a table, I'd give your solution a try, but at the moment, what with tables and all, it's not necessary. Thanks, though. And I'll remember it for the next (?) time. Posted by DMat (Member # 9115) on :
I'm not sure why, you must have me confused with someone. Your site looks fine to me in IE, what exactly is the problem?
Posted by quidscribis (Member # 5124) on :
Well, yeah, it looks fine now. The problem it had was that the centre column started where the left column ended, so there was a lot of empty space.
Oh, by the way, Welcome! Are you a long time lurker or only recently found the place?
Posted by DMat (Member # 9115) on :
Well, whatever works I suppose. Thanks for the welcome. I used to post occasionally once upon a time but it's been a while and I had no idea what my old logon was.
Posted by quidscribis (Member # 5124) on :
To be honest, I'd rather not have to use tables, but I couldn't find a way to fix that IE display problem. I'm not proficient enough with divs or css, so there may be an obvious solution. I just don't know what it is.
Actually, knowing me, I'll keep plugging away with finding a solution, but on a test subdomain rather than the one I currently have on display.
Ah, the joys.
Anyway, welcome back.
Posted by Chris Bridges (Member # 1138) on :
You can avoid tables by assigning CSS definitions to a container to wrap the whole page in and then give that a background graphic. Float your columns left and right as needed, and use padding and margins for those columns to keep them within the background graphic's lines. No tables, easy to update.
Major drawback: you'd have to have a fixed-width page.
Posted by fugu13 (Member # 2859) on :
You can avoid a fixed-width page by applying a variant of the sliding-door pattern.
Create one div set up to take up the whole page, then put another inside it with height 100% and a relative position set to top 0 right 0. On the first div, set a background that includes the left side virtual column, and on the second div, set a background that includes the right side virtual column.
Absolute position each side column at the appropriate place, and let the center column be in the normal page flow with specified margins, and the page will expand fluidly both vertically and horizontally (though the side columns will stay fixed width, of course).
Posted by quidscribis (Member # 5124) on :
![[Smile]](smile.gif)
I've tried outlining the block elements, and it still didn't help me - probably because I'm not that familiar with either css or divs yet.![[Razz]](tongue.gif)
The problem it had was that the centre column started where the left column ended, so there was a lot of empty space.