By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

css firefox nightmare!!

P: 5
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.animediastudios.com/css/

any help is much appreciated

Many Thanks
Warder
Jan 9 '08 #1
Share this Question
Share on Google+
12 Replies


P: 37
First, Validate your Markup to insure Interoperability. Refer to Web page Interoperability

James
Jan 9 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 9 '08 #3

P: 26
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.
Jan 9 '08 #4

P: 5
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
Jan 10 '08 #5

Death Slaught
100+
P: 1,137
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
Jan 10 '08 #6

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 10 '08 #7

Death Slaught
100+
P: 1,137
[To:drhowarddrfine] I thought you were going away for 2 weeks?[/END]

Thanks, Death
Jan 10 '08 #8

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 10 '08 #9

Death Slaught
100+
P: 1,137
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
Jan 10 '08 #10

P: 37
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
Jan 10 '08 #11

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jan 10 '08 #12

hoist1138
P: 6
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,
Jan 10 '08 #13

Post your reply

Sign in to post your reply or Sign up for a free account.