I'm using the following HTML code to successfully show the title in FF and Chrome but it doesn't appear in IE - even IE9. I'm I doing something wrong? does this work for others?
<div class="emoticonTitleWink" title="Wink ;)"></div>
any advise welcome...
FYI the classe
div.emoticonTitleWink {
position: absolute;
width: 18px;
height: 18px;
left: 79px;
top: 59px;
}
Is there a way to get the small pop (text info) to occur in IE?
thx
Per the above comments, it is working for me in IE 8 too. Strange.
Nonetheless, if all fails, you could resort to IE conditional comments. These comments allow you to assign specific HTML just for Internet Explorer (or even different versions of Internet Explorer).
Here are the details:
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
In your case, you could perhaps use a javascript/jQuery script in IE instead of using the title attribute if you really must need for this title to work in IE.
Related
Edit: Pending a reply from someone with a fix, I'm going to assume this is a bug. It looks like it may be related to https://bugzilla.mozilla.org/show_bug.cgi?id=1794432, though the thread on the tracker is sparse, so it's unclear if Mozilla has determined it is a bug. Contradictory to the thread there, it appears that during my testing any embeds cause this problem, and setting layers.force-enabled does not fix it. I'm leaving the question up with a link to the bug tracker in case someone stumbles across this due to encountering the same issue.
I'm working on a site with a sticky navbar using backdrop-filter to blur the background. This works great, but on pages with an embed (iframe, object, etc.), the filter appears to break in Firefox as scrolling approaches the embed. It doesn't appear to be due to stacking contexts (the navbar remains on top), but I'm at a loss as to what is causing it. Before I file a bug report, I wanted to get input and see if this is a problem with my code, and if anyone here knows the solution. I've included a reproduction below -- viewed in chrome, behavior is as expected; viewed in Firefox, however, the filter breaks on elements surrounding the embed. I've confirmed this happens with a pdf embedded in an object tag as well. I've included the code for a minimum repro below, and there's a link to a JSFiddle here: https://jsfiddle.net/gamo2zy3/1/
.navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 1;
backdrop-filter: grayscale() saturate(180%) brightness(50%) blur(50px);
border-bottom: 1px solid rgb(0, 0, 0);
background-color: rgba(0, 255, 0, 0.1);
}
content-container {
display: block;
width: 500px;
}
div.takespace {
height: 1000px;
}
img {
width: 100%
}
.embedVideo-iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: 100%;
}
<nav class="navbar">TEST TEXT</nav>
<content-container>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
<img src="https://w.wiki/64tg" />
<iframe src="https://www.youtube.com/embed/B4Kn3djJMCE?rel=0" class="embedVideo-iframe"></iframe>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
<img src="https://w.wiki/64tg" />
<div class="takespace"></div>
</content-container>
I've tested this on Firefox 107.0.1 and Chrome 108.0.5359.73; Firefox added support for backdrop-filter back in version 103 (though I haven't gone back and tested it in that or prior versions). I've tried adding wrappers and z-index settings surrounding the embeds, using a ::before pseudo-element to contain the backdrop-filter, and more. So far nothing I've done has caused the backdrop-filter to behave as expected on firefox. Obviously I can just run code to detect that someone is using Firefox and set the element to be fully opaque, but I'd like to avoid querying useragent if possible (feature detection wouldn't work, since Firefox has the feature). If there's a way to get this working properly in FF I'd like to know.
Before someone marks this as a duplicate, I do not believe this is related to z-index behaviour is different in chrome to firefox. Current firefox behavior mimics chrome in this aspect, fixed positioning is not used, and the navbar still shows up above other elements as expected.
As of Firefox version 108 backdrop filter behavior is working. Nothing in the patch notes suggests that this behavior was directly addressed, but the fact that it changed between versions suggests that it was a bug fixed by some other change (see https://bugzilla.mozilla.org/show_bug.cgi?id=1794432 for the bug it appears to be related to). It's very probable it was a bug.
Back arrow hyperlink's image is rendering properly in chrome but not in internet explorer 11, however I am able to click on it, even from ie (mouse cursor is changing from arrow to hand, when I move the cursor to its respected position in ie11).
Below is my html code --
Below is my css code --
.backlink {
content: url(back/back.png);
padding-right: 5px;
vertical-align: middle;
}
In chrome back.png is displaying like below --
Please help!!
Using content: on regular elements is not yet fully supported.
content: is intended for use with pseudo element, such as before, and after.
Chrome, has likely started to implement some of the CSS working draft (where it has been suggested that content work on 'regular' elements too.
I am not sure if this is an issue with the Blogger template that I'm hacking up, or if I'm just forgetting a simple CSS property.
I'm working on a template for a friend, and am attempting to show the logo on the top right above the menubar div, and it works just fine in Firefox and Chrome, however it renders behind the div in IE9.
Here is the link to the demo:
Demo blog
Essentially, what I've done is created an absolutely positioned div, with an inside image:
<div id="logo2">
<a href="">
<img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
</a>
</div>
and the associated CSS:
#logo2 {
position:absolute;
top: -25px;
right: -50px;
z-index: 999;
}
I'd thought that the combination of an absolute position, plus the high Z-index would overcome any issues with IE's handling of the z-index, however I was wrong.
I've also tried adding in a position (relative) and z-index (1) for the menubar div, to no avail.
Per #Dubious' suggestion, I added the following without success (the image is still clipped):
.tabs-outer, .tabs-inner {
<!-- [if ie 9]>
z-index: -1;
<![endif]>
position: relative;
}
Old Answer "Try adding a z-index of -1 instead of 1 to your menubar div"
Edit:
Okay, after doing some fiddling around in IE9 Developer Tools I noticed that your source code was telling IE to render the page in Document Mode: IE7 Standards. As you can see, after opening dev tools (and making sure the dev tools frame is active) you can press alt + 9 to render the css as it should be rendered in IE9. After this occurs, the content displays just as it should in any current browser.
So why is the page loading with IE7 Document Standards? Well you need to use correct standards-compliant !DOCTYPE directives for each of your pages. To do this just read up on this page and make sure that your html files follow the very first example.
Conditional Comments
I should have given you a better example of IE conditional comments, so I will go a little more in depth here. An IE conditional comment can ONLY be defined in html as it uses <!--> which is html specific code. Therefore, in order to add ie7/ie9/ie specific css you would need to <link> a new stylesheet inside the comment field that would have ie specific code. Further reading here. Also note, that since this issue you are experiencing is because the page is rendering IE7 quirks mode css, you might need to use an ie7 comment as opposed to ie9.
I really hope this solves your problem, good luck!
In chrome my website is cramped at the bottom.
I have used a clear float to clear it and it works in Firefox but in Chrome, the bottom is all cramped? (I'll not mention IE because haven't tested yet but can fix for IE just don't know how to for Chrome)
http://justbedroomdesigns.com/
Try to change css to this,
.post-block {
width: 370px;
height: auto;
float: left;
clear: none;
padding: 5px 2px 2px 2px;
}
Perhaps you should correct the errors in your HTML first. For instance, decide if it should be HTML or XHTML, never reuse ID values, etc. If the problems still occur, ask again.
Take a look at this short post:
http://www.minitek.gr/tutorials/css-tutorials/item/12-how-to-fix-google-chrome-css?.html
More about Chrome rendering can be found here http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
One problem that I had with Chrome CSS is that when page is loaded locally (using XAMPP) it looks different
than when it's loaded from server.
A known old known problem is that various old browsers both IE 7 (perhaps also IE 8) and FireFox 3.0 ~ 3.6, are the experiencing of very SLOW scrolling down through a webpage whenever a background image img or div with an image has the position: fixed; property.
Having built a site with this feature I noticed that in IE 7 (maybe 8 too) that had a terribly sluggish scrolling experience ruing the good enjoyment of the entire website. All other JQuery effects were also not smooth anymore. Now, as soon as I commented the position: fixed; property of the background image div:img, everything becomes good again.
<html><head>
img#bg {
/* position:fixed;*/
top:0;
left:0;
height:auto;
min-height:100%; /* proportionally fit height (eg panorama images) */
width: 100%;
z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>
Q1: How to make that line conditional? Users with IE7 or IE8 /*position:fixed;*/ and users with IE9 or FF4 position:fixed
Q2: Could anything in my css have triggered the bug except position: fixed? for example should img#bg be written differently?
Some links: MozzilaZine, StackOverflow, LinDesk
Thanks very much for your suggestions and ideas on this browserbug. Much appreciated!
Q1: How to make that line conditional?
For IE older than version 9 there's always a conditional comment override:
<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->
For Firefox, one way would be to find some hack that distinguishes version 4 from its predecessors, which I can't really think of right now.
Q2: Could anything in my css have triggered the bug except position: fixed?
That and the fact that it's an image. But mostly the fixed positioning. This also happens if you used a background image with background-attachment: fixed, and is a well-known performance issue on those browsers.
Q1: How to make that line conditional?
If you'd rather not to use conditional comments (per BoltClock's reply), a summary of browser-specific CSS hacks can be found on Paul Irish's site.
Q2: Could anything in my css have triggered the bug except position: fixed?
Short answer: Yes, but probably none as much as position: fixed. If removing it fixes your issue, it's your biggest problem.
Slightly longer answer: box-shadow has been shown to cause performance issues. So will IE's proprietary filters. Inefficient selectors are sometimes mentioned, but it's debatable whether they have a large effect.
To profile your code, use the CSS Stress Test bookmarklet to drill down on exactly which selectors are causing your browser trouble. It's great!