Jump to content

Input Fields Background-color: Transparent;


Elemental
 Share

Recommended Posts

Hey Folks, Is there a work-around this or is it just the way it is...? I've read that IE has a problem with transparencies; is not being able to acces an input field one of them?I have the following CSS on my forms' page which renders the input field transparent with a thin black border in both IE and FF.input{background-color: transparent;border-style: solid;border-width: 1px;border-color: #000;}However, although rendered correctly, IE prevents me from clicking into the field, no I beam, but will allow me to type in the field if I tab into it.Peace,Elemental

Link to comment
Share on other sites

Does this only happen when the background color is set to transparent?Do you have any absolute or relatively positioned elements that may be nearby?
Ingolme, Thank you for the reply, it's much appreciated.Yes to both questions. I have the form itself wrapped in a <div> and it's set to position: absolute;Peace,Elemental
Link to comment
Share on other sites

Try removing the transparency line from your CSS and see if that changes anything about whether you can click it on IE. that will tell you if it even has anything to do with the transparency at all.

Link to comment
Share on other sites

Try removing the transparency line from your CSS and see if that changes anything about whether you can click it on IE. that will tell you if it even has anything to do with the transparency at all.
Vin_Tanner, Thanks for the reply, it's appreciated.I did, it's only happening when I use the transparency value, colors are okay, and only with IE. The same css values work fine with FF, Opera and Safari on Win-platform. I don't have a mac so I don't know what the story is there.Peace,Elemental
Link to comment
Share on other sites

I can't seem to reproduce the problem. Can you show the HTML of the page?
Ingolme, Thank you again, much appreciated.Sorry for the late reply, out all day working on the set for a show. Here's the code, I'm sure you'll see a billion + things wrong with it but I'm still learning as I work on it. One thing I just noticed was that the arrow became an I beam when the tip of it just touched the top border line of the fields; I was then able to click into the field.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>My Form</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="Description" content="" /><meta name="Keyword" content="" /><meta name="robots" content="all" /><meta name="distribution" content="global" /><script type="text/javascript" src="jsLib/cntcForm.js"></script><link rel="shortcut icon" href="favicon.ico" /><style type="text/css">html, body{margin: 0px;padding: 0px;border: 0px;background-color: #CCC;background-image: url("images/ShadowCloseUp.jpg");background-repeat: no-repeat;background-position: top center;background-attachment: scroll;font-family: 'verdana','arial','helvetica';}img.centered{display: block;margin-left: auto;margin-right: auto;}#hrLine{position: absolute;margin-top: -8px;margin-left: 213px;}#requiredTxt{text-align: center;font-size: 10pt;margin-top: 150px;margin-left: 0px;}form{position: absolute;margin-top: 20px;margin-left: 145px;}p, label{font-size: 10pt;}input, textarea{padding-left: 5px;}#nameFld,#phone,#email1,#email2,#message{background-color: transparent;border-style: solid;border-width: 1px;border-color: #000000;}#nameNnumber{margin-top: 0px;margin-left: 115px;}#emails{margin-top: -15px;margin-left: 100px;}#messageBox{margin-top: -5px;margin-left: 205px;}textarea{width: 300px;height: 100px;}#submitBtn{width: 59px;height: 61px;margin-top: -15px;margin-left: 455px;}#btmNav{position: absolute;margin-top: 290px;margin-left: 483px;font-size: 10pt;font-weight: bold;padding: 5px 0px 6px 0px;}#btn_homePg{position: relative;margin-top: 277px;margin-left: 0px;}#footerSpace{position: absolute;margin-top: 310px;}a:link {text-decoration: none; color: #000000;}a:visited {text-decoration: none; color: #fe6836;}a:hover {text-decoration: none; color: #9900FF;}</style></head><body onload="setFocus();"><div id="requiredTxt">all fields required</div><img id="hrLine" class="centered" src="images/hrLine.png" width="576" height="2" border="0" alt="" title="" /><form onsubmit="return checkFields(this);" name="contactForm" id="contactForm" action="webformmailer.php" method="post"><input type="hidden" name="ContactFrom" value="Contact_Form" /><input type="hidden" name="redirect" value="thankYou.html" /><p id="nameNnumber"><label for="nameFld">Name:</label>  <input name="name" type="text" size="20" maxlength="70" id="nameFld" />      <label for="phone">Phone No.:</label>  <input name="phone" type="text" size="20" maxlength="14" id="phone" /></p><p id="emails"><label for="email1">E-mail:</label>  <input name="email1" type="text" size="20" maxlength="60" id="email1" />     <label for="email2">Confirm E-mail:</label>  <input name="email2" type="text" size="20" maxlength="60" id="email2" /></p><p id="messageBox"><label for="message">Your Message</label><br /><textarea name="message" id="message" size="35" maxlength="250"></textarea></p><input type="image" src="images/btn_Takoda.png" name="submit" id="submitBtn" alt="Submit Button" title="Submit Button" onmouseover="mouseOver()" onmouseout="mouseOut()" /></form><div id="btmNav"><a id="homePg" href="index.html">Home</a></div><div id="footerSpace"><img class="centered" src="images/footerSpace.png" width="800" height="20" alt="footerSpace" title="footerSpace" border="0"</div></body></html>

Link to comment
Share on other sites

It's crazy, but the error only happens when the page is running in standards compliant mode. In quirks mode it allows you to select the fields with the mouse.In standards compliant mode you can select the input by clicking right on the border.My suggestion? Use a 1x1 transparent GIF as the background of the fields to see if that works. It looks like a mistake in Internet Explorer 7's rendering engine: It doesn't detect a focus event on the transparent parts of the input.

Link to comment
Share on other sites

It's crazy, but the error only happens when the page is running in standards compliant mode. In quirks mode it allows you to select the fields with the mouse.In standards compliant mode you can select the input by clicking right on the border.My suggestion? Use a 1x1 transparent GIF as the background of the fields to see if that works. It looks like a mistake in Internet Explorer 7's rendering engine: It doesn't detect a focus event on the transparent parts of the input.
Ingolme, Thanks again.Yeah, that worked. Want to know what else worked? Nothing?I wrote the code:
background-image: url("../images/transparentBg.gif");

then refreshed the page, didn't even create the 1x1 transparent GIF, and that worked too, crazy stuff amigo.Of course I did add it later but I thought that was interesting. Learn, learning, learned, till next time...Peace,Elemental

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...