...

View Full Version : fixed position footer IE + bonus



Jahren
11-23-2009, 09:11 PM
hi there

#1
I'm trying to have a persistant page footer.
Works perfectly in firefox 3.5.5, but is very wrong in IE7 and lower
(Look both attachments also featuring my second ie bug :P)

code is:
HTML


<div class='redaction_marquise_cheat'>
<div class='redaction_marquise'>Marquise - info - id&eacute;e 1 - id&eacute;e 2 - id&eacute;e 3</div>
</div>


CSS


.redaction_marquise_cheat{position:fixed; background-color:#8A9738; width:100%; height:30px; margin:0; padding:0; bottom:0px; z-index:2;}
.redaction_marquise{font-size:1.5em; font-weight:bold; position:relative; width:100%; margin:0; padding:0; margin-top:5px;}



#2
display:inline-block wont work as expected for IE
(Look for attachements on the right where it says "Elements precrits")
I want them to be like it is in firefox.

HTML


<div style='padding:5px 2px 5px 2px; border:5px groove black;'>
<!-- Tabulation -->
<div class='redaction_tabs'>Element Prescrits</div>
<div class='redaction_tabs'>Probleme</div>
<div class='redaction_tabs'>Questionemment</div>
</div>


CSS


.redaction_tabs{width:31%; display:inline-block; border:1px solid black; cursor:pointer; text-align:center;}


thanks for help

LEFT = FIREFOX - RIGHT = IE

Arbitrator
11-24-2009, 06:37 AM
Works perfectly in firefox, but is very wrong in IE
(Look both attachments also featuring my second ie bug :P)You should provide version numbers. There are vast differences between MSIE6 and WIE8, for example.


HTML


<div class='redaction_marquise_cheat'>
<div class='redaction_marquise'>Marquise - info - id&eacute;e 1 - id&eacute;e 2 - id&eacute;e 3</div>
</div>
Probably makes more sense to use HTML list elements here, but getting the simple hyphen separators would be a pain.


CSS


.redaction_marquise_cheat{position:fixed; background-color:#8A9738; width:100%; height:30px; margin:0; padding:0; bottom:0px; z-index:2;}
.redaction_marquise{font-size:1.5em; font-weight:bold; position:relative; width:100%; margin:0; padding:0; margin-top:5px;}
MSIE6 doesn't support position: fixed. Maybe that's it? Also, why are you using position: relative and width: 100% on the inner element and why are you declaring zero-width margins and padding on elements that normally have that by default?


#2
display:inline-block wont work as expected for IEAre you accounting for all properties that affect the width (like padding)? Have you tried floats yet? I believe IE's implementation of that declaration was proprietary to their browser up until WIE8.

Jahren
11-24-2009, 02:01 PM
its IE7, sorry about that :P
and firefox latest 3.5.5

#1
The content in the footer is not good, I could have put in some lorem ipsum.

#2
Without display:inline-block, The width is not applied on those divs...

thanks.

edit:
TESTED IN IE8 and it works fine for both problems so its IE7 and lower

Arbitrator
11-24-2009, 08:12 PM
#2
Without display:inline-block, The width is not applied on those divs...Like inline-blocks, floats can also take widths. You can use overflow: auto on the parent to force it to wrap around any floats that escape the box.


TESTED IN IE8 and it works fine for both problems so its IE7 and lowerNot sure what the deal is with position: fixed then. Make sure you're not in quirks mode?

Jahren
11-24-2009, 08:17 PM
Hi and thanks for the answer!

I'm going to try with floats even if I wanted to keep away from it :P

I'm not in quirks mode. doctype strict.
I just found out an other bug in chrome xD



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum