Browser compatibility problem

[treigh]

Hi guys,

I'm currently working on a project and everything is looking good except for 2 things. Please consult my code (XHTML & CSS) to get an idea of the problems


1) (line 45) => My "#main" DIV is all broken in IE7 when I include the "contentbox_main" DIV
2) (line 60) => in my "contentbox_main" DIV, Why is there a white space between the "body" DIV and the "btm" DIV in Firefox?

The site is located here:

http://crm.energycrew.ca/jkb/default.html

[abduraooft]

2) (line 60) => in my "contentbox_main" DIV, Why is there a white space between the "body" DIV and the "btm" DIV in Firefox?


Your background image http://crm.energycrew.ca/jkb/includes/themes/default/images/bg/jkb_bg-contentbox-btm.gif has some spacing at the top. Just crop it or apply some margin-top:-10px; to the bottom div.

[treigh]

Your background image http://crm.energycrew.ca/jkb/includes/themes/default/images/bg/jkb_bg-contentbox-btm.gif has some spacing at the top. Just crop it or apply some margin-top:-10px; to the bottom div.

Thanks a lot.

Any idea why the display is so distorted in IE?

[Candygirl]

1) (line 45) => My "#main" DIV is all broken in IE7 when I include the "contentbox_main" DIV
you have this:
#main {
width: 960px;
min-height: 372px;
margin: 0 auto;
background:url(jkb_bg-content.png) center center no-repeat;
}
You ask your background to be vertically centered what it does. It is visible on IE because #main has the layout (http://www.satzansatz.de/cssd/onhavinglayout.html) and comes down with the content of the floats (wrong behavior). In FF your main's height takes just the 372 min-height, that's why it doesn't seams to be centered as in IE.

Just correct it like this:
#main {
width: 960px;
min-height: 372px;
margin: 0 auto;
background:url(jkb_bg-content.png) center top no-repeat;
}


2) (line 60) => in my "contentbox_main" DIV, Why is there a white space between the "body" DIV and the "btm" DIV in Firefox?

This is a collapsing margins (http://www.w3.org/TR/CSS21/box.html#collapsing-margins) issue. The margin-bottom of the last element p is collapsed width the content div. To avoid that you have different options:

- remove the margin-bottom for this p
- use a padding-bottom or border-bottom on .body
- apply to .body a property that will establish a new formating context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting)

[treigh]

you have this:
#main {
width: 960px;
min-height: 372px;
margin: 0 auto;
background:url(jkb_bg-content.png) center center no-repeat;
}
You ask your background to be vertically centered what it does. It is visible on IE because #main has the layout (http://www.satzansatz.de/cssd/onhavinglayout.html) and comes down with the content of the floats (wrong behavior). In FF your main's height takes just the 372 min-height, that's why it doesn't seams to be centered as in IE.

Just correct it like this:
#main {
width: 960px;
min-height: 372px;
margin: 0 auto;
background:url(jkb_bg-content.png) center top no-repeat;
}



This is a collapsing margins (http://www.w3.org/TR/CSS21/box.html#collapsing-margins) issue. The margin-bottom of the last element p is collapsed width the content div. To avoid that you have different options:

- remove the margin-bottom for this p
- use a padding-bottom or border-bottom on .body
- apply to .body a property that will establish a new formating context (http://www.w3.org/TR/CSS21/visuren.html#block-formatting)

It worked. Thank you so much.

I can't believe I couldn't see it, I guess I'm really tahnkful this forum exists.

Once again thans alot!