On mPDF 8.1.x
I've an HTML <ul> and I want to know if this UL is split with pagebreak ?
Same for <li>...
I've tried page-break-before / page-break-after / page-break-inside with avoid value on this UL/LI... Same result.
How I can do this ?
Related
I have explicitly styled my ul elements to have list-style-type: disc. The li elements within an ul automatically inherit this styling. In other words, there should be bullet (which is what disc stands for) before each li element.
ul {
list-style-type: disc; /* Does not work */
}
li {
display: block;
}
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
Firefox Inspector devtool correctly recognizes that all li elements in the list have the (inherited) value 'disc' for the property list-style-type.
However, as you can also see if you run the snippet, the disc (that is, the bullet) is NOT actually displayed in the browser representation. Instead, the list is displayed as if list-style-type was defined as none (i.e. no bullet or any symbol is seen in front of the li elements).
I'm wondering how this is possible at all: It seems that the browser display (no bullet) stands in direct contradiction to the declaration list-style-type: disc as correctly shown in the Inspector tool.
Anyone have an explanation for the apparent contradiction between what the Inspector tool (correctly) says and the actual browser representation?
That's because it has
display: block;
If you want a marker, the proper display should be
display: list-item;
Note this should be the default value for li elements. The Default style sheet for HTML 4 contains
li { display: list-item }
2.3. Generating Marker Boxes: the list-item keyword
The list-item keyword causes the element to generate a
::marker pseudo-element box [CSS-PSEUDO-4] with the
content specified by its list-style properties (CSS 2.1ยง12.5
Lists) [CSS2] together with a principal box of the
specified type for its own contents.
Otherwise, list-style-* properties don't apply:
Applies to: elements with display: list-item
I'm adding a gallery feature to my blog and the gallery looks like this.
<ul id="pikeme" class="pika-thumbs">
<li>image</li>
<li>image</li>
</ul>
The gallery plugin gets is styling from .pika-thumbs li - however there is also the default blog styling .text ul li that is also applying its effects on the gallery - which I don't want. Is there a way to exclude .text ul li styling from the gallery?
Thanks!
You could use :not, e.g:
Change
.text ul li
To
.text ul:not(#pikeme) li
Or
.text ul:not(.pika-thumbs) li
More on :not from MDN
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector, or any pseudo-elements.
Demo
use the ID selector #pikeme li to override the .text ul li
As ID selector has greater priority than class selector.
css
#pikeme li { /* instead of .pika-thumbs li */
color: red;
}
Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?
But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.
Is there any way to do this without JS or something?
I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.
The code I tried, as you can see in the fiddle:
Relevant HTML
<ol>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ol>
CSS I have tried (without success)
/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}
Here is a possibility using the counter-reset / counter-increment properties:
ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
counter-increment:list;
content:counter(list, lower-alpha) ". ";
color:red;
}
see fiddle: http://jsfiddle.net/jRVH5/14/
For future generations: Newest addition to browsers (FF68+, Ch80+)
::marker {
color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
Style the bullets/characters of a list by using either ol or li CSS properties. Then use a span tag inline to change the actual list item text to be something different if you like.
li {
color: green;
}
span {
color: black;
}
http://jsfiddle.net/jRVH5/9/
I am developing web with wordpress and have a problem with it's submenu. The problem is that it doesn't appear with hover on IE6. There must be something wrong with css, i guess. Any ideas? Is this possible to be done without javascript?
as i understand the problem is with #access ul ul { display:none; } as i delete it, it shows allways the submenu.. is there ny way to change it into something?
My guess since I don't have the code is that the submenu is using li:hover to cause the submenu to appear. IE6 only supports the :hover pseudoclass on <a> tags (only a:hover will work in IE6).
Check out CSS Play for some CSS only dropdown menu examples.
Nope it is not possible without javascript at least in IE6, you need javascript for IE6 :(
Here are some options for you:
IE6 Hover Issue
I think it is possible with this simple trick (overflow-height-trick).
Note that:
A container should have real height.
A wrapper should have real height and "position:absolute".
A childs of wrapper should have real height and "position:relative".
Wrap your menu like this:
< div id="container" >
< div id="menu_wrapper >
< div id="selector" >Computed Value< / div >
< ul id="menu" >
< li >Predefined Value< / li >
< li >Predefined Value< / li >
< li >Predefined Value< / li >
< ul >
< / div >
< / div >
Set styles:
< style >
div#container{height:100%;}
div#menu_wrapper{height:32px; position:absolute;}
div#menu_wrapper:hover{height:100%;}
div#selector{height:32px;clear:both;}
ul#menu li{height:32px;}
< / style >
Enjoy )
i have list like that:
<ul>
<li><a...>...</a></li>
<li>...</li>
</ul>
where both type of listelements are there multiple times in arbitrary order.
Is there a way to format those li's differently? (different list-style-image) The only difference is that the one kind contains a link and the other one doesnt.
No, there is no way in CSS to specify a selector depending on the child elements.
You would have to add something to distinguish the li elements themselves, like a class on all li elements that contains links.
If you can use jQUery, you could add the class to the li elements that contains anchor tags:
$('li:has(a)').addClass('linkItem');
A non-jQuery solution could look like this:
var items = document.getElementsByTagName('LI');
for (var i=0; i<items.length; i++) {
if (items[i].getElementsByTagName('A').length > 0) {
items[i].className = 'linkItem';
}
}
sure. If you give each different li a class you can do it simple. Or you can always do this if you can't use classes.
ul li
{
styles....
}
ul li a
{
styles....
}
The styles in the first class will apply to all li elements and styles in the second class will apply to the < a > tags respectively.
You can't do this with CSS alone, you could use Javascript to accomplish this. Here's an example using jQuery:
$('ul li a').each(function() {
$(this).parent().css('list-style-image', 'url("/path/image.gif")');
});
This will set the style for the li tags, not the a tags. Technically, the list-style-image property is supposed to be set for ul tags, not li, but most (all?) browsers handle it the way you would expect when you style the li tags individually.
Hello there
I would add a <p></p> tag like this:
<ul>
<li><a...>...</a></li>
<li><p></p></li>
</ul>
And then apply 2 different styles like this:
ul a {display:block; padding:3em; background: #ccc;}
ul p {display:block; padding:3em; background: #aaa;}
I would not recommend using javascript for this, some people block javascript ect. but it depends. I would perfer css/html.
Edit:
For some reason you can write <p></p> without making it code - Fixed
Also I might have overlooked that you wanted to apply list-style-image, then this will not work.
This is what classes are for. In HTML:
<ul>
<li class="linked"><a...>...</a></li>
<li>...</li>
</ul>
and in CSS
ul li {...}
ul li.linked {...}