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.
Related
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!
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 creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}
I've got a problem with the AutoCompleteExtender inside the AJAX Control Toolkit which I just can't seem to get to the bottom of. The control sits inside an asp:Panel linked to a ModalPopupExtender from the toolkit. Everything works beautifully in the latest generations of IE9, FF and Opera but glitches in Safari and Chrome (assuming it's WebKit related).
The glitch is that the drop down from the autocomplete is falling behind the modal popup rather than in front of it (names blurred for privacy reasons):
Looking at things in Firebug, here's the drop down rendered in an unordered list:
<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">
The autoCompleteList class looks like this:
.autoCompleteList
{
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
}
And the resulting div for the modal popup looks like this:
<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">
With the following modalPopup CSS class:
.modalPopup
{
background-color: White;
padding: 10px;
width: 462px;
}
My assumption is that the lower z-index on the list is causing it to fall behind the div but then again, it plays nice in the non-WebKit browsers. The z-indexes are also inline styles so they're obviously coming straight from the controls. Am I missing something here? Any suggestions? (other than ditching WebForms and AJAX and employing jQuery)
Seeing as you suspect it's the z-index causing the problem, what happens if you try and override the inline styles that are spat out by the Ajax Control Toolkit using !important?
.autoCompleteList {
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
z-index:2000 !important;
}
.modalPopup {
background-color: White;
padding: 10px;
width: 462px;
z-index:1000 !important;
}
I know it's a bit of a hack but if you haven't tried it yet it might be worth a shot?
Ian, I was having a similar problem with a modal popup and several callout extenders. The callout was always under the popup. I lowered the z-index of the modal with the !important and poof. Started working. Thanks much for the suggestion.
I have came across same problem.
My code was running pretty fine in mozilla. but it was not working on Safari and Chrome.
Now I set "z-index:12000 !important;" to autocomplete class, because modal popup has 10051 z-index value.
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 /* ... */