I believe there is something in the CSS file that is causing Chrome and Safari to create extra large mouse over areas on all the text links. This is not happening with IE or Firefox. Can anyone give me a tip on what is wrong with the CSS? The mouse changes to the pointer way outside of the normal bounds around the link. Thank you for your help.
Page with problem: http://developer4you.net
Thanks goes to yunzen!
If you use the Cambria Math font in your CSS, some borwsers (i.e Chrome and Safari) will locate the clickable area outside of the normal click zone bounds on <a> elements. This makes the page non-user friendly. Stackoverflow rocks and thanks again yunzen!
Related
On this page: prolitho.com/wp/about
If you click on the first employee picture (Mary) the image and .profile-cover will move out of the way and you will see among other things a linkedin icon.
In Firefox that icon reacts to hover and is clickable. In Safari and Chrome it is inactive. I can't figure out why. Any ideas?
It has to do with the z-index that is being set to -1 for profile-extra so it's not receiving events.
One way to deal with the problem would be to set the z-index of .profile-extra to something higher than 1 while displaying the extra info
It looks like your pulling the logo in as a fontawesome icon.
.fa-linkedin-square:before {
content: "";
}
Chrome seems to be having issues understanding this character.
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I'm having a problem with a floating div with href around it. The link works in FF but not in IE9. I'm hoping it's something simple but I'm left scratching my head. Easy points for someone!!
In any event, here's the page: http://www.insurancedepotdentalonline.com/
You will see at the bottom of the page it says 'For Health Insurance, Life Insurance or Medicare' and then a big red circle with Click. I have a div positioned over that red circle and a link around the div. It works in Firefox and Chrome but not in IE. Not sure why not.
For what it's worth, when I add a background to the div to see how big it is, the link works fine in IE. But when I remove it, the link disappears. It's like there's something wrong with the width.
Interesting... inspecting the structure through IE's developer tools (just press F12), the div inside the link seems to be in the right place, but the link is only working if you click a bit to its right...
-- edit --
Your "For-health-click-here" div is superimposing the link. You could either move its declaration to a place before the link (you'll have to readjust the link position too) or mess with it's z-index.
Not sure if this is the problem.. but putting block elements (div) inside inline elements (a) is invalid html and could be choking in IE?
See here for more details.
I'm having some trouble with the CSS in my site, both with image sprites and IE compatibility.
Here is a jsfiddle: http://jsfiddle.net/lipestyle/EjQTP/7/
The two main problems are:
In IE, the contact links at the bottom are not appearing in the blue bar, but way down and to the right of the rest of the site.
The image sprites for MMA Cage Door and FightNight Nutrition are not working. It appears that the hover image is on constant display, as the non-hovered image is supposed to be much lighter than what we are looking at.
On a side note - For some reason the background image repeating isn't working in the jsfiddle, but I haven't noticed a problem with it outside of that.
Any advice that you all can offer would be greatly appreciated.
Thank you.
EDIT
One other thing I am noticing with the sprites. It appears when I hover over an image the first image doesn't disappear, it still remains while the hover image appears on top of it. Is that how it is supposed to work? Because my images are semi-transparent, this is something I would like to avoid if possible.
Here is a link to the site in action: http://bit.ly/h1OXQA
Could be a width, margin-left, or even position relative/absolute giving problems here. I have not checked in depth through all css code to see the cause. A fast/dirty fix, obviously loading alternative css or html for IE7, is that setting (in IE7) the UL #social with top:190px and left:100px , it seems to fit ok (or fine tune to the preferred position) .I'd go from here to guess what is causing to act differently.
Seems you already fixed, images seen light when not hovered, darker when hovered. All in IE7.
Does anyone know what is causing the sprite rollover to jump around
It is I think more likely a photoshop question, but I am not completely sure.
I hope to get an answer here anyway, since I think most webdesigners/programmers problably worked with photoshop also.
This is what I want the rollover to do example 1
and this is my testpage (see the play button)
I made the sprite with spriteme.com
thanks, Richard
I do not see anything jumping around. However, when I first open the page the Play button is missing (its style is set to display: none;). When I click stop it appears, and then disappears when I click play. This is due to it's inline "display" style being set to block and none.
Is this your problem?
Note: I tested in Chrome and FF. I debugged the CSS states using Firebug.