10 replies [Last post]
peterdouglas
peterdouglas's picture
Offline
Enthusiast
Montréal, Canada
Last seen: 10 years 15 weeks ago
Montréal, Canada
Timezone: GMT-4
Joined: 2005-06-20
Posts: 162
Points: 10

I'm baffled about this... the website uses php includes, so in theory, the code in question should be the same on all of the pages. It's just a simple 4 page website, but on the first three pages, there's a white gap on both sides of the footer bar at the bottom of the page. For example:

http://geocleaning.ca/ (don't mind the missing header - I'm making one to go above the navigation bar, home page will also be revamped at that time).

Then on the contact page, it's flush on the right side, but a HUGE gap on the left. http://geocleaning.ca/contact.php

Also, in IE6 the image of the spray bottle won't go flush to the footer as it does in Firefox. Not sure about IE7 as I don't have it yet. Any ideas on that too would be great. I'm not sure what's causing this. FYI: the html and the css all validate.

On a sidenote, if anyone has a more attractive looking background image I could use, maybe one where the blue matches the navigation and footer bars better, and suits the theme of a cleaning company, let me know about that too. I'll keep looking.

Thank you in advance for any ideas and input on these matters! Smile

You're only young once, but you can stay immature indefinately -- Ogden Nash

Triumph (not verified)
Anonymous's picture
Guru

You've got <div

You've got <div id="contact"> wrapped around the footer. Is that on purpose?

peterdouglas
peterdouglas's picture
Offline
Enthusiast
Montréal, Canada
Last seen: 10 years 15 weeks ago
Montréal, Canada
Timezone: GMT-4
Joined: 2005-06-20
Posts: 162
Points: 10

Triumph wrote:You've got

Triumph wrote:
You've got <div id="contact"> wrapped around the footer. Is that on purpose?

Yes, that was to center the contact information. Since it looked rather odd, I changed the div to "content" (which got rid of the huge gap on the left, thanks)! That got me thinking about the margins and padding in the "content" div:

#content { margin-left: 10px; margin-right: 10px; padding: 0 5px 0 5px; }

If I remove that div from the external stylesheet, it solves the problem of the gaps around the footer, but still leaves some extra space around the picture on the contact page. It also makes the text go right against the edges instead of giving a few extra pixels of space - particularly on the About and Services pages. Unfortunately, that space is also being applied to the footer. Short of creating a bunch of new divs (leading to div-itis) Wink is there a better way to set that up?

Since we're on the topic of weird things... on the services page at http://geocleaning.ca/services.php the bullets next to the vertical picture are flush with the text, yet below the picture the bulleted points are indented. I'm not picky, but would like them to match - either all indented or all flush with the text. Any thoughts on that? I don't see anything obvious to explain why it's like that.

You're only young once, but you can stay immature indefinately -- Ogden Nash

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Can't help with the

Can't help with the technical stuff sorry, but as to this comment...

Quote:
On a sidenote, if anyone has a more attractive looking background image I could use, maybe one where the blue matches the navigation and footer bars better, and suits the theme of a cleaning company, let me know about that too. I'll keep looking.

...water seems the obvious choice if it's not too kitch. A quick google got this page - http://www.hooverwebdesign.com/graphics/content/water/index.html

See if any of those appeal Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

peterdouglas
peterdouglas's picture
Offline
Enthusiast
Montréal, Canada
Last seen: 10 years 15 weeks ago
Montréal, Canada
Timezone: GMT-4
Joined: 2005-06-20
Posts: 162
Points: 10

Thanks Smee. I had

Thanks Smee. I had considered water too, but couldn't find one that I thought looked good on that website (though I'm still open to that idea). I did, however, find a subtle greyish stucco looking background on that website you found. I'll keep looking later.

As for the CSS issues, any thoughts on that? I'm thinking an extra div or two could solve the gap problem, but I'm still baffled as to why the bulleted points next to the picture on the Services pages are indented, while those further down on the page aren't. They use the same CSS...

You're only young once, but you can stay immature indefinately -- Ogden Nash

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

Quote:<snip> If I remove

Quote:
<snip>
If I remove that div from the external stylesheet, it solves the problem of the gaps around the footer, but still leaves some extra space around the picture on the contact page. It also makes the text go right against the edges instead of giving a few extra pixels of space - particularly on the About and

:? why on earth don't you just move the footer out of #content into the #wrap div i.e footer follows after #content in the flow then you have #content and it's rules in place for the content! do you not think that you are thinking things through rather illogically ? 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: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

peterdouglas wrote:but I'm

peterdouglas wrote:
but I'm still baffled as to why the bulleted points next to the picture on the Services pages are indented, while those further down on the page aren't. They use the same CSS...

Peter the bullets are indented, try this #leftpic {display:none;} then look at the page , bullets indented! think about the effect the float will and should have.

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

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 4 years 46 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

peterdouglas wrote:I'm still

peterdouglas wrote:
I'm still baffled as to why the bulleted points next to the picture on the Services pages are indented, while those further down on the page aren't. They use the same CSS...

The problem is with the #leftpic. Remove the image, and all bullets behave in the same way. Also you have your 'img' tags inside 'p' tags. I can't understand why. Neither of these solve the problem, but it's the best direction to start looking.

Life's a journey. Enjoy the trip.

peterdouglas
peterdouglas's picture
Offline
Enthusiast
Montréal, Canada
Last seen: 10 years 15 weeks ago
Montréal, Canada
Timezone: GMT-4
Joined: 2005-06-20
Posts: 162
Points: 10

I don't know what I was

I don't know what I was thinking... just before I read your reply, that same thought occurred to me. Perhaps looking at the same code for too long, and lack of sleep, had something to do with that. The div now ends before the footer, rather than after it.

As for the bullets next to the picture not being indented, I now understand that there are some factors causing this, but still haven't worked out how I will indent them (or not indent the other ones, just so long as they all match). Can anyone give me a hint? Wink I'll keep looking.

Lastly, on this page: http://geocleaning.ca/contact.php the image at the bottom right has unwanted space to the right (in Firefox) and unwanted space on right AND bottom in IE6 (not sure about IE7 as I don't have it yet). Setting margins and padding to zero for the picture, and on the top of the footer have not helped. This picture should be flush to the bottom right with no space around it. Obviously I'm missing something... any thoughts? I don't design websites that often, so I forget things, and there's a lot I haven't learned yet.

Thanks! Smile

You're only young once, but you can stay immature indefinately -- Ogden Nash

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

it's the same problem you

Smile it's the same problem you were having with the footer; the image is floated in #content which has margins! use right:-10px to pull it across.

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

peterdouglas
peterdouglas's picture
Offline
Enthusiast
Montréal, Canada
Last seen: 10 years 15 weeks ago
Montréal, Canada
Timezone: GMT-4
Joined: 2005-06-20
Posts: 162
Points: 10

Excellent! Thanks guys - got

Excellent! Thanks guys - got it all all working now. Smile

You're only young once, but you can stay immature indefinately -- Ogden Nash