473,486 Members | 1,958 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

CSS Layout (Bottom of 'page')

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
7 2163
"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
"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
"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
"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
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
"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
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

82
10593
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | ...
2
2584
by: CJM | last post by:
I'm developing a site for a charity which I am aiming to make standards-compliant, accessible and cross-browser compatible. I'm doing OK so far and have the workings of a respectable site, but I...
1
2049
by: Gordon McVey | last post by:
I've been working at this web company for a while now (mainly on PHP stuff) who are developing a website. The big problem with this site is that it's all in Flash and uses some really dumb design....
3
2672
by: googlegroups | last post by:
Here is the HTML I am trying to get working. In firefox, the HTML fills the entire window with a scrollbar in the red div. I can resize the page and the page is still completely filled. However,...
15
2303
by: Tamblyne | last post by:
This problem has got to have a simple solution and I can't be the first person who has ever handled it. Perhaps Google is no help because I'm not using the right terms? (I did find one post...
7
2802
by: PB | last post by:
Hi, I need some CSS layout guidance because I think I've been staring at this too long! I designed my layout using Photoshop, then sliced everything up and saved as a CSS web page. My...
0
2738
by: lucretia | last post by:
Hi, I've created a layout for an Ajax side that is "single paged" in that when the browser is resized, so is the page. The header is locked to the top, the right panel is locked to the right...
1
3047
by: jonhrs | last post by:
Hi, I have an intranet page which will be used by IE users only, primarily IE6 users. The problem is with the two column layout I have is that if there's a wide element in the main content of...
12
1822
by: dmorand | last post by:
I'm trying to get a 3 column layout with equal widths. Here is my page: domosworld.net I want it so the two gray borders in the middle always extend to the bottom of the page. I have it setup...
0
7099
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
6964
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7123
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
1
6842
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
5430
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
4559
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3069
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
1
598
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
262
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.