SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    my fixed element not displaying right in IE

    I have this CSS:

    Code:
    #mystuff {
    	outline:dashed;
    	outline-width:medium;
    	outline-color:#990000;
    	display:table-cell;
    	background-color:#FFFFCC;
    	padding:5px;
    	position:fixed;
    	top:100px;
    	left:400px;
    	z-index:400px;
    }
    #mystuff tr{
    	color:#990000;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    	font-weight:bold;
    }
    #mystuff a{
    	color:#990000;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:14px;
    	font-weight:bold;
    	display:table-cell;
    	text-align:center;
    }
    which pertains to this:
    HTML Code:
    <div id="mystuff">
    <a href="https://www.kranichs.com/request_price.php?cid=87&cpage=">My Quote</a>
    <table><tr>
    <td><img src="https://www.kranichs.com/product_images/987_sm_PT554-DE_S.jpg" width="75" height="75" /></td>
    <td><img src="https://www.kranichs.com/product_images/995_sm_PT564-DE_S.jpg" width="75" height="75" /></td>
    <td><img src="https://www.kranichs.com/product_images/925_sm_8071_S.jpg" width="75" height="75" />
    </td><td>More...</td>
    </tr></table>
    <div align="right">close</div>
    </div>
    in firefox id displays a dashed outline and is in a fixed position. in IE it is just in the body not in a fixed position and does not show the dashed outline either...

    any help is appreciated.

    Thanks.
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Internet Exploder does not support position:fixed

    The way to handle it is to use an IE conditional to specify position:absolute for IE and then use JScript (either in a separate script or within an expression in the CSS) to reposition the element by the scroll amount.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    felgall is right, position:fixed is not supported in IE. Perhaps instead of using javascript, make the page using position: absolute;, it shouldn't take too much time.
    Zack

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The following CSS will fix the object with id="fixed" to the top of the screen in IE6. Simply use it to override the standard position:fixed. Add the offset distance if required. You can also do the same for left to fix it for horizontal scrolling.

    For quirks mode replace documentElenent with body.

    Code:
    <!--[if lt IE 7]>
    <style>
    #fixed {
      position:absolute;
      top:expression(eval(document.documentElement.scrollTop));
    }
    </style>
    <![endif]-->
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    IE6 doesn't understand outline either so you will have to use a border instead.


Bookmarks

Posting Permissions

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