I´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!
Related
I'm using rgba colors, but after switching to HEX the problem still persists. I never had this issue a few weeks ago, and just noticed it. All opacities on rgba colors are set to 1 (100%), so they should appear. I assume it's a new chrome bug?
The left screenshot is Safari where it works and the right is Chrome.
safari vs chrome link
Same to me. I found a fix! Aparently there is a bug with webkit with the backface of a div element. This code will help
-webkit-backface-visibility: hidden;
You can found more info in w3schools.com -> here
Chrome appears to have some rendering bugs. Especially after GPU Driver Updates or Chrome Updates. A friend of mine had them for months.
You could try tuo update your drivers but theres no guarantee it helps.
Same happens to me. I tried to download Chrome beta. The weird rectangles do not appear there but the background color still does not act as it is supposed to. You can take a look at my page - the blue background color magically changes itself as soon as the whole landing page disappears.
If you view this codepen demo in Chrome and scrolldown you should see a piechart animation kick in when it comes into view. Yet in Safari Version 7.0.2 (9537.74.9) it doesn't. Any ideas why this isn't working in Safari?
http://codepen.io/s10wen/pen/czDbu
This is a Safari rendering bug triggered by backface-visibility: hidden on the .pie-chart > :last-child em. That line doesn't appear to be necessary, everything works fine without it.
This example doesn't have the bug: http://codepen.io/anon/pen/ktKmu.
I discovered this by removing bits of CSS & JavaScript until the bug no longer happened, revealing the single line that was causing it. Reduction ftw!
I'm changing over a site from HTML to Wordpress (for the first time, so be gentle!) and I ran into an issue with Google Chrome applying styles that I've never knew existed! In this case I'm referencing the style that positions the bg.gif image background. In both IE9 and Firefox the background elements seem to work just fine, but in Google Chrome I'm having the issue.
If you go to this site: http://www.richmindonline.com/doggy2/ then right-click the upper right corner of the page in Google Chrome, then click "Inspect Element", you will notice styles that are being applied that have nothing to do with my stylesheets.
Could someone provide some guidance as to how to fix this. I've already tried adding my own styles to trump the Chrome styles, but it's not working.
Which styles are you trying to override? What you're seeing are browser defaults - all browsers have them whether they show you or not.
What I'm seeing in the inspector is Chrome identifying the text direction and locale. Are you using a CSS reset?
http://www.cssreset.com/
Should go a long way in starting all browsers at the same default.
This is going to be a vague and obscure question, which is probably due to the fact that even using IE Web Developer, I have no idea what is going on.
I have a utility which I am working on. It's mostly JavaScript, and it has a small floating DIV user interface that shows up on a page. So far, standard stuff. The problem is the background color of some DIVs in the UI. The colors are assigned by CSS, and (tired refrain:) it looks fine in Firefox, Chrome, and Opera, but of course IE is being difficult.
The background does not show up in IE in quirks mode or IE7 mode, but it does in IE8 mode. For the life of me, I can't seem to figure out why IE7 isn't showing the background.
The page you can see the offending code is here: Log Hound Demo. Floating DIV is in the upper-right-hand corner - click the "V" to open it up.
Looking at that page in IE and then in [any other browser on the planet] will show you the missing background colors easily enough. I swear, even Lynx renders it better... ahem. The offending DIV IDs are lhPlateHead, lhPlateCtrlPanel,lhPlateTagPanel - easy to find with Firebug at least. They should be heeding the .lhPlateColor class with a background color of #DFEAF8, but that color is never applied.
With IE web developer up, I tried removing the CSS classes and re-adding them. I tried every combination of browser and document mode - again, only IE8 browser mode in IE8 document mode had the background colors working.
If anyone is bored enough to take a look and figure something out, I'd be much obliged.
Well - I finally figured it out, and as far as I'm concerned, this is another reason IE will always suck.
The circumstances of the problem are:
You are creating an element programatically:
myelmt = document.createElement('DIV')
You are setting the styles of that element programatically:
myelmt.setAttribute('class', 'myclass');
You are then adding that element programatically to the DOM:
body.appendChild(myelmt);
You are using IE.
IE hates you.
In cases such as this, IE8 will honour the "myclass" css and style the element properly when it is added to the DOM. IE7 and I'm guessing below will blow off the CSS styling and leave you thinking that employment at McDonald's is probably a whole lot less stressful.
To recap for the impatient:
Works in IE8 and EVERY OTHER BROWSER ON THE PLANET
var myelmt= document.createElement('DIV');
myelmt.setAttribute('class', 'myclass');
body.appendChild(myelmt);
Works in IE7 and below:
var myelmt= document.createElement('DIV');
var attr = document.createAttribute('class');
attr.value = 'myclass';
myelmt.setAttributeNode(attr);
body.appendChild(myelmt);
If someone can expound on exactly why this is a problem for IE7, feel free as I revel in the minutiae. Otherwise, just remember that it's all fun and games until someone loses an object reference.
Try adding zoom:1 to whatever element the background color doesn't work on.
I believe the issue has to do with how IE paints table cells. Try putting in a IE only CSS rule that applies the background color explicitly to TD's. Like this:
.lhWarnMsg .logMsg td
{
* background-color: #fbffbf;
}
Hopefully that will work for you.
http://betawww.helpcurenow.org/media/press/
You'll see I have used spans within an anchor, with the span.hover-description set to display:none; by default, and on a:hover that span is set to display block and absolutely positioned to create a tool-tip effect when hovering over the name and email of the "For Immediate Release" contact names.
Everything looks as desired in Firefox, but Chrome reveals my unknown blunder somewhere.
Any help on what's the problem that is causing Chrome to not display like Firefox?
Incidentally, Explorer shows the tool tip as expected, although I'm getting a funky bottom margin issue below the names, and Safari has the same issue as Chrome (must be a webkit rendering setting that I need to accommodate for).
OK, I figured it out. Since I'm using a pretty complex nesting structure to accomplish the CSS tool-tips, I overlooked the fact that I had actually nested a p tag within a p, and of course that is a no-no.
Firefox is really friendly to a lot of validation errors, but Chrome and Safari seem to be much more strict.
In the end I changed the p's to span elements and all is well across browsers.