Last night my Firefox just got updated to version 63 without notice, the image in my website that used to be displayed correctly just got broken.
The image that I put on the web, I used css content class
/*Chrome*/
.pswFilled{
content:url("psw_filled.png");
}
/*Firefox*/
.pswFilled::after{
content:url("psw_filled.png");
}
Before updated, this worked correctly. If chrome is detected, the non-pseudo is applied. Also Firefox uses the pseudo one. However after updated, if both are put like this, Firefox will pick the non-pseudo to use first and vanish the image.
If I remove the non-pseudo line, Firefox picks the pseudo one and the image will display correctly but disappear in chrome.
Anyone experienced this? Please help
Thanks to all those trying to help. I found the problem and already solved.
The problem happened because I put the class into the img element
I thought it should work same way to the div tag. Actually it used to be working before the firefox update to 63.
Before, I wrote this way.
<img id='pwdBox' class='pswFilled'/>
It worked in both Chrome and Firefox (before 63)
but in 63, I have to change it to this
<div id='pwdBox' class='pswFilled'></div>
Thanks to extempl whose enlightened me with jsfiddle
Related
I have a problem with content from CSS on IE11.
.icon-ok:before{content:"\f113"}
IE11 is computing this to .icon-ok::before{content: normal}
I can see that there is .icon-ok::before{content: "\f113"} but it is crossed.
So I didn't get the right icons there. - Ofc it is working on all other browsers.
I thought that's because of the ::before pseudo-class, but it is computed by IE, in the source css file it is written as :before.
Can somebody tell me whats wrong there?
Edit:
I figured out that the IE is changing the icon-font id's.
When I use "\f118" in IE it is working properly there.
How can it be?
This can happen because different browsers needs different formats of the font.
So this isn't basically a CSS problem rather a problem which format of the font is used.
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
In IE10, border is not getting displayed on page load, it displays only after I hover over that particular section. Its looking fine in IE9 and Firefox, the issue persists only in IE10.
Unfortunately I couldn't share code as its a restricted internal dev environment.
If anyone of you came across such scenario, please share the solution. Thanks in advance!
If you are familiar css then you might also know that the issue you have mentioned "displays only after I hover" will occur only when you have put something like the following in css
#a : hover
{
border:5px solid white;
}
If you haven't mentioned such thing in your Stylesheet or inside html tags then what #MarioErmando said would be the issue. Try using F12 Developer tools in IE to check.
I have a simple CSS dropdown menu with an iframe inside it. When I hover my mouse over the dropdown menu, the menu drops down. But when my mouse hovers the iframe inside the menu, the menu goes back. Here's a simplified version of my code:
<div id="comments">
View comments
<div id="comment-wrap">
<iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe>
</div>
</div>
<style type="text/css">
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;}
#comments:hover #comment-wrap{display:block;}
</style>
This works in the latest versions of FF, Chrome, and Opera.
P.S. The dropdown menu remain dropped down when my mouse is hovering the padding of #comment-wrap.
I have faced similar problems while working with the :hover psuedo class. It started working fine when I changed the Document mode of the browser to IE 9 and the Browser mode also set to IE9. IE 9 has the document mode set to IE8 by default.
Additionally, you can add the following meta info in the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Hope this helps.
I found to have the same problem and i know this is already an old post but i felt like i had to publish my solution. Basicly IE does not accept the :hover event for any tags other than <a> with specified href (wont work on early ie versions), unless you add <!DOCTYPE HTML> at the top. And that was it! Problem solved :).
Unfortunately, this seems to be a browser bug, going back many IE versions. You can use a JS solution as a backup to IE. I've created a jsFiddle example, adapting code from another solution addressing this issue.
Hope that helps!
Edit: further testing in IE9 shows that though the iframe is displayed, hovering over the scrollbars hides it immediately. There is likely a more involved JS fix for this, but it's up to you if you'd like to implement it.
I recently had a hover issue in IE10 (not sure about lower versions) that was driving me crazy. I had my css hover set properly and it was for a div that contained an iframe. The issue was that when you hovered the div it would show the iframe but as soon as you tried to move the mouse into the iframe it would disappear again. I searched everywhere and found nothing for an acceptable answer for me except to use javascript or jquery. After days of trying to sort it out I found a very simple solution that worked for me. I simply removed the iframe from the div and used the object such as
<div class='showme'>links<div style='float:left;' class='showme_1'>
<object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'>
</object>
</div>
I hope this helps folks save a lot of research time.
I know, it's pathetic, but IT just got around to installing IE8 on my machine this morning. Right off the bat I came across a glaring issue and I've messed around with it for too long even though I KNOW the answer is staring me right in the face.
First off, here's the website: www.mchenry.edu
View it in IE8 and hover over the top banner image - see everything shift down? It's some type of text-decoration or border issue but I can't figure out which. In our test environment, I even tried to get real specific with
#banner p#img a:hover {text-decoration: none};
But that doesn't do anything. And what's even more annoying is that I can't get it to show up in IE6, 7, or FF, or Safari, or Opera, etc. Beating. Head. Against. Desk.
Thanks for any insight you guys may have.
Okay, let's see. This is where the developer tools come in handy.
Using the developer tools, I hovered over the image, and activated the "click to select" feature, as this maintains the "error". I clicked on this small area, and it highlighted the <p id="img">, which now had a height of 128.
Something is expanding the p by two pixels, and editing the source to remove the <a> removes the problem, so clearly, something in there is disturbing it. I'm not seeing what, and it doesn't help that I can't seem to affect the color of that small box.
However, we can do more: we can yank out parts of the CSS. I removed the CSS rules from Records.css one by one, and when a:hover was removed, the problem went away. Going deeper, removing the background-color from there, it stopped!
So, a simple fix is to assign the <a> element a new attribute: style="background-color: transparent".
Note that I didn't test this with any other browsers or versions, but I can't see that rule having affecting other browsers (in a bad way).
try this:
#img a:hover {text-decoration: none!important;}
I have just encountered this same bug under IE8 (version 8.0.6001.18702).
I also traced the problem using the IE8 Developer tools by turning off css statements until I found the one responsible. I an verify that having a background-color on a:hover causes the problem and overriding this with "transparent" does solve the problem.
Unfortunately if you do want a hover background color on your links there isn't a generalised solution - the best you can do is to create a class for "imagelink" which you apply to all your anchor tags which surround an img tag:
<img src="test.gif" alt="test"/>
Then you can use the CSS:
a.imagelink:hover { background-color: transparent; }
This should work around the IE8 bug for your image links whilst allowing you to keep your hover background color on other hyperlinks.
Not very elegant, but I didn't want to follow Jan's suggestion of using a meta tag to force IE8 to render as IE7 (there are lots of things IE8 does better than IE7 and I don't want to revert all the rendering to IE7 over this one issue).
I find it astounding that despite all the hype about IE8 being so much better than older versions we still find bugs of this nature: a colour choice causing a layout issue. Unbelievable. And yet this thread was started back in July last year - and the bug remains unfixed, with more and more developers having to waste their time identifying the problem and dirtying their code with workaround hacks to solve an IE-only issue. It's like IE6 all over again.. Hopefully the EU's imposition of a browser-choice screen into new Windows installs will help open people's eyes to all the proper web browsers out there.
Michael's analysis of the background style of the anchor tag being what triggers this bug in IE8 is spot on. But instead of working around it by adding a style attribute to all the anchor tags, you can tell IE8 to display your page the way IE7 does by adding this meta tag as the first tag inside the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or by adding this line to .htaccess:
Header set X-UA-Compatible IE=EmulateIE7
to force IE8 into IE7 compatibility mode.