Hi

I'm learning to create pure CSS layouts plus marking up .psd files. Could someone please advise me with an issue that's cropped up in a test file I'm working on.

It's the same old thing...it's fine in Firefox but there's a problem in IE 7. I'm getting unwanted white space between divs that hold images. If someone could take a look I'd be grateful.

Please note my CSS is in the head of the document rather than in an external file (just for this test) so rather than post the code here I thought people might just look at the source code.....

the url is ....
www.juanchandler.com/project1/
Once again the problem is that unwanted white space appears beneath the images on the far left.

Many thanks

Juan

first of all, why are you slicing that image? I quess you still think in tabledesign :P I would recommend to use 1 div and place that image (the whole image not 3 slices) into that div. Make it float left and position it with margin OR with position:relative; whatever you like best.

If you still want to use the slices, try to place at the top of you're css:

*{
margin:0;
padding:0;
}

this means every element in you document will have their margins and paddings set to 0.

*{
margin:0;
padding:0;
}

As 'neat' as that seems, it's not advisable to do that, it does cause problems with other things. It's a good practice to zero out margins and padding on all of your major elements. You might want to try this instead: http://meyerweb.com/eric/tools/css/reset/

Something else you need to do. I see you have a lot of floats with no widths defined. When you float an element (other than an image), you MUST define a width, otherwise you're leaving it up to the browser to GUESS, and you don't want that!

Your #container isn't 'containing' anything because you have not properly CLEARED your floats.

SolidEagle is right, you've got way too many divs for that, and it appears you're still thinking in tables and not a css-based layout.

You might want to read thru this: www.cssslicingguide.com

Hello and thanks alot for your reply....
I think it's so embarassingly obvious that I'm a newbie to CSS layouts. I was wondering if you or anyone else might take a look at this screenshot of the full .psd since what I've done is only part of the wider picture.....
http://www.juanchandler.com/project1/screenshot.html

So could you or anyone else say verbally what would be the best approach to mark it up with CSS
I don't mean give me the code but just some starting points on where the slices should be and the div layout.

Many thanks

Juan