I have a element (e.g. a label) with a fixed width and I want that only the text to be dotted-underlined. If a do the "trick" with border-bottom the whole box will be underlined
I think this explains my problem
You should wrap it into a span and add that border-bottom style to that span: http://jsfiddle.net/mrg9a/2/
You could wrap the text in <span> tags and then apply the style to the spans.
See the second element in this jsFiddle example.
Since label elements are inline by default, the problem is caused by making them inline blocks. This in turn is presumably an attempt to avoid using the most natural and most effective way of structuring a form, namely an HTML table. Just switch to table markup and use label inside td with no fancy settings, and the label elements will take the border you set on them, in their natural width.
Related
I have a fairly long H1 title containing a link with a pseudo ::before element that I want to wrap to two lines correctly. Here's what I need:
A pseudo ::before element on an a link inside of an H1 (it needs to be clickable, so can't be on the H1).
I have this done successfully.
The text to wrap normally and align with the left side of the first word.
This is where the problem is.
See my testing codepen here: http://codepen.io/dmoz/pen/EaZqKv
Seems like it should be a simple fix, but I can't think of what controls how the text wraps. Any thoughts?
Adding float:left to pseudo element will do it.
Check updated demo
Right now your image is being displayed as an inline element (think of it flowing like a single character like an 'A' or a '9'). To have text wrap around it, you need it floated. I'm not sure if this forces block level formatting, but it does force other elements to
http://codepen.io/anon/pen/MYJNEp
Like so:
.site-title a:before {
...
float:left;
}
Edit: remember to clear your float if you have other elements that appear after the your h1 (highly likely)
I'm learning css and was struggling to understand why the html is rendering like so:
http://jsfiddle.net/46nVs/
I can understand why the the red border is being cut off from the top and left. It's because outlines don't take up space since they're drawn outside of the box: https://developer.mozilla.org/en/CSS/outline. In this example they're being drawn outside of the <body> element.
However I was confused as to why border is being cut off from the
top. Any ideas?
What css can be applied to the <span> element to make the entire
outline and border display?
Also, is it ever considered okay to place an inline element next to
a block element like <span>somestuff</span><div>somecontent</div>?
Border (and padding, for that matter) are being cut off due to <span> being an inline element.
Any block level element (or anything with display: inline-block) is subject to different rules (eg. can have width set), and one of those rules says "Block elements are positioned from the start of the border, inline are position from the start of the content".
Quick Edit: You've changed your question, and Sagar has answered the other parts of it well enough for me not to bother :)
Point 1:
If you add a float:left or a display:block, the box will render correctly. This is because span is an inline element.
Point 2:
Add the following:
margin:10px 0 0 10px;
float:left;
Point 3:
You can place an inline element next to a block element as the design requires. You can also change the display style of the inline element by setting display:block or display:inline-block or any of the other display values allowed.
In addition to what others commented, the thing to remember here is not to use span's unless you want to do color or font changes (by applying a class), for example:
<div class="post">
<div class="post_information">
<span class="date">11/1/2012</span>
<span class="author">Mr. Smith</span>
</div>
<p>Lorem ipsum</p>
</div>
.date {font-weight:bold;}
.author {color:#ff0000;}
If you want a "box" behavior, use a div or a p instead. Overriding the default behavior of span to make it display as block, although technically possible, will probably mean you are using the wrong element or your HTML is not semantic enough. (span has no semantic value)
I have this table1 inside of a span tag (span is inside of td tag)
the problem is that the row data of the Table1 is appearing outside of td ...the data should appear within the boundaries of td tag..right ? coz the span is contained within the td tag...how do I make sure that the width of span remains fixed..like it shouldn't display stuff outside of td tag which is its container
Firebug shows table1's width as 100%
[Edit]
ok I added display:block; in span tag first..didnt work...when I added the same in Table tag the columns of the Table shrank..ie spaces between col.s shrank and row data isn't anymore displaying outside of td's area
Now what I wanna ask is that if I set Table{display:block;} in the css file..how would it affect other tables ??I don't want other tables to get screwed up...Just want this one fixed..Also, the table is being created on runtime using Telerik's RadEditor so will display:block fix table's width and not let its rows' data flow outside td area??
<span>s are inline elements, like <a> and <img>, therefore they cannot accept rules like width:, height: and others.
To allow the <span> to accept these rules, add display: block; to the Span's CSS.
This will allow it to accept the width rule and fill up your TD.
That or just change your <span> to a <div>.
If that doesn't work, post your code and we'll take a closer look :)
A span is an inline element and so cannot have an explicit width set. What is in the span? If it's a continuous string then there is no way for the browser to know where to cut the string and make it wrap. If you don't want to see the excess content then you can set overflow:hidden on the element but that's not always a good idea. Perhaps post the code you are working with and we can provide more specific help.
Here is an example of what I'm working with. http://jsfiddle.net/5J4PE/
I want the red and greed boxes to show up wrapped tightly around the text (like it is when using inline-block).
However, I want it to take up the space like when using block, such that the boxes appear stacked instead of in a line.
I don't want them to be the same width, so I don't want to use table-cell or any of the table displays.
I could just add a <br/> between the elements, but I was wondering if there was a way to do this in CSS.
you could use a span around the text & then set bg Color in css
<div><span class="red">hello</span></div>
then additionally you may use whatever styles on the outer divs.
It's just as nasty as <br /> tags, but float: left; clear: left; on all elements would get you the effect you want. Pick your poison?
Obviously you'd lose some of the layout flow with the floats, so you'd need to adjust your parent to account for that.
Have you tried using the before: or after: pseudo-classes? These allow you to add content before or after a block, using CSS.
eg <span>Hello</span> styled with span:after {content:" world";} will produce Hello world in the browser.
If you specify a line-feed, it should put a blank line at the end of your block. Note: You'll need to specify it using the unicode value of the line-feed character.
Hope that helps.
Why is it like this?
What's the reason inside it?
When you float it, you implicitly make it a block element. And unlike inline elements (a included among these), block elements can be assigned a width and height. Here's a good explanation of block vs. inline differences.
Edit: removed "have layout" as part of description of block elements, this isn't quite true...
<a> is an inline element and flows amongst regular text. As Ben says, floating elements implicitly converts them to "block" elements.
One solution is to use the CSS style display: inline-block - the link will then work much like an image - flow inline with text, but also allow you to set a width/height.
The premise is incorrect.
use an inline-block
abc