Title: RE: [WSG] Unwanted extra space

Hi Mary

You have a padding of 10px in the banner div. Also Padding 10px in the navcontainer div. Try altering the padding rule for the navcontainer to:

padding: 0 10px;

if this doesn't shrink the whitespace enough, try the same rule in the banner div as well.

A little trick to help iron out these problems is to apply a single pixel solid border rule around the offending divs using a contrast colour to the main design. If each div has a separate colour code it is easy to see where the offending whitespace is coming from. Once you are happy that you have the issues solved, then remove the borders (you can also even use small margins which can help just to pull everything out a little). Try applying this technique to some old style table based layouts by adding a border attribute to all tables ... its very effective in demonstrating the advantages of css-p over table based layouts to clients.

I haven't tried it on your design but the IE interpretation of the box model could be the culprit of the 15px top margin problem. Try the Tantek Box Model Hack to fix the problem. There is a 'be kind to opera rule' which should follow this in the style sheet just to keep Opera happy.

I haven't found the answer for the whitespace below the footer yet but I'll let you know when I do because its yet to be solved on my current project.

HTH

Peter


-----Original Message-----
From: Mary Wright [mailto:[EMAIL PROTECTED]]
Sent: 29 September 2004 13:28
To: [EMAIL PROTECTED]
Subject: [WSG] Unwanted extra space

I'm just started working on my third table-free website and I'm trying
to pay attention to standards but I'm stumped by a couple of spacing
details and would appreciate some help.

See www.zebragraphics.co.uk/ragamuffin. CSS is at
www.zebragraphics.co.uk/ragamuffin/styles/main.css

First, I have extra space above and below the banner image - I just
want 10px space, same as at the sides.
Second, I've added a 15px top margin to the content div to get some
space between the navigation and first heading, but IE6 Windows  seems
to add more. I know, it's Windows, but why this is happening?
Last, IE5.3 Mac adds some white space below the footer, ie between the
footer background colour and the container div border.

That's it for now except for a very important disclaimer: I did NOT
choose the name for this company! :-)

Many thanks,

Mary

******************************************************
The discussion list for  http://webstandardsgroup.org/

Proud presenters of Web Essentials 04 http://we04.com/
 Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list & getting help
******************************************************

Reply via email to