I have this almost good piece of code. Almost because IE 11 breaks it:
.textarea {
text-align: left;
background: white;
border: 1px solid grey;
border-style: inset;
height: 150px;
overflow-y: auto;
word-wrap: break-word;
width: 400px;
}
<div class='textarea' contenteditable='true' id='sec1'>blabla</div>
Why does the text (first line) move down after I hit return? I want either the text to appear at first where it will drop to, or just stay there. This will happen even if the 'first line' is entered manually, with no initial content.
This happens because IE adds p when you press enter. Using Shift + Enter will enter a br like the rest of the browsers.
Alternatively you could style the p elements in there to not have top margin
.textarea {
text-align: left;
background: white;
border: 1px solid grey;
border-style: inset;
height: 150px;
overflow-y: auto;
word-wrap: break-word;
width: 400px;
}
.textarea p{margin-top:0;}
<div class='textarea' contenteditable='true' id='sec1'>blabla</div>
But the basic problem is that IE creates different HTML.
Also have a look at avoid ie contentEditable element to create paragraphs on Enter key which comes with its own issues (explained in the answer & comments there)
EDIT from op
First thanks for the great answer. Second, this is how I fixed this using JS:
this.iebreak = function (event) {
if (event.which == 13 && !event.shiftKey) {
event.preventDefault();
this.field.appendChild(document.createElement("br"));
}
}
and of course add this if your' on i.e.:
this.field.addEventListener('keydown',function(event){thisObject.iebreak(event);});
On iOS 8, I'm overlaying a div with a textarea, with the same text and resetting every margin/padding values, but there's still an offset of 3px that I can't get rid of. It works great on Chrome and Safari desktop.
Here's a fiddle: http://jsfiddle.net/jfvz0ved/
textarea, div {
position: absolute;
top: 0;
left: 0;
font-size: 1.1em;
line-height: 1.6em;
font-family: Courrier;
border: 0;
outline: 0;
padding: 0;
margin: 0;
background: transparent;
display: block;
text-align: left;
resize: none;
width: 100%;
color: black;
opacity: 0.4;
}
Any idea what property could cause this issue? I don't want to resort to a browser detection + special class if possible.
What happens when you apply a universal CSS reset?
If that fixes the problem, then one of the containing elements might need to be reset.
After quite a bit of research, it turns out iOS is adding a 3px padding and it can't (apparently) be removed. So the best way to go about it is to compensate for it. I've added a left: 3px on the div when iOS is detected. It's not ideal (I'd have loved to avoid that and have a CSS only solution), but it works.
I have an input box, which is quite small when it's loaded and I want it to resize to become bigger when the user clicks on it (with CSS).
The CSS code I have is:
input.tagInputField {
box-sizing: border-box;
border: none;
background-color: #fff;
width: 2em;
color: #000;
font-size: 14px;
}
input.tagInputField:focus {
width: 50px;
}
But it's not working... no response... Any ideas?
Thanks!
UPDATE
the html code (sorry for the pic, it was the fastest to get it this way)
It worked. Some other styles were overriding this one, so as per #putvande suggestion I checked that and added !important
input.tagInputField:focus {
width: 50px !important;
}
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding​ style.
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}