.search .search_place li.search_button a {
background: #017aa7;
padding: 10px;
color: #fff;
text-decoration: none;
font: normal normal bold 12px/1.5 "Arial", Helvetica, sans;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
behavior: url(ie-css3.htc);
z-index: 100;
position: relative;
}
.search .search_place li.search_button a:hover {
background: #ffa63c;
}
i am using this IE7 hack for rounded corners: http://code.google.com/p/box-shadow/downloads/detail?name=ie-css3.htc&can=2&q=
but when i am using this htc file hover stop working. Anyone have similar problems that :hover stop working?
Try switching to CSS3 PIE.
It's an actively maintained project that, amongst other things, provides border-radius for older versions of IE.
In my experience it supports :hover properly.
Related
I have styled an oval button and it in an a element with the class .button
It works and looks great on firefox, but I get a rectangular button in Chrome, without a border. The link still works but the border and border-radius seems to be misunderstood.
This is the CSS:
a.orange-circle-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
Here is the HTML:
Current Stock
This is it in the wild: https://www.frontiercomputercorp.com/
I am assuming I've done something wrong with the border-radius that's unique to chrome, but I'm not skilled enough to know if it's being caused by the way I'm calling the class.
To recap: In firefox the button is oval (as I wanted)
In Chrome it is rectangular
HeLP!
Remove the following lines and it will be fixed:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
I tested it in Chrome and it fixed the problem.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.Therefore it overrides your border-radius code as Chrome natively doesn't set border-radius for the button. By not to adding appearance or setting it to none, you won't have this problem in Chrome too.
Just delete these lines below:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
<a> is a clickable type of element. A hyper-link. display: block will do what you want here.
"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."
(I think they are still ugly, but that's not the point here :) )
Here's the CSS now:
a.oval-box{
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
a.oval-box:hover {
color:#ffffff;
background-color: #f00667e;
text-decoration: none;
border-color: #f89520;}
I started this with a button so I got stuck thinking button. But as you have pointed out, it's just a styled block and I don't need the button comand at all.
Thanks.
I am working on a new button styles and currently facing a challenge: my <button> CSS :hover selector is not behaving as expected.
All attempts to making it work have proven futile.
How can I possibly achieve that effectively?
Below is my code:
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
border: 0;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background-color: #959595;
}
Simply use background for your hover; not background-color as illustrated in the snippet below:
.button_depression:hover {
background: #959595;
}
Brief summary:
background CSS property is a shorthand to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
When working without the shorthand, the background-image property supersedes background-color and as such, setting background-color alone without abnegating it (background-image) will result in its precedence.
In other words, background-image: none; in combination with background-color: #959595; will work. (Refer to snippet below)
.button_depression:hover {
background-color: #959595;
background-image: none;
}
(background-image: unset; works well too, but can't tell if supported by all browsers)
Note that you can be achieved the same, using the background shorthand, simply as above, with background: #959595; (which I prefer: simple, less verbose, same result).
More details here ....
You can't see the button hover changing the background color due to the background image. You can set the button image to None on hover and then change the color. This might be what you want. Alternatively you can just set background to the background color you wanted. Your preference how you want to acomplish this.
.button_depression {
background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
border: 0px;
color: #ffffff;
padding: 5px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
font-family: Times New Roman;
transition-duration: 0.5s;
}
.button_depression:hover {
background: None;
background-color: #959595;
}
I styled some CSS buttons, and they look great, but when I open the page on mobile, they look bad and don't use the defined styles. How does one typically maintain the styling of buttons in CSS across all devices?
Here's my code for the buttons that looked good in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
But this is what it actually looked like on different pages on mobile.
There is no magic bullet. Make sure that your styles have proper platform-specific directives (ie -webkit-) and, most importantly, are supported on the platforms that are acting up.
The issue with the font-size..Try setting px value for the font..it should be Ok..
like
input[type="button"]
{
font-size:14px;
}
As you can see in the above screenshot, Safari Version 6.0.2 (8536.26.17) on a Macbook Air displays the border-radius on the right side with a straight line. The "button" is a link tag with a class applied to it. This same button displays properly in Chrome but not Safari. It's driving me crazy as to why this is happening.
JSFiddle link: http://jsfiddle.net/unnmv/
Here's the CSS I'm using:
background: $color;
border: 1px solid darken($color, 15%);
color: $text-color;
cursor: pointer;
display: inline-block;
font: 14px/100% Arial, Helvetica, sans-serif;
outline: none;
padding: 0.5em 2em;
text-align: center;
text-decoration: none;
width: auto;
height: auto;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Here is what worked for me: Add the following to your css:
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
I noticed it is mentioned for spacing consistency issues between browser, so I tried it out with this issue since i was having the same. It worked for me.
Good luck!
My CSS for the website all looks fine in Firefox but in both Chrome and Safari, my fonts are coming out looking black color instead of the grey color as is in Firefox.
Why might the fonts/color be different in Safari and Chrome - it looks like bold black.
Header style I am using within my content div, i.e.:
#content {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #333;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #990;
border-bottom-color: #990;
border-left-color: #990;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF;
width: 973px;
text-align: left;
display: block;
background-image: url(images/bgcontent.jpg);
background-repeat: repeat;
}
h1 {
font-family: "Lucida Grande";
background-color: transparent;
height: 20px;
width: 650px;
color: #FF9904;
font-size: 36px;
text-align: left;
float: none;
vertical-align: top;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #999;
letter-spacing: normal;
margin: 0;
padding: 0.5em 0;
}
I also found this link relating to Google Chrome, i.e about using:
#charset "xxx"
http://www.google.com/chrome/intl/en/webmasters-faq.html#fontspecs
I just checked my computer, and there appears to be no difference in color between Firefox and Chrome. I am running Windows (for both of those), and it should be noted that there will always be a difference in color between Macs and PCs as they are calibrated with different gamma values. Read more about gamma stuff here, though note that you can't do much about it from a CSS perspective.
Another possible problem is that it could be just your computer... have you tried this issue on multiple computers? You can always try using a tool such as Browsershots or Browserlab.
Finally, it's possible that there is some relevant code that is triggering some cross browser differences.... is this all of your code or is there more CSS somewhere? Can you provide a live link to the page you're having problems with?
Does it also happen if you make them a color, for example red? If it's not, then it's just the anti aliasing of webkit which is more agressive.
But if it still happens, you can check with the chrome inspector and firebug if the way safari/chrome and firefox interpret the CSS is different. Which color selector they choose
The sample css you posted is ok. Try adding !important to color attribute.
color: #FF9904 !important;
At the time of writing (June 2015) there is a bug in OS X Chrome that means it doesn't apply colour correction to CSS-colours or untagged images. Safari (since OS X 10.9) applies colour correction to both CSS colours and images.