Hover not working in safari!

[rockinaway]

I have a simple form submit input which won't show the correct css stuff for when I hover over it. (works fine in chrome, not tested in firefox and IE yet).

 

My CSS is:

 

/* Main */
body {
        margin-left: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        margin-top: 0px;
        background-color:#F0E9E3;
        font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
        font-size:12px;
}
.fullwrap {
        width:850px;
        margin-left:auto;
        margin-right:auto;
}

h2 {
        color: #545454;
        font-size:14px;
        padding:0px;
        margin:0px;
}


/* Welcome Page */
.welcome_page {
background-color:#D6C3B3;
height:400px;
}

.welcome_head {
background-color:#2E2E2E;
color:#F0E9E3;
height:50px;
padding:10px;
}

.welcome_name {
float:left;
font-size: 40px;
font-weight:bold;
letter-spacing: 2.2pt;

}

.login {
float:right;
font-size:12px;
}

.login_button {
background-color:#F0E9E3;
border:none;
}

.login_button:hover {
background-color:#2E2E2E;
}

 

The HTML is:

 

<div class="login">
			<form name="login" id="login" action="login.php" method="post">
									<input type="hidden" name="submitted" />
									<label for="username_login" class="label">'.$lang['username'].':</label> <input type="text" name="username_login" id="username_login" class="login_box" />
									<label for="password_login" class="label">'.$lang['password'].':</label> <input type="password" name="password_login" id="password_login" class="login_box" />
									<input type="submit" value="login" class="login_button" />

			</form>
		</div>

[cssfreakie]

works fine here.

Maybe validate your complete page here(http://validator.w3.org/), and remove all errors. always a good thing anyway.

[rockinaway]

is that with safari?

[rockinaway]

It doesn't work in Safari. The colour change doesn't occur on hover, instead when I press and 'activate' it then it changes colour :s

[cssfreakie]

to prevent a "Yes it does"," no it doesn't" - discussion

 

I tried this in safari 5.03 and it worked.

 

But I added as you would expect atleast a body and  html tag and a doctype.

If you want more help , maybe place a link to an online version, so we can have a look. (maybe some other scripts are screwing things up)

[rockinaway]

http://www.etcworld.co.uk/sn/

 

There you go. I think there is something in the code causing an issue as other things won't work with hovering.

 

Thanks

[cssfreakie]

well it works here, make sure though you validate your form.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.etcworld.co.uk%2Fsn%2F&charset=%28detect+automatically%29&doctype=Inline&group=0  (easy fix: place a <p> around all input elements)

 

what version of safari you use??

[rockinaway]

I've got 5.1 and it's just this page that isn't working. Any other website is working perfectly fine.

 

(I'll apply the fix you've said, but obviously if it's working for you already I wonder what is wrong on my end :s)

[cssfreakie]

I've got 5.1 and it's just this page that isn't working. Any other website is working perfectly fine.

 

(I'll apply the fix you've said, but obviously if it's working for you already I wonder what is wrong on my end :s)

I have only 1 idea left: maybe the order of you pseudo classes are incorrect but that seldom causes problems in modern browsers.

might want to have a look here.

(5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus)

http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

especially the part that says:

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

 

-edit: I highly doubt the last part though because It is more aimed at links

[rockinaway]

Nope that doesn't work.. I'm not sure why it's just mine that isn't working if it's working for your Safari :s .. I'll keep testing in Chrome instead I guess :/