I have to make some text editable to form an Email. To indicate where text may be changed, I want to give a border around editable passages.
Sadly, it looks pretty ugly with:
outline: 1px solid #c9c9c9;
If the editable span contains a line break (border looks even worse!).
See fiddle: http://jsfiddle.net/Q5qdA/1/ for reference. Try to add a double line break and some text. Especially line breaks will result in very ugly vertical borders.
Another problem is (only tested on firefox), that if you add a line break at the end, you can't remove it (it creates a new break with type="_moz", which won't get removed...)
Is there some way to work around this ?
ps: I have jQuery / jQuery-UI at hand, but wouldn't like to use plugins...
its hard to get your problem, because its not easy to see, what you wish.
But maybe its better to get one outline for one span :
Here's my fiddle
http://jsfiddle.net/Q5qdA/7/
p {
width:210px
}
(for example)
with a width you can solve this.
Related
I'm trying to achieve the underline for all parts of my button. I tried using -webkit-box-decoration-break property, it didn't work.
Both first line (New Delhi,) and last line (India) should have underline. Since it's due to break in the box, I tried the box-decoration-break property, but it didn't work out. Please guide me where I am going wrong.
The only thing you can do is use text-decoration: underline. Think of a button and the text inside it as a box. The line you are trying to draw will always be at the sides of that rectangle. When the text is wrapped (e.g., because the box is not wide enough), the rectangle just increases in height and keeps drawing the line at the bottom. Have a look at this Mozilla doc about CSS text-decoration or this Mozilla doc about CSS border.
You can add border-bottom : 1px solid #cccccc;. and if it's too close to your element (e.g. button) you can add padding-bottom : 5px to solve your issue.
I have 3 div's with over 20 textboxes in each div.
Based on certain rules, each div is enabled or disabled.
I use the following code via VB to disable or enable ALL of the fields in each div, and works great: div_full1_DETAILS.Attributes.Add("Disabled", "") div_full1_DETAILS.Attributes.Remove("Disabled")
Now when I enable the div, I would like to apply a style to each box within the div, and I would like to do it all one hit, just like the code above.
So I would like to apply something like this:
div_full1_DETAILS.Attributes.Remove("Disabled")`
div_full1_DETAILS.Style.Add("border-bottom", "thin dotted #AD9F9F")
So the last line of code I would like to apply the style to all the textboxes within the div div_full1_DETAILS
Can this be done ?
UPDATE:
Following comments below and some search on the web regarding child style, etc, I have done as follows, but clearly something is wrong:
CSS
.div_details_dotted * {border-bottom: thin dotted #AD9F9F}
.div_details_dotted_WHITE * {border-bottom: thin dotted white}
VB PAGE
' SET ALL 3 DIVS TO WHITE DOTTED BORDER-BOTTOM
div_1_DETAILS.Attributes.Add("class", "div_details_dotted_WHITE")
div_2.Attributes.Add("class", "div_details_dotted_WHITE")
div_3.Attributes.Add("class", "div_details_dotted_WHITE")
if username='frank' then
' enable all textboxes in div 1 and put a dotted dark line below...
div_1_DETAILS.Attributes.Remove("Disabled")
div_1_DETAILS.Attributes.Add("class", "div_details_dotted")
end if
However this doesn't work, clearly I've done something wrong.
Each DIV has a dark line around it which it has now dissapears (so the CSS is not being appliedonly to child textboxes but also to div.
Also the div_1_DETAILS.Attributes.Add("class", "div_details_dotted") doesn't do anything.
Any ideas how to proceed ??
thanks
Please look at this fiddle: Here
What I am looking for is a way to remove that extra space at top (the one between black circular 1 and top edge of pre tag) in first example and make it look like second one
The first example has some extra space above it (except the margin from strong elements), and I know that its because of the extra new-line after <pre><code> I didn't wanted to remove that extra newline as removing it makes the code look really unreadable, so I added this
pre > code > strong:first-of-type { margin-top: 10px; }
I thought it'll work but I forgot that I might have multiple strong tags in first line. Now I don't know what to do. Is there a work-around for my problem ?
Try the following adjustment to your CSS:
pre > code {
white-space: pre;
margin-top: -1.00em;
display: block;
}
You can also leave out:
pre > code > strong:first-of-type { margin-top: 10px; } /** not needed **/
Fiddle: http://jsfiddle.net/audetwebdesign/WscKu/2/
Tested in Firefox on Windows 7, should work fine, basic CSS 2.1, nothing exotic.
How This Works
For visual formatting of your HTML source code, you have a line-feed after <pre><code>,
which creates a single character line in your rendered content, which will be 1.00em tall.
You can compensate by setting the top margin to the <code> block to -1.00em. However, for top/bottom margins to work, you need to set display: block to the <code> element.
I bumped in to same issue and spent over an hour to find solution. I agree with #Fico's answer and wanted to support it by additional information.
Instead of doing this:
<pre><code>
My code snippet
Another line
</code></pre>
You want to do this:
<pre><code> My code snippet
Another line
</code></pre>
Note that you need to use same spaces for indentation on first line.
I looked at several other "standard webistes". For example, StackOverflow does this for code snippets inside <pre><code>. The official demo examples of highlight.js library also uses the same convention. This feels bit ugly in HTML source, but The rule of thumb seems to be that your content inside <code> should start at the same line as <code> element.
Also there is a problem with solution that #Marc Audet proposed. If you use negative top margin, it will overwrite on the border if you have one (or if you put it in future).
There is probably workaround if you are willing to use little bit of JavaScript. You can basically trim all contents inside <pre><code> simply by using this:
<script>
$( document ).ready(function() {
$(document.body).find("pre code").each(function() {
$(this).html($.trim($(this).html()));
});
});
</script>
You can see fiddle here: http://jsbin.com/bayawazi/2/edit
The advantage of JavaScript approach is that you have much more freedome to put <code> element. Also most code snippets its probably good idea to remove extra lines.
You should not change any style.
The problem arises becouse you are working inside a pre tag.
Changing styles to fix this will be a hack looking to fix a markup structure
Inside pre tags space management by engine browsers is quite particular.
Modify your pre content as follows and everything will look fine
Your code
<pre><code>
<strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
<strong><b>3</b>property: value;</strong>
}
</code></pre>
Modification (the second line should continue the first one...)
<pre><code><strong><b>1</b>#id-name</strong> <strong><b>2</b>.class-name</strong> {
<strong><b>3</b>property: value;</strong>
}
</code></pre>
fiddle here
First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.
My page is here. The section I am on about starts with CANVAS FINE ART WRAPS, you will notice between the first and second paragraph there is a big gap. I have looked at it on chrome (osx), safari(osx) and firefox(windows)
There's nothing in the markup to suggest the reason for it. Inspecting it shows no margin or anything causing it.
It sounds like Wordpress is sticking in something it shouldn't be. My suggestion would be:
Go into html view
Cut out all of the code
Paste it into notepad
Save the page as completely empty
Copy back the elements one by one into your html view and save.
Add display: inline-block; to the .box p selector. It should work after this.
the p has a margin - which should be reduced
also , the box class should reduce its line height.
edit
Also - ive edited your text to : 1111 and 2222 and it was fine
you probably pasted the text which contains some bad chars
The main issue I see is on line 199/200 of your normalise.css file:
it has:
p, pre {
margin: 1em 0;
}
If I remove this, the big gap is removed.