css firefox nightmare!!

[warder21]

Hi all,

I am new to this forum but hope somebody can help :o)

i am having a go at creating a page using css layouts (layers) as i hear it is the latest thing for SEO etc etc. I am doing ok, untill i come to viewing my site in firefox!! I have set a background image for the body of the page to be at the bottom (as a footer) in IE this works fine, but when looking in firefox it appears to show the fooeter background image in the middle of the page! any ideas why this may be happening?

heres a link to the page:

http://www.animediastu dios.com/css/

any help is much appreciated

Many Thanks
Warder

[jamesicus]

First, Validate your Markup to insure Interoperabilit y. Refer to Web page Interoperabilit y

James

[drhowarddrfine]

The problem is you are using IE as your reference. IE is 10 years behind web standards. Firefox is a modern browser and implementing your markup perfectly. Absolutely positioned items are removed from the normal flow and rise up to the next positioned parent. IE, as usual, is ignoring this rule.

Always use Firefox or Opera as your initial test to make sure your valid code is working. Then adjust for IEs quirks and bugs.

[astangeland]

Just a guess would be to set your body and html height to 100%:

body, html { height: 100%; }

Probably not it, but its something to try.

[warder21]

Thanks for that :o) that seems to have worked

"body, html { height: 100%; }"

I have how ever encountered another problem and was wondering if you could help with this. How do you make a div height strech to its content? I have it set as 100% height but it does not seem to do it :o( sorry to be a pain, but i am new to all this.

Here is the css code i have used to create the div:

#menuLeft {
height:100%;
width: 769px;
background-color: #AFDDFF;
background-image: url(left-bottom-image.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

Thanks for any help in advance again.

Warder

[Death Slaught]

Height does not work correctly in IE. IE treats height as 'min-height'. And, as you might expect, min-height doesn't work at all in IE.

Hope it helps, Thanks, Death

[drhowarddrfine]

Your height of 100% will be the height of its parent. I don't believe you have a height set for the parent container so there is nothing for it to reference.

[Death Slaught]

[To:drhowarddrfi ne] I thought you were going away for 2 weeks?[/END]

Thanks, Death

[drhowarddrfine]

I am. But over breakfast/lunch, I might pop in, but I'm not doing any heavy lifting right now. I'm stretched way too thin.

[Death Slaught]

I am. But over breakfast/lunch, I might pop in, but I'm not doing any heavy lifting right now. I'm stretched way too thin.

Well when you get a chance

Thanks, Death

[jamesicus]

I much prefer to offer help and suggestions when a live URL is provided -- the Markup and CSS/Scripting code can then be displayed, examined and thoroughly analyzed (makes for much shorter posts too).

James

[drhowarddrfine]

Yep. Sometimes images are needed, too, but having to copy/paste/group everything together in your own editor to view it is a pain. However, if it's not online, there's nothing else to do.

[hoist1138]

Thanks for that :o) that seems to have worked

"body, html { height: 100%; }"

I have how ever encountered another problem and was wondering if you could help with this. How do you make a div height strech to its content? I have it set as 100% height but it does not seem to do it :o( sorry to be a pain, but i am new to all this.

Here is the css code i have used to create the div:

#menuLeft {
height:100%;
width: 769px;
background-color: #AFDDFF;
background-image: url(left-bottom-image.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}

Thanks for any help in advance again.

Warder

Warder, not that this is the solution, but you also may want to consider zeroing out your margins for everything, and THEN start adjusting your layout, Browsers may render Default Margins differently, here is a great little snipet to use before and CSS rules get defined:
*{
margin:0px;
}
//this will FORCE all browsers to render with 0 margin, good luck,