I have a typical link on a page. On hover, the link receives a border color and border-radius. In Safari 6, I am noticing that when the mouse leaves the link there is a very faint border color left behind. If you hover again over the link, the border gets darker and darker in some cases, even though the border-color is not set. If border-radius is not set, the issue does not occur.
I cannot repeat the issue in Firefox or Chrome (for Mac). The simplest fix I found was to specify a solid or transparent border color for the base anchor style. Could this just be a Safari rendering bug?
Link for the rendering issue: http://jsfiddle.net/zafer/msnak/4/
Try making the border-radius value equal to the padding on the anchor element and see if that doesn't help. I had the same problem in Safari 6 as well and that seemed to have fixed it.
So your CSS code would look something like this:
a {
display: inline-block;
padding: 15px;
border-radius: 15px;
}
a:hover {
background: #004184;
}
just ran into same issue and found that using even values (2,4,6,..) as radius fixed it for me, like so:
a{
color: white;
padding-right: 9px;
padding-left: 9px;
}
a:hover{
background-color: green;
border-radius: 4px;
}
regardless of different padding values.
The background-clip solution did fix the problem for me, check the details on https://stackoverflow.com/a/3447130/1200097 it is possible that your properties need to be reordered.
Related
I have actually been pluggin away at this for sometime. I realize the concept is probably alot easier than what im getting but I just cannot for the life of me figure this out.
For a code example of what im trying to do. Using the below code
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/Navbar.vue
https://github.com/PanJiaChen/custom-element-theme
There is a scoped style for the navbar
<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #333;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
I am trying to use the element-ui theme generation tool to override the background colors. I have been able to get all the colors to correctly switch with a toggle setting the color white like so.
$--color-white: #333333 !default;
This correctly changes the background of elements to a charcoal type color.
Now the navbar has a hard coded value of white, yet even tho I remove that I still cannot get it to change color? How do I target that navbar. Or am I just totally off the mark and doing it wrong. I am new to vue and element-ui just to be upfront.
This looks like a recently introduced bug that manifests on both iOS6 and Safari 6. Has anyone else gotten bitten by this?
What might be a work around? What if we really actually needed that box shadow to have spread=0? Right now we can get the shadow to render by setting the spread value to -1px or 1px
FIDDLE: http://jsfiddle.net/uCseS/2/
It seems like a bug indeed. However, if you use rgba notation for the background-color, the shadow reappears.
img{
background-color: rgba(255,255,0,0);
box-shadow: #000 2px 2px 10px 0px;
-webkit-transform: translate3d(2px, 5px, 0px);
}
http://jsfiddle.net/willemvb/KuhQp/
Hi! As you can see on the image, there's a strange behaviour in safari 6 with round corners
{ border-radius: 5px 5px 5px 5px; }
when hovering over the elements there is a thin line that's building up when hovering more and more times... The first and second link wasn't hovered over, and you can see different lines caused by hovering mouse over the elements a few times...
Is that just a bug in safari?
I haven't seen this exact behavior before, but I've seen similar. I assume you are on a Retina MBP? and certainly on Mountain Lion. Safari is occasionally having issues with border-radius and virtual resolution (which is how the retina display works).
Try quitting safari, changing your resolution, and opening it again. If it looks better at first, then you'll just have to wait for a fix from Apple.
In the meantime, you might have some luck making sure all border styles make it hidden:
border-color: transparent;
border-style: none;
border-width: 0;
Hope that helps!
-Mike
This post may answer your question CSS rounded corners bug in Safari?.
Try to use:
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
instead of:
border-radius: 5px 5px 5px 5px;
Can anyone help me fix some cross-browser issues? My website address is http://s423839726.onlinehome.us/index2.html. It looks fine in firefox 13, but in IE9 the "contact" button is all wonky.
Also, where does one learn how to fix cross-browser inconsistencies?
the inconsistency can also be seen in Opera. Your problem is the UL element. It hangs at that position on the right as it has display "inline" set and contains a stray A element. This combination moves your contact menu element a bit down. You should try to clean up the markup as it contains nested elements (mainly A elements) that are not strictly necessary. Another problem is, that you are mixing left and right floating. Additionally you are mixing left and right paddings and marging which may lead to different behaviour in browsers, makes calculating harder and can lead to collapsing margins problems. I'd advise you to try a more semantic markup for your menu like:
<ul id="topnav">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
and with this simple markup you are able to style your menu. If you reach a point, where adjusting dimensions, paddings and margins of elements are not enough to style things the way you want, you may begin to introduce non-semantic elements (e.g. SPAN elements) within LI or A elements to have some more means to shift things around via CSS.
A simple approach to get your navigation styled is the following: Float each LI to the left and use only left margins/paddings to create visual space.
ul {
list-style-type: none;
height: 60px;
width: 300px;
margin: auto;
}
li {
float: left;
}
ul a {
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 50px;
text-decoration: none;
font-size: 40px;
color: #ccc;
}
ul a:hover {
color: #fff;
}
Something like that. Left border still missing. Your whole menu block (the UL) should be positioned to the right using left padding or right floating or whatever. Prefix the selectors with #topnav if you want to mitigate changing UL and LI styles elsewhere on your page. This is just a simple illustration that you do not need much markup or styles to have a horizontal menu like the one you want. Start simple and search for tutorials on horizontal menus using UL/LIs. There are plenty out there. Good luck.
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.