Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post

    Internet Explorer fixed position footer IE + bonus

    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
    Code:
    	<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
    Code:
    .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
    Code:
    <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
    Code:
    .redaction_tabs{width:31%; display:inline-block; border:1px solid black; cursor:pointer; text-align:center;}
    thanks for help

    LEFT = FIREFOX - RIGHT = IE
    Attached Thumbnails Attached Thumbnails fixed position footer IE + bonus-firefox.png   fixed position footer IE + bonus-ie.png  
    Last edited by Jahren; 11-24-2009 at 02:02 PM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Jahren View Post
    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.

    Quote Originally Posted by Jahren View Post
    HTML
    Code:
    	<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.

    Quote Originally Posted by Jahren View Post
    CSS
    Code:
    .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?

    Quote Originally Posted by Jahren View Post
    #2
    display:inline-block wont work as expected for IE
    Are 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    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

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Jahren View Post
    #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.

    Quote Originally Posted by Jahren View Post
    TESTED IN IE8 and it works fine for both problems so its IE7 and lower
    Not sure what the deal is with position: fixed then. Make sure you're not in quirks mode?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •