another silly margin thing

[johnnyblotter]

Hey folks,

I thought I had this newbie thing solved - I guess not. I'm getting a small margin at the bottom of my page in IE6. I thought this CSS would take care of it - for some reason it isn't. What am I missing?

www.jontakiff.com

#everything{margin:0px auto;background-color:#fcfcfa;}

body{margin:0px;height:100%;text-align:center;font-family:georgia,geneva,sans-serif;font-size:80%;line-height:1.5;}

#wrap{width:79%;margin:auto;text-align:left;border:1px solid black;padding-top:0;}

[ryanbutler]

The only thing that comes to mind is your footer rule has 0em:

#footer{padding:0em;margin:0;background-color:white;border-top:1px solid black;clear:both;}


Sometimes, if you don't specifically write zero for padding, some browsers, including IE are more fault tolerant. If this isn't is, someone else will have to take a look.

[WebJoel]

You have got an almost-invisible 'spacer image' in there. Either remove it, or add
img {margin:0; border:0; padding:0}
to your STYLE. I should think that you could merely remove the image now that you have enough content to fill-up the div, and enough links and stuff on the right to keep the column expanded vertically. The 'gap' is present in Firefox as well, but quite a bit less than what IE shows.
See attachement for "invisible image' details:

[johnnyblotter]

Neither of those things worked. The spacer image is just for the index page, so it doesn't explain the spacing on the other pages. I played around with the footer margin and paddings as well. Also I used margin:0px and padding:0px on the body and main divs to see what would happen. The space won't dissappear. Any help is greatly appreciated...

[Centauri]

For me, there is no margin at the bottom in IE6 or FF - exactly where is the problem?

One big problem that DOES show in FF is the #rightnav overlapping #main on a wide screen in FF. This is due to using 232px right margin on #main, whilst setting the width of #rightnav at 29% - change the width of #rightnav to 232px and it is fine (doesn't show up on IE as IE blatantly pushes #main across so that floated #rightnav can never overlap it, which makes it impossible in IE to use a left border on #rightnav to give a continuous separator line if the #main content is smaller than the #rightnav).

Cheers
Graeme

[johnnyblotter]

Thanks Ryan. Initially I had the rightnav width set to 232 pix - the problem was on widescreens, the main content was so big that it became less readable. Do you think a better solution would be to make the whole thing liquid, i.e,make the #main right margin 29% also? I guess my question is mostly about readability and presentation...

anywhoo here's the screenshot.

[Centauri]

I see you went with the percentage - looks ok.

I assume the issue is the gap between the divider line and the footer? If the content height of #rightnav is greater than content height of #main, then #main will not extend right to the footer, so neither will it's right border. When the right margin of #main and the width of #rightnav are equal, a left border on #righnav does the job nicely, but this will not work in IE as I mentioned above. A possible solution would be a faux column - enclose both the #main, #rightnav and #footer in a container with a background graphic of 1 gray dot positioned at 72% 0 and repeated y, and not use the right border on #main. (edit: just tested this and it works)

Cheers
Graeme

[johnnyblotter]

Hey, no actually the issue is the small spacer between the bottom of the footer and the bottom of the screen. There's a little 5px or something gap only in IE. Can't seem to get rid of it...thanks for the other help...!