I am having an issue with line-height on a list item.
In a nutshell, we have a line-height assigned to the body, which the <li> obviously inherits.
If I put a <span> inside the list item and specify a font-size that's smaller than the standard body font, the <li> keeps the line-height for the document, not for what the span actually is using.
One thing to consider is that I'm very limited with what I can do with regards to the actual HTML, as this is HTML created by the ckeditor (wysiwyg) editor. If you open that editor, create some list items and then change the font size, this is what you get:
<ul>
<li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
<li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
<li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
</ul>
I can't really change what it outputs, but of course we can try and use CSS rules to control it.
I put up a jsfiddle that illustrates the issue: http://jsfiddle.net/virtualpromote/pW47c/
If you know of a way to make the <li> to base its line-height on the height of the <span> within it, that would be awesome.
-- Javascipt is not an option to solve this problem. The HTML that's generated is actually passed onto an app that creates a PDF out of it on the fly, so that of course, can't parse any javascript rules that we could apply after the fact.
John,
Billy Moat has the right idea, something like this will work:
li span { line-height: 10px; display:block; }
The span tag falls inline with its container element, the li. Changing it to block forces it outside of inline elements, thus not inside the li line-height.
Cheers
Have you tried setting the line height of the list element to normal?
li {line-height: normal;}
The simplest thing is to not add a unit to your line-height. Simply using 1.3 will keep your line-height in proportion.
Do you want to reduce the line height by .3 so that the span is using a normal line height? If so you can do the following:
li {line-height: .8em;}
Related
I have a document like this:
This is some text.<br>
This is some more text.<br>
This is yet some more text.
This renders like this:
This is some text.
This is some more text.
This is yet some more text.
Is there any way to adjust space between lines, but only where the <br>'s appear? The output might look like this:
This is some text.
This is some more text.
This is yet some more text.
This is not the same as double-space, as long lines wrapping on the page would not appear with the extra space.
How can I adjust the amount of space between lines where <br> appears?
It is possible to target a <br> tag with CSS but it will not be very cross-browser compatible and it just isn't a very good idea because anyone looking at your code will assume you haven't got the faintest idea what your doing because there are certainly more appropriate methods to achieve your goal.
br {}
The <br> on it's own has no default height. If you have an HTML page with nothing but a <br> you have an empty page. The style on the <br> tag will be
<!-- HTML -->
<br/>
The page will have this styling
height: auto;
line-height: normal;
max-height: none;
min-height: 0px;
The height of that a <br> tag represents is inherited from the styling of it's parent container. Thus if it is nested within a paragraph; the <br> will equal the height of 1 line of text based on the line-height and font-size of that paragraph.
<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>
I now have an empty page but the page is 10 pixels tall because I specified that the paragraph should be 10 pixels and even though the paragraph is essentially empty, it's not empty because I have a break. Thus the break is equivalent to the height of 1 line of text.
The current CSS1 properties and values cannot describe the behavior of
the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break
between words. In effect, the element is replaced by a line break.
Future versions of CSS may handle added and replaced content, but
CSS1-based formatters must treat ‘BR’ specially.
- Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements
An appropriate solution would be to separate the upper and lower block into two containers (<p>) and set a margin between the two blocks. If you use a <p> tag you can style the space between paragraphs without adding unwanted space to the top paragraph like this..
// CSS
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.
Or merely adjust the line-height of the text if you don't mind the space between every other line increasing as well
You could potentially also find the pseudo-selector ::first-line useful.
Though I can't fathom why; I do believe in the fact that there can at times always be a good reason to break the rules.. If you absolutely positively are deadset on styling the <br> wrap it in a container and set the line-height of the container.
<div style="line-height:50px;"><br></div>
Yes you can...like by using line-height in css
.test{
line-height:40px;
}
Demo
You can use padding-top also
Demo2
Each link in the menu on the left has padding-left: 15px; the reason for this is so I can add a background image (the blue arrow).
But now, when the text wraps (see "Paintings, prints, and watercolours"), it ignores the padding.
After searching around I can't find any similar cases at all, is that because I am going at this wrong?
If what I have at the moment is fine, how can I fix the wrapping issue?
Padding only applies to block-level elements. Either assign your menu's a elements a display:block; or display:inline-block; to get them to respond properly to padding.
You should place the padding on a div instead - http://jsfiddle.net/qHGrJ/1/
Paddings don't work that way for span style elements. Alternatively you could probably use display:block on the link.
Given the way you're using these anchors you can just set them to display:block.
A more ideal way to mark up this menu (especially since you're using HTML5) would be to use a menu tag containing a list of links.
<menu>
<ul>
<li>My Menu Item</li>
<li><a href="mySecondMenuItem.html>My Second Menu Item</a></li>
</ul>
</menu>
This is more semantic and also gives you the li's as hooks to add a margin to.
Add display:block to your anchors. I would suggest against using inline-block as it isn't fully supported cross-browser (i believe IE7 and below).
Add display block on line 13 of view.css like so
#auction_cat_menu p a{ padding-left:15px; white-space:pre-wrap; display: block;}
In a chain of list elements (<li>) with display: inline, is there a way to force a line break using a CSS property?
Using a <br> within a <li> feels dirty, and outside a <li> is probably forbidden.
to clarify:
I need them "display: inline" because I may need to center them within the UL
I need only some of the elements to have a line break.
Why do you use display:inline?
display: list-item; does exactly what you need (which is default for li)
You can have all <li> elements rendered with float:left and then set on one of them clear:left. This will cause it to "jump" to the next line.
Alternatively, float:right and clear:right will do a similar thing.
Do you want a "line break" after each <li> or just after a few certain ones?
For the former: If you set the width wide enough to fill the container, they will line wrap (actually, they only have to be wide enough to fill 51% of their container, since two could no longer fit on one line). -- but in this case, you probably don't need them to be inline at all.
For the latter: You would probably be better off using float: left with a clear: left on each one you want to start a new line with.
Try putting display:block; on the particular <li> that you want on the next line.
You could try and use the :after pseudo-element but I haven't played with it much.
li.class:after { content: "\a"; white-space: pre; }
works for me.
I'm trying to place normal size text on the same line as a header tag. Doing this put the normal size text on the next line because a header tag is a block element.
<h1>Header</h1>normal size text
Any help is much appreciated.
h1{display:inline;}
Will cause the H1 Tag to stop blocking
Or, if you don't want to use inline elements, float the h1 instead:
h1 {
float:left;
}
In some scenarios may need to wrap both the h1 and normal size text in a div, that's also floated left, to keep it contained on the same line:
<div id="foo"><h1>Hello</h1>World</div>
alternatively, you might want to try
<h1>Header <span class="normal">normal size text</span></h1>
, and style the .normal span using css to look like normal text. not semantic, but visually works even in IE6.
I've got menu items that look like this
<ul>
<li>Item1<span class="context-trigger"></span></li>
<li>Item2<span class="context-trigger"></span></li>
<li>Item3<span class="context-trigger"></span></li>
</ul>
with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:
Item1^ Item2^ Item3^
If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?
try using
white-space: nowrap;
in the css definition of your context-trigger class.
Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.
You need to put the following to keep your list item from wrapping (putting it in the context-trigger class would just keep the span contents from wrapping):
li { white-space:nowrap; }
If you float the <li> elements, you should get the effect you want.