fumblies

I'm not sure what I did wrong but there is a gap between the div tag from my main content div and the footer div as shown below:



There wasn't a gap in the DW preview, but when I test it out in Safari and Firefox, there it is.

By right, that should not be a problem, since my footer is just a blank white rectangle so the gap would not be seen if the background color of my wrapper div is also white. But I'm also using a background image in my wrapper div, so is that the reason why the white background doesn't show?

I'm new with the table-less css method of creating websites, so I need some help from you css experts.Thanks!

Aarlev

Can you post the code as it's really hard to help you without it? There's no problem in having a background-image and background-color in the same DIV though.

__________________
//PORTFOLIO\\

fumblies

Html:
css:

Aarlev

Remove the height on #content. That should solve it.

__________________
//PORTFOLIO\\

Aarlev

Oh and remove all background images apart from the one on #container.

Set the background image like this on #container..

background:url(folder/yourname.fileformat) no-repeat top;

and then set the background-color to #fff.

Also I'd remove the internal CSS and put it in the external stylesheet, just easier for you. And then you could do it like this.

HTML:

<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

CSS:
html {
margin:0;
padding:0;
}

body {
margin:0;
padding:0;
background-color:#3C135E;
text-align:center;
}

#container {
width: 800px;
background-color: #fff;
background:url(images/content.jpg) no-repeat top ;
margin: 0 auto;
}

#header {your attributes here}

#navigation {your attributes here}

#content {your attributes here}

#footer {
background-color:#fff;
width:800px;
height:49px;
}

No need to put a DIV inside your footer either. You could just put a P with a class in there instead or just put your font styles in #footer.

Hope this helps you, otherwise just ask.

__________________
//PORTFOLIO\\

fumblies

Thanks a lot for the help! I really appreciate it! I tried doing this and it worked for a while, but then after tweaking it a little, it stopped working again and the gap came back. I don't know where the problem lies now. I've decided to use just a white bg color for my footer instead of a white rectangle image.

So this is my css right now:
HTML:
Here's a screenshot once again...

Aarlev

You're welcome mate.

It's because the footer is inside the main container. If you want the footer inside the main container just put a DIV inside the main container before the footer with your main content inside it. Does that make sense?

Anyways I've created a quick example for you here to illustrate it better. Just view the source and lift the code if you need to.

http://andersbschjorring.com/Soeren/index.htm

The CSS is here..

http://andersbschjorring.com/Soeren/fumblies.css

__________________
//PORTFOLIO\\