Sun, 2011-02-06 15:23
Hi everyone
I've 'lurked' about here for a while, trying to solve a CSS problem I have. I wouldn't usually make a forum post on a problem unless I've tried EVERY other avenue (which I have!)..
Basically, I'm working on a site:
http://joneslloyd.webfactional.com/thedesigntyrant
The problem seems to be twofold:
1) The footer 'cityscape' image (the building silhouettes) sometimes don't appear in the footer unless you refresh the page. This isn't the MAJOR issue though
2) Upon resizing the browser window (so that a vertical scrollbar appears), it's observable that the background footer image gets cut-off/overlapped by the main content (so, when the main content is well ABOVE the background footer image, it's all visible, but as soon as the main content starts to overlap the background footer image, the grey colour cuts over it).
I was just wondering if anybody has a solution/solutions to this?
Again, I wouldn't usually post, as I'm normally a believer in finding out for oneself (for learning's sake & not wasting the time of others), but this has stumped me.!
Cheers
Hoofs
Sun, 2011-02-06 15:31
#1
Sorry, extra info' that I
Sorry, extra info' that I neglected to provide first of all:
The TOP background image (the 'bubbles') is built into the body{} in the CSS (background image), and because two background images can't be used in one class/element, I had to create another class called .bg_bottom{}, with its own background image for the footer cityscape image, so:
<body> <div class="main"> ALL OF THE CONTENT HERE </div> <div class="bg_bottom"> </div> </body>
The bg_bottom DIV contains the cityscape footer image, and the body contains the header background image.
Sun, 2011-02-06 18:19
#2
First thing would be to
First thing would be to validate your CSS: Jigsaw validator.
I think the effect you are after is to make .bg_bottom { position: fixed; } instead of absolute.
Sun, 2011-02-06 18:38
#3
Ah thanks! The position:
Ah thanks!
The position: fixed; thing has solved the scroll disappearing problem.
The only other issue is that when the page loads, in certain browsers (Chrome), the footer doesn't immediately appear and a quick tap of 'F5' will remedy this.. I was just wondering what that could be.
Also, thanks for that validator. It's useful.
Sun, 2011-02-06 19:35
#4
I really can't answer the
I really can't answer the chrome issue. I really wanted to like it but it just seems to cause frustration moments and then I end up not caring about it. I think Chrome is trying to be html5 compliant at the cost of everything else. Not ready for prime time.
Sun, 2011-02-06 19:38
#5
The only reason Chrome was
The only reason Chrome was released was to niggle MS, what earthly reason do Google really need to get into all these extra curricular activities... oh yeah absolute internet domination 
Sun, 2011-02-06 19:39
#6
Erm is this footer issue not
Erm is this footer issue not what was discussed the other day vis a vis the image dimensions thang?
Sun, 2011-02-06 19:44
#7
Hugo wrote: Erm is this
Erm is this footer issue not what was discussed the other day vis a vis the image dimensions thang?
Well, this is a background image in this case.
Sun, 2011-02-06 20:02
#8
Wasn't paying attention
Wasn't paying attention 
Sun, 2011-02-06 20:04
#9
Hugo wrote: Wasn't paying
Wasn't paying attention
I got you beat, I don't care about Chrome. Right up there with IE6. 
Sun, 2011-02-06 23:49
#10
hey guys, i won't worry about
hey guys, i won't worry about the Chrome thing.. bugger Chrome..
Thanks for your help. Much appreciated.