homepage Welcome to WebmasterWorld Guest from 54.166.228.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
form input background color, and hover in ie6
ewwatson




msg:3609684
 1:54 am on Mar 25, 2008 (gmt 0)

Hello everyone! OK, I got this pure css form looking pretty good if I don't say so myself, "but" there are a couple issues I can't figure out on my own. The only browsers that I am having problems in is Safari and IE6 - the rest are perfect! In safari I can't get the input fields to except the background color - although the textarea does. And in IE6 as you know it does not do hover on anything but <a>. So what is the best solution for IE6 to show a:hover - javascript, expressions, alternate css? Here is the form code - thanks alot!

label, input {
display: block;
width: 300px;
float: left;
margin-bottom: 1em;
}
textarea {
display: block;
width: 300px;
height: 140px;
float: left;
margin-bottom: 1em;
}
label {
text-align: right;
width: 150px;
padding-right: 20px;
}
input.submit {
width: 5em;
float: none;
margin-left: 171px;
}
br {
clear: left;
}
form input, form submit, form textarea {
background: #EEEEDF;
}
input:hover, submit:hover, textarea:hover {
background: #FEFEF8;
}
input:focus, submit:focus, textarea:focus {
background: #FEFEF8;
}
#content {
margin: 75px 0 9em 80px;
font-size: 1.2em;
}

<form>

<label for="first name">First Name:</label>
<input id="first name" name="first name"><br>

<label for="last name">Last Name:</label>
<input id="last name" name="last name"><br>

<label for="email">Email:</label>
<input id="email" name="email"><br>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea><br>

<input type="button" value="Submit" class="submit">

</form>

 

DrDoc




msg:3609724
 3:41 am on Mar 25, 2008 (gmt 0)

You can always double up by using input:focus (for CSS support without JS support) and then use
onfocus="this.className = 'foo';" onblur="this.className = 'bar';" for when JS support is available without sufficient CSS support (such as IE6 and older)

[edited by: DrDoc at 3:42 am (utc) on Mar. 25, 2008]

ewwatson




msg:3609738
 4:08 am on Mar 25, 2008 (gmt 0)

Thanks DrDoc! So thats all the js I need for ie6? Just wrap those two lines in a js script block and I'm good to go? How about safari though, any suggestions for that? Thanks!

DrDoc




msg:3610798
 6:10 am on Mar 26, 2008 (gmt 0)

That will work in any relatively recent browser that supports JavaScript ...

swa66




msg:3611172
 4:08 pm on Mar 26, 2008 (gmt 0)

Safari users expect their browser to have it's own input look and feel (and AFAIK that's what's allowed in the standards.

IE6: Try the IE7 (or IE8) scripts to make it a bit more compliant:
[code.google.com...]

ewwatson




msg:3613253
 1:08 pm on Mar 28, 2008 (gmt 0)

This is what I came up with as a fix for IE6. From what I have read there is no solution for Safari.

* html .iehover { /* IE6 hover */
m: expression(this.onmouseover = new Function("this.className = 'iehover-hover';"));
}
* html .iehover:hover, * html .iehover-hover{ /* IE6 hover */
background: #FEFEF8;
m: expression(this.onmouseout = new Function("this.className = 'iehover';"));
}
* html .iesubmithover { /* IE6 hover */
width: 5em;
float: none;
margin-left: 171px;
m: expression(this.onmouseover = new Function("this.className = 'iesubmithover-hover';"));
}
* html .iesubmithover:hover, * html .iesubmithover-hover { /* IE6 hover */
width: 5em;
float: none;
margin-left: 171px;
background: #FEFEF8;
m: expression(this.onmouseout = new Function("this.className = 'iesubmithover';"));
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved