- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’m styling a form which includes input elements (of course) and hyperlinks and all want to be styled to look and act the same…and they do – in FF, Chrome and Safari. But in IE, it looks like the inputs vary one from the next in appearance (subtly…but still) and aren’t always getting the hover effects at all.
All of these links and inputs (type=”submit” and type=”button”, primarily) have been given the same class of .button but two of the inputs (one of each) contained within a table aren’t doing the hover effect at all; also, the input[button] is slightly larger than the input[submit].
Again, it’s ONLY in IE that these inconsistencies manifest but I can’t for the life of me figure out why one input would look different from the other when they’ve both been assigned the same class and why neither are doing the rollover color change that links and buttons contained within fieldsets ARE doing.
Not sure if I’m being completely clear but if anyone has any insights I’d be very grateful :)
Thanks!
IE? What version?
Maybe something like this:
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
/* Reset first */
border:none;
outline:none;
padding:0;
margin:0;
display:inline-block;
text-decoration:none; /* For */
/* ... */
/* Etc... */
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
text-decoration:none; /* For */
/* ... */
/* Something.. */
}
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active,
.button:active {
/* Something.. */
}