By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,949 Members | 1,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,949 IT Pros & Developers. It's quick & easy.

CSS Layout (Bottom of 'page')

P: n/a
Im trying to do something which I hoped would be alot easier than it seems.

Im trying to design the layout of the page in CSS to avoid table, etc but
having problems making the bottom "fade" background actually stick to the
bottom of the page.

Try making your browser window small... then scroll down & see how ugly it
looks.
....now try resizing your browser & notice the wierd behavior.
It also reacts differently in IE & FF (Which is the only 2 I normally test
on)

Does anyone know of a way to make the "fade out" background stick to the
bottom of the 'page' instead of resizing to the bottom of the browser
viewing area?

Here is a link to a webpage:
www.genzzry.com/index.php

Here is a link to the CSS:
www.genzzry.com/css/default.css
Another problem with the page is:
FireFox stops "crunching" the page when the top (white) and bottom (red)
images touch eachother (as defined by "body.min-height: 198px;"... IE doesnt
and lets the bottom image overlap the top one... how do I stop IE
"crunching" the page more than a min height?
Sep 17 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
"Trammel" <Me@Server.comwrote in message
news:u0****************@fe1.news.blueyonder.co.uk. ..
Im trying to do something which I hoped would be alot easier than it
seems.
>
Im trying to design the layout of the page in CSS to avoid table, etc but
having problems making the bottom "fade" background actually stick to the
bottom of the page.

Try making your browser window small... then scroll down & see how ugly it
looks.
...now try resizing your browser & notice the wierd behavior.
It also reacts differently in IE & FF (Which is the only 2 I normally test
on)

Does anyone know of a way to make the "fade out" background stick to the
bottom of the 'page' instead of resizing to the bottom of the browser
viewing area?

Here is a link to a webpage:
www.genzzry.com/index.php

Here is a link to the CSS:
www.genzzry.com/css/default.css
Another problem with the page is:
FireFox stops "crunching" the page when the top (white) and bottom (red)
images touch eachother (as defined by "body.min-height: 198px;"... IE
doesnt
and lets the bottom image overlap the top one... how do I stop IE
"crunching" the page more than a min height?
....and before anyone complains how ugly/busy the backround looks...
especially the non-matching colors, etc... they are debug versions of the
'image' until I/we get them to align as I require ;-)
Sep 17 '06 #2

P: n/a
"Trammel" <Me@Server.comwrote:
>Does anyone know of a way to make the "fade out" background stick to the
bottom of the 'page' instead of resizing to the bottom of the browser
viewing area?

Here is a link to a webpage:
www.genzzry.com/index.php

Here is a link to the CSS:
www.genzzry.com/css/default.css
There would have been no need to post a link to a separate CSS file if
you had been considerate and included the CSS in the head of the HTML
document.

Newly authored web pages should use a Strict doctype.
If your PHP is configured to scan for cache settings at all, it is
inefficient and illogical to specify that using a meta declaration in
each HTML document.
Most attempts to prevent caching are misguided, see
http://www.mnot.net/cache_docs/
Your meta content aimed at SEs serves no purpose, no relevant SE uses it
anymore.
An HTML comment has two dashes, not three.
Your mixed case tags are a nuisance to read.
It's been a while since I've seen a background as irritating as yours,
text will be nigh unreadable.
PNG or Gif is a much more suitable image format than JPEG for the
background images.
None of the following CSS properties for "#bgdivt" and "#bgdivb" are
needed:
"max-height:99px;min-height:99px;border:0;padding:0;border-spacing:0"
None of the following CSS properties for "html" and "body" are needed:
"height:100%;width:100%;min-height:198px".

Finally the issue that you asked about, you need "position:fixed", not
"position:absolute" for "#bgdivt" and "#bgdivb". Note that
"position:fixed" is not supported by IE6.

--
Spartanicus
Sep 17 '06 #3

P: n/a
"Spartanicus" <in*****@invalid.invalidwrote in message
news:tn********************************@4ax.com...
"Trammel" <Me@Server.comwrote:
Does anyone know of a way to make the "fade out" background stick to the
bottom of the 'page' instead of resizing to the bottom of the browser
viewing area?

Here is a link to a webpage:
www.genzzry.com/index.php

Here is a link to the CSS:
www.genzzry.com/css/default.css

There would have been no need to post a link to a separate CSS file if
you had been considerate and included the CSS in the head of the HTML
document.

Newly authored web pages should use a Strict doctype.
If your PHP is configured to scan for cache settings at all, it is
inefficient and illogical to specify that using a meta declaration in
each HTML document.
Most attempts to prevent caching are misguided, see
http://www.mnot.net/cache_docs/
Your meta content aimed at SEs serves no purpose, no relevant SE uses it
anymore.
An HTML comment has two dashes, not three.
Your mixed case tags are a nuisance to read.
It's been a while since I've seen a background as irritating as yours,
text will be nigh unreadable.
PNG or Gif is a much more suitable image format than JPEG for the
background images.
None of the following CSS properties for "#bgdivt" and "#bgdivb" are
needed:
"max-height:99px;min-height:99px;border:0;padding:0;border-spacing:0"
None of the following CSS properties for "html" and "body" are needed:
"height:100%;width:100%;min-height:198px".

Finally the issue that you asked about, you need "position:fixed", not
"position:absolute" for "#bgdivt" and "#bgdivb". Note that
"position:fixed" is not supported by IE6.
Wow... thats alot of spam to say you cant help with the question asked &
didnt read a "reply" that I posted 4mins after the original question :/

Ok... so you COULD help with the original question (maybe) if I didnt care
about all the IE users getting a messed-up page the same (or worse) than my
CSS does :/

If you cant help with the question or dont know how to do it in a browser
that was specified... then please dont respond. The webpage has obviously
just started construction and has alot of debug-related stuff I was testing
that would be taken out... but you would have noticed that had you read the
follow-up I posted as a reply to my thread after only 4 minutes to deter
useless comments such as yours.

I am attempting to fix a layout issue for something that I dont know is even
possible... I failed so I asked a group where people that are better than me
may be able to help. I dont need assistance to make my site unusable in IE
thanks... I could do that all by myself ;)
Sep 18 '06 #4

P: n/a
"Trammel" <Me@Server.comwrote in message
news:QT*****************@fe1.news.blueyonder.co.uk ...
"Spartanicus" <in*****@invalid.invalidwrote in message
news:tn********************************@4ax.com...
"Trammel" <Me@Server.comwrote:
>Does anyone know of a way to make the "fade out" background stick to
the
>bottom of the 'page' instead of resizing to the bottom of the browser
>viewing area?
>
>Here is a link to a webpage:
>www.genzzry.com/index.php
>
>Here is a link to the CSS:
>www.genzzry.com/css/default.css
There would have been no need to post a link to a separate CSS file if
you had been considerate and included the CSS in the head of the HTML
document.

Newly authored web pages should use a Strict doctype.
If your PHP is configured to scan for cache settings at all, it is
inefficient and illogical to specify that using a meta declaration in
each HTML document.
Most attempts to prevent caching are misguided, see
http://www.mnot.net/cache_docs/
Your meta content aimed at SEs serves no purpose, no relevant SE uses it
anymore.
An HTML comment has two dashes, not three.
Your mixed case tags are a nuisance to read.
It's been a while since I've seen a background as irritating as yours,
text will be nigh unreadable.
PNG or Gif is a much more suitable image format than JPEG for the
background images.
None of the following CSS properties for "#bgdivt" and "#bgdivb" are
needed:
"max-height:99px;min-height:99px;border:0;padding:0;border-spacing:0"
None of the following CSS properties for "html" and "body" are needed:
"height:100%;width:100%;min-height:198px".

Finally the issue that you asked about, you need "position:fixed", not
"position:absolute" for "#bgdivt" and "#bgdivb". Note that
"position:fixed" is not supported by IE6.

Wow... thats alot of spam to say you cant help with the question asked &
didnt read a "reply" that I posted 4mins after the original question :/

Ok... so you COULD help with the original question (maybe) if I didnt care
about all the IE users getting a messed-up page the same (or worse) than
my
CSS does :/

If you cant help with the question or dont know how to do it in a browser
that was specified... then please dont respond. The webpage has obviously
just started construction and has alot of debug-related stuff I was
testing
that would be taken out... but you would have noticed that had you read
the
follow-up I posted as a reply to my thread after only 4 minutes to deter
useless comments such as yours.

I am attempting to fix a layout issue for something that I dont know is
even
possible... I failed so I asked a group where people that are better than
me
may be able to help. I dont need assistance to make my site unusable in
IE
thanks... I could do that all by myself ;)
Oh yeah... and if I had wanted to make the page unusable in IE... then I
would have used a table for formatting as everything other than IE displayed
it correctly with the top/bottom rows the right size and the middle portion
as variable (fluid)... hence the "extra garbage" that does nothing in the
CSS for #bgdivt & #bgdivb and points to them being used to test a
table-based layout at some point before ditching the idea.
Sep 18 '06 #5

P: n/a
Trammel wrote:
If you cant help with the question or dont know how to do it in a browser
that was specified... then please dont respond.
As usual: This is a discussion newsgroup, no help desk.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Sep 18 '06 #6

P: n/a
"Johannes Koch" <ko**@w3development.dewrote in message
news:45***********************@authen.yellow.readf reenews.net...
Trammel wrote:
If you cant help with the question or dont know how to do it in a
browser
that was specified... then please dont respond.

As usual: This is a discussion newsgroup, no help desk.
Strange how some people say that when they cant help or have nothing to add
to the subject / query...
....even though there are no discussions because the subject is too hard for
them or impossible to do :/
Sep 18 '06 #7

P: n/a
"Trammel" <Me@Server.comwrote in message
news:7e*****************@fe3.news.blueyonder.co.uk ...
"Johannes Koch" <ko**@w3development.dewrote in message
news:45***********************@authen.yellow.readf reenews.net...
Trammel wrote:
If you cant help with the question or dont know how to do it in a
browser
that was specified... then please dont respond.
As usual: This is a discussion newsgroup, no help desk.

Strange how some people say that when they cant help or have nothing to
add
to the subject / query...
...even though there are no discussions because the subject is too hard
for
them or impossible to do :/
For the "discussion" part... the "correct" reply would have been.something
like:

"Sorry, I have no idea... but here is how you could do it if you didnt care
about IE users:
blah, blah...
Anyone else got ideas on if this is even possible or not?"

Listing a loads of test-related code as "wrong" isnt helpful to anyone... it
had nothing to do with the topic or subject of the "discussion". It also
showed the follow-up post in the "discussion" hadnt been read.

..Your reply is simple:
"No idea. (I just thought I'd post to say that Im alive though ;)"

Pity that everything isn't worded to peoples liking, huh? :s
Sep 18 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.