|
|
CSS gurus: save me!!!
|
|
|
|
Senior User
Join Date: Jan 2006
Location: Naugatuck, CT
Status:
Offline
|
|
I'm doing this page now, I've got my handy CSS for dummies book next to me, but for the life of me i can't get a footer to display correctly in IE.
here's the css:
#footer {
background-color:#990000;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 150px;
z-index: 20;
}
here's the html:
<div id="footer">
content
</div>
In Safari, it looks perfect, but in Firefox and IE the red bar is showing up across the center of the page. HELP?!
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Feb 2003
Location: NY²
Status:
Offline
|
|
Could you link us to a page with all of your html and css since your footer css and html should work fine. I think maybe some other html/css might be getting in the way.
|
|
|
|
|
|
|
|
|
Senior User
Join Date: Jan 2006
Location: Naugatuck, CT
Status:
Offline
|
|
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Oct 2004
Status:
Offline
|
|
Are you talking about Explore 6? Explorer 6 doesn't recognize "bottom" for position. I'm not sure what's up with Firefox. I made a test page with your code and it works fine for me (at lease Firefox on Mac).
There is an IE only property called "layout" that might be the solution. I'll take a look and see.
|
__________________________________________________
My stupid iPhone game: Nesen Probe, it's rather old, annoying and pointless, but it's free.
Was free. Now it's gone. Never to be seen again.
Off to join its brother and sister apps that could not
keep up with the ever updating iOS. RIP Nesen Probe.
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Oct 2004
Status:
Offline
|
|
By the way, you should get the book "CSS, the missing manual". It is wonderful.
|
__________________________________________________
My stupid iPhone game: Nesen Probe, it's rather old, annoying and pointless, but it's free.
Was free. Now it's gone. Never to be seen again.
Off to join its brother and sister apps that could not
keep up with the ever updating iOS. RIP Nesen Probe.
|
|
|
|
|
|
|
|
Senior User
Join Date: Jan 2006
Location: Naugatuck, CT
Status:
Offline
|
|
Originally Posted by design219
Are you talking about Explore 6? Explorer 6 doesn't recognize "bottom" for position. I'm not sure what's up with Firefox. I made a test page with your code and it works fine for me (at lease Firefox on Mac).
Yeah, my mac firefox and safari worked fine, but on 2 PCs on IE and firefox, no dice. i am stumped.
Originally Posted by design219
By the way, you should get the book "CSS, the missing manual". It is wonderful.
I'll check into that, thanks.
|
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Oct 2004
Status:
Offline
|
|
|
__________________________________________________
My stupid iPhone game: Nesen Probe, it's rather old, annoying and pointless, but it's free.
Was free. Now it's gone. Never to be seen again.
Off to join its brother and sister apps that could not
keep up with the ever updating iOS. RIP Nesen Probe.
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Sometimes CSS gets a little sketchy for doing somewhat advanced stuff like this, or at least making it cross browser.
Another thing you could do is setup this block to be a simple widget that is rendered across the very top of your page, and add an onload Javascript event handler to your body tag to adjust this div block to move it to the bottom of the page based on the browser height. I believe there is a CSS attribute to get the element to not scroll with the rest of the page, but I'm having a hard time remembering this right now.
At any rate, you might find that a CSS/Javascript hybrid might create a little more browser consistency here, if this is an issue.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Let me know if you want the cross browser compatible JS code I use for determining browser height...
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Feb 2003
Location: NY²
Status:
Offline
|
|
besson3c, you mean position: fixed?
If I remember correctly, it's not supported in IE >7
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
mdc: yes. I never use that attribute, which is why it escaped my memory
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status:
Offline
|
|
Originally Posted by mdc
besson3c, you mean position: fixed?
If I remember correctly, it's not supported in IE >7
I think you mean IE<=5.
|
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
|
|
|
|
|
|
|
|
Professional Poster
Join Date: Oct 2004
Status:
Offline
|
|
Fixed position is not supported in IE6 either.
|
__________________________________________________
My stupid iPhone game: Nesen Probe, it's rather old, annoying and pointless, but it's free.
Was free. Now it's gone. Never to be seen again.
Off to join its brother and sister apps that could not
keep up with the ever updating iOS. RIP Nesen Probe.
|
|
|
|
|
|
|
|
Senior User
Join Date: Jan 2006
Location: Naugatuck, CT
Status:
Offline
|
|
thanks for all the advice guys and girls... i gave up and made a table. gross. i know. but it managed to do the trick.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status:
Offline
|
|
Originally Posted by design219
Fixed position is not supported in IE6 either.
Oh yeah, you're right. I was just pretty sure it's supported in IE 8.
|
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|