Topic: all-night coding bonanza

decided not to sleep tonight/morning so i could work on three different sites all at once for twelve hours straight, wweeeee.

so here's the problem site: http://three.zerominuszero.net/info/index.html

two issues:

1) when i open the site in internet explorer everything appears exactly how i want it, but when i open it in netscape/moz the "archves + bitch + info + links" graphics are shifted too far to the right, as is (obviously) the "bean curd: ..." column of text. i'm using css with a right margin defined for those two elements and it would appear ie + netscape interpret them in different manners. i searched for this issue on a few resource pages but couldn't find anything that worked. anyone out there have any ideas? is there a better way to tell it to space or would something like absolute positioning be a viable solution?

2) cross-browser problem dealing with backgrounds and how far they extend. looking at this page there are three visual blocks of white, the middle one being the important one full of content. what i'm trying to figure out is how to display backgrounds in the visual blocks, but only to the bottom of the viewer's screen. the bottom panel is just a space filler for people with 1600x1200 resolution mostly and i don't want people with smaller resolutions to be able / have to scroll down to the bottom of it. rather, i just want the page to stop rendering around 20px below the last of the content or where their screen happens to end. i've messed with all of the background properties and tried some margin/padding stuff but had no luck.

once i get these two kinks hammered out this page should be ready to go... so holler if you see any other errors i might be missing in my delusional state right now.

cheers mikey milker

if you check out the CSS tutorials at the GN
( http://www.gurusnetwork.com/tutorials/coding/ ) they talk about the Box Model a bit and how IE fucked it up. There should be a couple of links in there to places with some good work-arounds for the issue.



[This message has been edited by DL-44 (edited 10-09-2002).]

yeah i've been messing with the box model but couldn't get it to work, dduuhhhh.

how about the background problem? can anyone solve that simple one...

ahem -- HOW DO YOU FORCE A BOX TO BE AS TALL AS THE HEIGHT OF THE CURRENT BROWSER WINDOW? (with the ability to resize itself on the fly when the browser window is maximized, etc)

Ok, I'm a little confused by what your saying here but umm...

For the footer/background problem, why not just remove the height value from #footer, that way it'll cut off where the the content in it ends.

"HOW DO YOU FORCE A BOX TO BE AS TALL AS THE HEIGHT OF THE CURRENT BROWSER WINDOW?"

You could try an absolutly positioned box with height:100%; but I don't like your chances, espically if your using a valid DTD. Chances are the box will only be as high as the content contained within it. Appart from that your only solution would be a Javascript one. Let me kow if you want help on that.

aahh sorry about all this bitching, i'm just getting frustrated by a lot of work plus not being able to code this simple site. the problem with the box model... well i was trying to do the code on my laptop in class and i wasn't hooked up the internet. well it would appear the page doesn't render correctly without a net connection so i was banging my head against the wall for hours, etc etc. ugly scene.

the problem with #footer is that there's no content in the ugly bastard. it's just a background with white page + black text, simple simple. is there some way i could drop an invisible element into the content area and force it's height to be wherever the user's browser window ended?

this makes no sense. i think i'll scrap the idea for a few weeks and get back to it when i can actually pay attention to what i'm doing. thanks for the help, results to follow.

Hehe.

I understand. I'm in the middle of three different sites myself at the moment. When you get around to the site again feel free to give me a holler on ICQ or something and I'd be more than happy to help you out with it. Oh, arr, but if it's wintin the next two weeks chances are I'll be flat out.

Two weeks till the end of semester! Yay me!

Oh shit! Too much work to do... not enough time... gota run...

Gentlemen, I have just the CSS trick for you. First, explicitly set body {height: 100%}. When I say "explicit," yes, I'm talking about visible penetration.

Clean up, if necessary, then set other page elements to have a height of 100%. (Or any percentage you like.)

Step Three: Enjoy. When questioned on this topic, act as though you didn't learn it four days ago, like I did.

haha... i sat down this morning with three pieces of pesto pizza and managed to recode the entire site to work perfectly in ie and 95% perfect in netscape before i could even finish the crust on the second piece.

so yeah, i solved the height problem well enough to satisfy me and i think it was messing with the height 100% variable after redoing some elements in photoshop.

cheers!

Something I've noticed that's quite a pain in the ass is trying to make elements (boxed areas) 100% height (that is, always top to bottom - scrolling or not) and not just the height of the browser window.

I have yet to totally figure that out - could you maybe show what you've done to fix your problem, milker?

well i just woke up two minutes ago (get off the computer, junkie!) and i'm not really sure that we're talking about the same thing... if you don't mind waiting two or three days i should have my stuff together and i'll put the goods online.