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
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Internet Explorer Can't find an IE z-index bug fix that works

    In my website design, as seen here, I've used the z-index property to position the form's text field on top of the image that contains the text of the page. The problem is that in IE, the z-index property doesn't function in the same way as other browsers. I've found suggestions to use negative z-indexes and a few others, but nothing that I've tried has worked.

    Here's my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html>
    <head>
    <title>Actuali Design</title>


    <STYLE TYPE="text/css" MEDIA=screen>
    <!--

    body
    {
    background-image:url('http://www.actualidesign.com/Background-Tile.jpg');
    background-repeat:repeat-x;
    }

    #text {
    z-index: 1;
    }


    #form {
    font-family:"Myriad Pro",Verdana,Arial,sans-serif;
    font-size:40px;
    height:40px;
    position: relative;
    z-index: 2;
    background-color: transparent;
    color: #FFFFF;
    maxlength:25;
    }

    #table {
    position: relative;
    top: 153px;
    }

    #links {
    font-family: "Myriad Pro", Verdana, Arial, sans-serif;
    font-size:11px;
    }


    a {
    color: #555555;
    }

    -->
    </STYLE>

    </head>

    <body>

    <center>

    <div id="table">

    <table width="350">
    <tbody><tr>
    <td>


    <div id="text">
    <img src="http://www.actualidesign.com/Text.jpg">
    </div>

    <div id="form"><form method="post" action="http://www.emailmeform.com/fid.php?formid=454280" enctype="multipart/form-data" accept-charset="UTF-8">
    <input name="FieldData0" ;="" style="border-width: 0pt; width: 180px; font-family: Verdana; font-style: normal; font-variant: normal; font-weight: normal;

    font-size: 25px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(255, 255, 255); background-color:

    transparent; position: relative; left: 36px; top: -81px;" type="text">
    <input src="http://www.actualidesign.com/send-button.png" value="Submit" name="Submit" style="position: relative; top: -70px; left: 48px;" border="0"

    type="image"></form></div>

    <div id="links">
    <center><a href="http://www.twitter.com/actualidesign" style="position: relative; right: 20px;">Follow me on Twitter</a>
    <br><a href="mailto:alison@actualidesign.com" style="position: relative; right: 20px;">Contact me: alison@actualidesign.com</a></center>

    </div></td>
    </tr>

    </tbody></table>

    </div></center>

    </div>

    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script><script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-10856774-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>

    </body>
    </html>

    Do you know of a fix that will work, or a way to put the text field on top, without using the z-index property?

    Thanks!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Can't you just apply that image as a background image in style?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Can't you just apply that image as a background image in style?
    I already have a sliver of the background gradient set as my background image, tiling horizontally so that it will size to the width of the window, and no smaller/bigger, so I can't set the image containing the text as background image.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I already have a sliver of the background gradient set as my background image, tiling horizontally so that it will size to the width of the window, and no smaller/bigger, so I can't set the image containing the text as background image.
    So what? Your current background image is applied on the body element, and you may apply a different background element to another element, say
    Code:
    #text {
    background:transparent url(http://www.actualidesign.com/Text.jpg) no-repeat scroll 0;
    height:294px;
    width:338px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    actualidesign (10-22-2009)

  • #5
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    So what? Your current background image is applied on the body element, and you may apply a different background element to another element, say
    Code:
    #text {
    background:transparent url(http://www.actualidesign.com/Text.jpg) no-repeat scroll 0;
    height:294px;
    width:338px;
    }
    Ooh, I didn't know I could do that! It seems to be working. I just need to get the image properly positioned, now, which shouldn't be difficult. Thanks!


  •  

    Tags for this Thread

    Posting Permissions

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