I have an odd visual bug in IE11 as you can see in image here >
(source: jonwallacedesign.biz)
See the odd effect on corners of the white "WHY USE US" li button....
The combination of border-radius, background-image and border: 1px solid #colour seems to be creating this odd horrid effect.
Anyone know of a solution to fix?
CSS of the LI is:
background-image: url("../images/core/primnavItemBG_sprite.png");
background-position: 0 0;
border: 1px solid #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
color: #2062AF;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-size: 14px;
margin-right: 5px;
outline: medium none;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
This worked for me. I am not sure if you have the same problem as me.
I was getting slight white borer just around the corners.
background-clip: padding-box;
Please try this inside conditional CSS block.
background-image: url("../images/core/primnavItemBG_sprite.png");
border: 1px solid #FFFFFF; /*In Border color use color same as background color otherwise use border-size:0*/
box-shadow: none;
outline: none;
hope this will fix your issue
Solution:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>
Instead of a background-image why not use http://css3buttongenerator.com/ to recreate this button and save on any additional requests and loading time. I was able to re-create your button and your gradient just fine in IE 11 using the above generator. Picture attached;
Button image
Adding a solid BG colour to IE10 + fixed this... seems like an IE bug trying to render CSS3 bits...
You turn on IE10 mode by adding <meta http-equiv="X-UA-Compatible" content="IE=10" /> to head section and will work normally.
Related
At first let me aknowledge you to this issue. I had an anchor with these properties:
.upvote_box a {
width: 20px;
height: 21px;
display:block;
background-color: #828282;
background-image: url(../imgs/upvote.svg);
background-size: 20px 21px;
}
The background-color there has a meaning, because it transits into a different color through CSS3 transitions. So my SVG is a white box with a cut hand icon in it. The rendering on Chrome on desktop was fine. But then I checked Safari and I saw these tiny lines around this anchor. So then I made an SVG icon with 1px border in it. So the dimensions of the SVG after that were width: 22px; height:23px;Of course I changed all the setting in the CSS, too. But I also added one thing to prevent this from happening – box-shadow: inset 0px 0px 0px 1px #fff – this solved the problem in Safari on desktop. But the problem sustains on mobile Chrome and mobile Safari.
This is what it looks like:
Also there is link to JSFiddle: Fiddle
Thank you!
add this :
-webkit-appearance: none;
or this :
-webkit-box-shadow: inset 0px 0px 0px 1px #fff
I am trying to create a banner effect using just CSS and no images. The result is supposed to look like this:
This example was created using the html and CSS in this jsfiddle. This is the CSS for the banner (.widget-title):
.widget-title
{
background-color: #B1DDC9;
color: white;
height: 24px;
text-align: center;
}
.widget-title:before
{
content: "";
float:left;
width: 0px;
height: 0px;
border-style: solid;
border-width: 12px 0px 12px 12px;
border-color: #B1DDC9 #B1DDC9 #B1DDC9 white;
}
.widget-title:after
{
content: "";
float:right;
width: 0px;
height: 0px;
border-style: solid;
border-width: 12px 12px 12px 0px;
border-color: #B1DDC9 white #B1DDC9 white;
}
This seems to work fine on all the browsers I've tested on my desktop and phone. Both Safari and Chrome on my Ipad2 however render a faint thin line on the left and right outer edges of the banner:
What is causing this phenomenon? Is there anything I can do to resolve it?
This looks like it is the background colour bleeding through at the edge of the triangle, probably due to some kind of sub-pixel rendering quirk. From your CSS this shouldn't be happening, as the triangles should be butted up against the edges of the title, but that's CSS for you ;)
Not sure if it'll work for you, but you could try putting position:relative on the title and position:absolute on the two triangles, with the relevant left:0 and right:0 to position the where you want them. In my experience this is generally more reliable than floating in terms of where your elements will end up.
As a side note, you could use border-color:transparent for the three sides you don't want to display. This would also allow you to make the triangle one pixel bigger and overlap the left/right by a pixel (i.e. left:-1px). That should definitely sort your problem.
Try changing border-width: 12px 0px 12px 12px;
to border-width: 12px 2px 12px 12px;
Maybe this will extend the "back" of the triangle just off the banner and get rid of the line
i am using enyo buttons in iphone....the problem is , when i click on button for a navigation , black color appears over the button....i dont know whether it is shadow or border-color or background-color.... i want to remove this...plz help me....
my code goes here
.onyx-Button2 {
outline: 0;
color: #FFFFFF;
font-size: 16px;
text-align: center;
white-space: nowrap;
margin: 0;
padding: 1px 1px;
overflow: hidden;
border-radius: 3px;
/* for IE8 */
border: 1px solid #777;
border: 1px solid rgba(15, 15, 15, 0.2);
/*
The border and the gradient interact in a strange way that
causes the bottom-border (top if the gradient is aligned top)
to be lighter than other borders.
We can fix it by using the darker bottom border below, but
then there are a few rogue pixels that end up very dark.
*/
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2);
background: #E1E1E1 url(../../images/gradient.png) repeat-x bottom;
background-size: contain;
text-overflow: ellipsis;
}
It is possibly down to defaults set within the browser on iOS - I would set all the appropriate properties to cover all bases.
So add
background-color:#ffffff; // Change this to your color you want
I suspect it is just the way iOS defaults some CSS, it may also have something to do with the manner in which it deals with image's as backgrounds. Unfortunately while iOS goes with most standards, it has odd ways of implementing certain CSS.
I have a horizontal menu list with CSS using the following CSS:
#navigation li {
list-style: none;
display: block;
float: left;
width: 10em;
height: 2em;
text-align: center;
padding: .5em 0 0 0;
margin: 0;
border-left: .0625em solid #FFF;
border-right: .1em solid #CCC;
text-shadow: .0625em .0625em .0625em #ffffff;
filter: dropshadow(color=#ffffff, offx=1, offy=1);
Everything looks great in Safari, Chrome, Opera, and Firefox but IE is causing an issue (surprise!). The text looks blocky and disfigured. My assumption is I've done something wrong with text-shadow?
You haven't done anything wrong. Applying the dropshadow filter in IE turns off the element's anti-aliasing capabilities. It is a known issue.
Here is a hacky workaround that one person came up with... http://learningtheworld.eu/2010/ms-box-shadow/
filter:DropShadow(Color=#ffffff, OffX=1, OffY=1)
Moreover, when you applying text shadow, you must style background color as well, because without background color, shadow will look ugly
i think dropshadow css needs to be like filter:DropShadow(Color=#ffffff, OffX=1, OffY=1)
i wanted to know if i can change the background color of the of hovering option using css only. I am not bothered about browser compatibility. But give me a solution that works across most browser.
I think the best solution first is to know that you DON'T have to expect that you page look the same in all browser. A good clean solution is use the power of each browser to do this. for example build a css for chrome/safari, another for IE and a last one for Firefox, you can do it as the follow example:
and I think use JAVASCRIPT for this purpose is NOT the best solution.
for web-kit safari/chrome
select{
-webkit-appearance: button;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../img/forms/arrow_blue.png),
-webkit-linear-gradient(#E1E1E1, #FFF 30%, #FFF);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
height:40px;
}
For firefox:
#-moz-document url-prefix() {
select{
border-radius: 5px;
background-image: url(../img/forms/arrow_blue.png),
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #CCC;
color: #999;
font-size: 90%;
font-family:Comfortaa, Arial, Helvetica, sans-serif;
margin: 0;
height:auto;
padding:10px;
}
}
And you can target each IE in each version as example
<!-- cause not every body is pretty -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="frontend/css/ie8-and-down.css" />
<![endif]-->
select{ border:1px solid #EEE;
width:auto !important;
height:35px !important;
padding:5px !important;
margin:5px !important;
line-height:1 !important;
}
I thinks in this way you will have nice dropdowns in all browser, while only safari/Chrome will be look exactly as you like, the other ones will behave as the user expect and you will not have to use javascript
Hmmm... you can use the :hover pseudo class to change the background-color of a select element but I just tried:
option:hover {
background-color: #F00;
}
with no result. However:
select:hover option {
background-color: #F00;
}
will change the background color of options when you hover of the select menu but as far as I can tell using option:hover itself won't work
The select tag depends on the OS you're on,
and you can't style it the way you want
the best solution is to use jquery to replace the select with a styled list (editable with css)
take a look:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
is this the sort of thing your after?
select:hover { background-color: red; }
I know this is an old question, but since I had tryed to implement this in the past and although I came to the conclusion that is not worth it most of the time, I realize sometimes it really affects the design idea (i'm not a designer but they get very frustrated about details like that), I thought I would share a resource I found that actually suggests ways to work around the fact that it is very difficult (if not impossible) to get a consistent enough look and feel by just applying css to the tag. Hope it helps somebody.
The html select tag styling challenge