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.
Related
When viewing the following navbar with the Chrome element inspector, the highlighted elements are not where the actual elements are rendered. Why exactly is this happening?
https://codepen.io/bbbenji/pen/OodrJr (sorry, too much code to post here)
This only happens in Chrome on both Linux and Windows. Firefox does not have this issue.
Too much code to post on Stackoverflow.
Codepen link provided above.
I found out that #DIV_5 { display: -webkit-box; } (which is causing the problem) is supposed to be some predecessor of display: flex;. It's prefixed with -webkit- so it targets only Chrome like browsers. I'm pretty sure what it does it is trying to use some older spec, but that spec doesn't work well with #DIV_6 { float: left; } and make even the inspector buggy.
I am trying to integrate some non editable zones in my TinyMCE 4. And it works fine. But now I want a cursor to become "not-allowed" over the non editable elements. I set it in css and it all works fine for Chrome and Firefox but not for IE9 the cursor don't change!
Is there a workaround for this problem?
Thanks
You can find a simple exemple here http://fiddle.tinymce.com/iSeaab
IE only supports CUR and ANI as formats from CSS to change cursor.
{
cursor: url('/cursors/customMoveCursor.png'), /* Modern browsers */
url('/cursors/customMoveCursor.cur'), /* Internet Explorer */
move; /* Older browsers */
}
Please look here. or a good link here
Have you tried to edit the CSS for TinyMCE like (tinymce/skins/lightgray/skin.min.css)
add what you need. Example:
.mce-grid td.mce-grid-cell div[disabled]
{
cursor:not-allowed
}
I still recommend using .cur file for IE.
I am encountering a strange problem in css. You can see the form with checkbox here. The text with checkbox is not aligned properly. It splits into two lines. It is working fine on FF, IE, Chromium on Linux and opera but not on chrome on windows 7.
Now here is funny part. Right click any feeling for eg. Must Watch and inspect element.
This is the first matched CSS rule
.addCheckbox label, .addRadio label {
font-size: 15px;
}
Edit this and add display:block.
So the new css will be
.addCheckbox label, .addRadio label {
font-size: 15px;
display: block;
}
Now disable the newly added CSS by unchecking display:block and voila you can see the form perfectly rendered.
So i am getting different rendering with same CSS. Anyone have any clue how to fix this ?
The same CSS was working fine initially with chrome on windows 7 until someone pointed it out recently.
Browser info: Chrome 24.0.1312.57 on Windows 7
Remove float:left from checkbox class, I think it is not needed here.
And adjust Label tag with margin-left.
Also, from this class: .radio.inline, .checkbox.inline... try removing display: inline-block and control the li and span with padding and margin. For remember me, try using display: block for the Label of Remember me.
Hope it helps.
I have been wracked for days trying to find why I can't use the MS blur & glow filters to generate a drop shadow in Internet Explorer as appearing on this page:
http://kilianvalkhof.com/uploads/ieshadow.html
Here, a second text element is positioned under the first element, offset a bit, and the filters applied. My layout is using the same technique, for a drop shadow on the H1 element at the top, which shows fine in standards-compliant browsers, but the filtered element is not showing in IE8 or IE9:
http://a11.cosd.com
My markup uses a <span> like the working example:
<h1>AREA11<span class="IEshadow">AREA11</span></h1>
with CSS the same except for the selectors:
#headerContainer header h1 span.IEshadow {
display: none;
}
.lt-ie10 #headerContainer header h1 span.IEshadow {
display: block;
position: absolute;
left: -4px;
top: -4px;
z-index: -1;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true');
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true')";
}
But in my layout the filters aren't applied at all, even though I can see the filter: properties are listed in IE8 and IE9 with the (F12) Developer Tools. This isn't the first time I've used Visual Filters in a design, but in this case I've copied the code character by character.
One odd thing: when I view the filter: property in IE8 developer tools, it shows the other properties lumped together on the same line, though they appear normally in IE9 where the problem is still happening.
I have tried everything I can imagine, including disabling all other Javascripts from the page and simplifying the markup and CSS, as well as avoiding font-face and putting the <span> in IE conditional comments as in the working example... no change. (I need to avoid the IE conditional comments to eventually implement this in jQuery.)
There must be something very basic I am missing here about why MS filters won't work in this context. I will absolutely summarise any progress & findings here if my layout changes in the course of testing.
This is a z-index issue. The .IEshadow is positioned behind the background.
Give your h1 a z-index of 10 and it should work.
#headerContainer header h1 {
...
z-index: 10;
}
You might also want to change the color of .IEshadow
.lt-ie10 #headerContainer header h1 span.IEshadow {
...
color: #000000;
...
}
I have a footer, below a textarea, containing a list and two buttons (all inline) within a div with the id #share-something. For some reason it is placed differently in Internet Explorer. I want it to look the same in IE as it does in Chrome. What am I doing wrong? http://jsfiddle.net/h3twR/
Oddly enough, IE7 seems to be fine for me, but 8 & 9 are off. If you have an IE-only stylesheet (using conditional comments), you can add this:
#share-something-container textarea {
margin-bottom: 5px;
}
*:first-child+html #share-something-container textarea {
margin-bottom: 0px; /* targets ie7 and undoes the margin above, as IE7 is okay */
}
This doesn't explain why 8 & 9 behave differently, but I've long since given up looking for logic and reason in IE.
There seems to be some kind of difference between IE8/9 and the other browsers and how they're rendering TEXTAREA.
It looks like you just have to set TEXTAREA to display block. It seems some browsers behave differently in this situation as they will see all elements as inline and generate extra white space. However, setting it to display:inline doesn't seem to have the reverse effect, so it's weird like that.
Here's a solution:
http://jsfiddle.net/h3twR/2/
I simply added this:
#share-something-container textarea {
...
display:block;
margin-bottom:5px;
}
And it appeared to render more consistently. IE7 seems to be off a little bit more. But hopefully this helps a little.
Cheers!