Please check the below jsfiddle example
http://jsfiddle.net/KX6BY/1/
<div contenteditable="true" id="sud"></div>
#sud
{
width: 100px;
height: 100px;
top: 50px;
left: 50px;
border: 1px solid black;
}
#sud:empty:before
{
content:"hello"
}
In all major browsers like Chrome, Firefox, Safari on focus of the input field cursor appears at the beginning(on top of content) But in Internet explorer, The cursor appears after content. Is there any workaround for this??
Working solution: JSFIDDLE
By specifying position:absolute to the :before psuedoclass and giving top: value equal to line-height computed to the text u can have uniform functionality in all browsers.
#sud:empty:before
{
content:"hello";
position:absolute;
top:8px;
}
Hope this helps!
Related
I have inserted an icon with an image inside.
In chrome I see the icon
But in IE icon disappear.
Here's my CSS
<div class="infoIcon"></div>
.infoIcon {
content: url('/assets/img/info-sign.png');
background-color: #919191;
width:15px;
border-radius: 8px;
margin-left:10px;
display: inline;
vertical-align: sub
}
you can achieve this using HTML entity.
.infoIcon {
font-size: 40px;
}
<div class="infoIcon">ⓘ</div>
In css "content" applies to ::before & ::after pseudo selectors.
As to why it Chrome is showing the image, Chrome tends to be flexible with css syntax most of the times. IE and FireFox are not showing the image because it is not the right syntax.
Edit:
Example
If you want to keep 'content' You'll have to move your content to
.:before
.icon:before{
content: url('src');
}
However you'll need to scale your image to the right size. (Icon libraries use fonts where they can change the font-size easily)
Second option is continue as you are now but switch to background-image
.info{
background-image:url('icon.svg.png');
background-size: 100% 100%;
width:40px;
height: 40px;
}
I have an HTML/CSS file similar to this.
.window{
position: absolute;
width: 150px;
height: 100px;
background-color: #424242
}
svg{
pointer-events: none;
}
.b{
height: 40px;
width: 40px;
position: absolute;
bottom: 8px;
right: 8px;
}
<div class="window">
<div class="b">
<a href="https://www.google.com" target="_blank">
<svg height='100%' width='100%'>
<rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>
</svg>
</a>
</div>
</div>
On Chrome, I am able to click the blue SVG with the link, but on IE11, I am not. Does anyone know why this is the case, and what I can do to fix it on IE, without impacting other browsers? The SVG rule is for some other SVGs, so it would be nice to not have to change it.
Thank you!
The problem is not the SVG itself or the pointer-events. The problem is the a tag, and how IE 11 renders the tag when it contain block elements inside.
The solution i tested is to style the a tag to fill its container:
a {
overflow: hidden;
display: block;
width: 100%;
height: 100%;
}
I encountered this problem before, with SVG's as images, in older versions of Internet Explorer.
Hope it helps!
.window{
position: absolute;
width: 150px;
height: 100px;
background-color: #424242
}
svg{
pointer-events: none;
}
.b{
height: 40px;
width: 40px;
position: absolute;
bottom: 8px;
right: 8px;
}
a {
overflow: hidden;
display: block;
width: 100%;
height: 100%;
}
<div class="window">
<div class="b">
<a href="https://www.google.com" target="_blank">
<svg height='100%' width='100%'>
<rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>
</svg>
</a>
</div>
</div>
EDIT: I will write this trying to explain my experience about it. Old browsers, including old versions of Firefox, Chrome and Internet Explorer, did not suppoted to nest block elements inside inline elements. So if you tried to nest a div element inside an link, it will cause that the user won't be able to click on the link and some other strange behaviors. New browsers support some of those techniques (for example, a link with some div layout inside so all the block is clickable). IE11 is on the fence. Also i encontered some issues with SVGs and IE11, even using the SVG as an image (thru an img tag and an external SVG file).
The main problem is that some css attributes can not being setted in onlder browsers, like witdh, height and vertical padding (padding top and bottom). So if you nest a block element inside an inline element, and the element overflows the inline element dimensions (inherited by font size, line height and vertical align of the element), the inline element will not be rendered properrly.
Hope this little edit help you understand the problem.
I can't currently test this myself, but give this a try:
svg{
pointer-events: none
}
svg>rect{
position: relative;
pointer-events: auto;
}
I am referencing this: https://css-tricks.com/almanac/properties/p/pointer-events/#comment-1108851
I edited my answer. To be honest, I'm not exactly sure why you wish to do this. What use does disabling the pointer-events on the svg provide if you wish to click it?
I am experiencing an issue which puzzles me a bit.
My reference for this issue is Chrome 32 on Mac and Safari on iOS 7.0.4.
In the following example, Chrome renders the text in the .background and textarea elements perfect and on top of each other, this is what I want. Safari on iOS though, offsets the text in the textarea with 3 pixel-units. This happens although padding, border and margin are set to the same values on both elements.
When I am debugging in Safari's developer tools, both through my iPhone device and the iOS simulator, the elements themselves align perfectly when outlining the elements metrics.
Markup
<div class="container">
<div class="background">This is a test</div>
<textarea>This is a test</textarea>
</div>
CSS
.container {
border: 1px solid #cdcdcd;
background: #f0f0f0;
width: 400px;
height: 50px;
position: relative;
margin: 24px 0;
}
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #f00;
}
textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
background: transparent;
border: 0;
position: relative;
z-index: 2;
}
Demo: http://jsfiddle.net/Y8S5E/2/
Can anyone offer a solution or some theories to research into, for this issue?
Edit
It appears that this is an issue with the textarea's shadow DOM node. Does anyone have some reference to how the padding of this element is defined? Percentage value or hard 3px value? Any way to remove this padding?
Unfortunately I don't think you can't style inside of the Shadow DOM in iOS. Some elements expose pseudo attributes which you can hook on to. For instance, <input type="range"> exposes a -webkit-slider-runnable-track pseudo element.
http://codepen.io/robdodson/pen/FwlGz
You can see this in the dev tools.
But I don't think textarea exposes such a thing.
I just discovered this strange problem on an <a> element. I wanted to make a css only button with a "pushed down" animation.
More or less something like this:
.button:active {
position: relative;
top: 10px;
}
The problem is that link doesn't seem to work if you do the mousedown below the text and release when the text has moven below the pointer (the animation runs correctly but onclick or href don't work). You can see the "bug" or whatever it is in this fiddle:
http://jsfiddle.net/H9RgD/
I already tried different things, like using padding to create the animation but it still doesn't work. I can confirm it doesn't in Chrome 22 (latest version as of today). Why does this happen? How can I get around this problem to animate a css only button?
Cannot answer "why" (I think it may be a bug). It seems like I recall encountering a similar issue before with Chrome, and came up with a similar workaround as I offer here. Somehow, adding the "overlay" of the pseudo-element causes the whole to become "clickable." In your case, I noticed that if I clicked toward the top of the div, it also did not register, but when I added the top adjustment to the :before in the :active state, that seemed to be resolved also.
This fiddle seems to have a working solution. HTML is the same as your fiddle (except I added the content to the alert):
HTML
<div class="tabs-container">
<div onclick="alert('here')">Click below the text</div>
</div>
CSS
.tabs-container div{
display: inline-block;
background: whitesmoke;
padding-bottom: 5px;
font-size: 25px;
border-bottom: 5px solid grey;
position: relative;
}
.tabs-container div:active{
top: 10px;
border-bottom: 0;
}
.tabs-container div:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.tabs-container div:active:before {
top: -10px;
}
I'm trying to theme a search form with button and I have problem with text positioning in the button. Chrome and Opera are showing the button properly, but Firefox is not.
HTML:
<button type="submit"><span>Search</span></button>
CSS:
button {
border: 0;
background: red;
padding: 0;
width: 200px;
height: 50px;
position: relative;
}
button span {
position: absolute;
top: 0;
left: 0;
}
In Opera and Chrome the span is at the top left corner. In Firefox the padding at top and left and the top position begins in the middle of the button height.
What am I doing wrong?
Live demo: http://doctype.n-joy.sk/button/
Thanks
That's a strange one. Looks like Firefox is keeping some kind of proprietary padding inside of button element. The workaround I was able to implement was a FF-only piece of CSS with a rather ugly negative margin for the span... A quick fix really, maybe others can follow with something better.
button {
background: red;
border: 0;
padding: 0;
margin: 0;
}
button span {
display: block;
background: blue;
width: 200px;
height: 50px;
}
// FF only:
#-moz-document url-prefix() {
button span {
margin: -1px -3px;
}
}
It looks like you did everything correctly, but there is some dark magic emerging from the default styles of Firefox, and from some undocumented, hidden (pseudo-)elements attached to buttons.
I haven't yet found the rule which would help you with this button issue, but you may try to scan the default styles yourself. If you type in Firefox's address bar: resource://gre-resources/forms.css, then you will see one of its default stylesheets.
Some of suspicious selectors (just wild guesses) are: *|*::-moz-button-content or input > .anonymous-div. The second one does not seem to be defined for button, but who knows where else the magic lies?
In any case, I suppose, you might report it as a bug.
Found this in Twitter Boostrap reset.less file.
It corrects this behavior.
button,
input {
*overflow: visible; // Inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
Note that comments are in less... not CSS so you have to replace // by /* ... */