10 replies [Last post]
hoofs
hoofs's picture
Offline
newbie
UK
Last seen: 8 years 36 weeks ago
UK
Joined: 2011-02-06
Posts: 6
Points: 7

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

hoofs
hoofs's picture
Offline
newbie
UK
Last seen: 8 years 36 weeks ago
UK
Joined: 2011-02-06
Posts: 6
Points: 7

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 27 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

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.

hoofs
hoofs's picture
Offline
newbie
UK
Last seen: 8 years 36 weeks ago
UK
Joined: 2011-02-06
Posts: 6
Points: 7

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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 27 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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 Big smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 27 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Hugo wrote: Erm is this

Hugo wrote:

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Wasn't paying attention

Wasn't paying attention Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 27 weeks 6 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Hugo wrote: Wasn't paying

Hugo wrote:

Wasn't paying attention Smile

I got you beat, I don't care about Chrome. Right up there with IE6. Tongue

hoofs
hoofs's picture
Offline
newbie
UK
Last seen: 8 years 36 weeks ago
UK
Joined: 2011-02-06
Posts: 6
Points: 7

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.