...

View Full Version : Can't find an IE z-index bug fix that works



actualidesign
10-21-2009, 12:16 PM
In my website design, as seen here, (http://www.actualidesign.com) 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!

abduraooft
10-21-2009, 12:36 PM
Can't you just apply that image as a background image in style?

actualidesign
10-21-2009, 08:31 PM
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.

abduraooft
10-22-2009, 08:03 AM
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
#text {
background:transparent url(http://www.actualidesign.com/Text.jpg) no-repeat scroll 0;
height:294px;
width:338px;
}

actualidesign
10-22-2009, 11:21 AM
So what? Your current background image is applied on the body element, and you may apply a different background element to another element, say
#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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum