I am having an issue in Chrome where an empty content editable div is causing undesired line spacing inside of an ordered list. The following HTML viewed in Internet Explorer works as expected but when viewed in Chrome the editable div is moved below the number when it is empty.
<body>
<ol>
<li>
<div contenteditable="true"></div>
</li>
</ol>
</body>
The image below shows that once text has been entered into the editable div the content shows up where expected but when the text is empty the content is moved down below the 1.
I'm wondering if there is CSS I can apply to cause the empty div to show up beside the 1 like in IE.
Here's a fiddle.
Forget about the div element. Just add the contenteditable directly to your li
http://jsfiddle.net/X8nLR/
<li contenteditable="true"></li>
OR if your really like your div go for
http://jsfiddle.net/QXeA3/
div {
display: inline-block;
width: 100%;
}
You can set the display property of li to block
li {
display: block
}
See http://jsfiddle.net/4nWJ2/3/
EDIT: Above solution removes the decimal index of the list.
Here's another possible solution (assuming you'll only have one contenteditable item per list item)
li {
position: relative;
}
li [contenteditable] {
position: absolute;
top: 0;
}
See working fiddle: http://jsfiddle.net/4nWJ2/4/
Just add display: inline; to your CSS:
<body>
<ol>
<li>
<div contenteditable="true" style="display: inline;"></div>
</li>
</ol>
</body>
JSFiddle: http://jsfiddle.net/w3phy/
Related
I have a problem with very simple HTML markup, which is rendered different in Chrome and Firefox. I'm wondering whether it is a bug in one of them.
The code is as simple as:
<ul>
<li>
<img />
</li>
</ul>
The problem is that in Chrome the <li /> element has some padding at the top, but only if its content is an image. There is no problem with e.g. text.
Example fiddle: https://jsfiddle.net/8c4rujvu/1/
img {
display: block;
width: 500px;
}
li {
border: 1px solid #f00;
}
<ul>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>Some text</li>
</ul>
This is how it displays in Firefox (50.0.2):
And in Chrome (55.0.2883.75 m):
What seems to be a problem here?
This is due the default browser / user agent styling difference for display: list-item.
As a fix, you can use inline-block and vertical-align:top (or even just vertical-align: top) for the img to get common behaviour - see demo below:
img {
display: inline-block;
vertical-align: top;
width: 500px;
}
li {
border: 1px solid #f00;
}
<ul>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
Some text
</li>
</ul>
A related question you may want to look at: Why alignment mark list is different on WebKit when using :before height?
Why this happens?
Given that other browsers do not agree with chrome on this, this clearly looks like a bug and it is. See this open bug documented in Chromium Bug Tracker:
Table inside list item rendered at wrong position(Example URL: http://jsfiddle.net/P8Ua7/)
See excerpts from one of the comments in the bug:
Not limited to tables. Putting a flexbox inside a list-item gives the
same result. It also happens if you have replaced content displayed as
block.
The OP has an image (which is an inline replaced element) displayed as block!
Here is another bug you may want to check out.
This issue can simply fix float:left property too , check this fiddle
https://jsfiddle.net/9wp619xz/
check with the bug details Fixing Google Chrome compatibility bugs in websites - FAQ
https://www.chromium.org/Home/chromecompatfaq
img {
float:left;
width: 500px;
}
li {
border: 1px solid #f00;
float:left;
width:100%;
}
<ul>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>Some text</li>
</ul>
It is usually due to browsers default styling. In order to fix this issue, i recommend using a normalize css stylesheet or by adding your own css for the element.
The solution is two-fold.
Setting the image to display: inline solves the empty line above the image. This empty line is a nasty bug in Chrome. This bug makes it effectively impossible to use/start with a non-inline element in a default list item. A very big deal if you ask me.
Adding vertical-align: top places the list marker on the top (which is where you probably want it to go). This also removes the unwanted space below the inline image. The list marker placement and the white space below the inline element are not bugs. This is expected behaviour.
This would result into the following (simple) work-around for the OP:
img {
width: 500px;
vertical-align: top;
/* display: inline; *//* This is default, thus can be omitted */
}
li {
border: 1px solid #f00;
}
https://jsfiddle.net/8c4rujvu/3/
This is caused by the two different approaches these two browsers take while rendering a UL / LI element. I think that is clear from the start :)
The issue here is not how inline elements behave!
The issue here is how list-style properties behave in these two browsers!
If you notice that, the size of gap is 18px, which is default line height in chrome! If you increase the font-size for the li then size of dot marker will also increase so as the distance of image from top edge of div.
If Firefox, that dot marker, or list-style-type component act as the absolute positioned element, thus any element after simply begin from the li top-left edge as expected.
But in Chrome, that dot marker, or list-style-type component act as the inline element, and like any other inline element will allow an inline/floating element to get in same line as itself. Thus text which is inline by nature began next to the dot! This applies also for image, button, link, span or any such elements!
Now what you feel as an issue is perfectly normal behaviour for those elements. Even If two elements are floating or inline, if they can not get in horizontal width of parent, the latter element fall down to next line! Similar is the case with display:block elements as they by default start on a new line!
In your example images have display:block, thus they will always begin on new line! But even if you remove that property, still image are quite big to fit in parent, thus it'll fall down & show a gap. (This is for smaller screens only, on larger screen this won't be an issue for inline-block image)
Again, weird part is that, div acts a inline element in this case, even if you give the width above 100%! From this I concluded that, if wrapping of content is possible then that element begin on new line but if content can not wrapped then it starts on a new line!
Note:
This is based on my observations & past experience! If anybody have links to official documentation for this case please paste if here. Also any suggestion to improve this answer are welcome.
I've updated your JSFiddle with more examples: https://jsfiddle.net/8c4rujvu/5/
Try this code for you HTML
ul li {
display:block;
}
img {
display: block;
width: 500px;
}
li {
border: 1px solid #f00;
display:block;
}
<ul>
<li><img src="http://www.w3schools.com/css/trolltunga.jpg"></li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
Some text
</li>
</ul>
Hello guys I have a menu item with links within each entry.
I would like to make clickable the entire tag <li> to run the link.
<li style="padding: 10px 0 10px 15px;">
Link
<li>
I searched on the forum and I understand that to achieve (in part) what I want, i should add:
a {
display: block;
width: 100%;
height: 100%;
}
but in my <li> i have padding and so the clickable area of link it isn't equal to size of <li>. I tried to delete padding of <li> and add it to <a>, but then the clickable area comes out of tag li....
How can I solve the problem?
thanks
EDIT
this is a jsfiddle example http://jsfiddle.net/zgqyLuq4/1/
The clickable area of link COMES OUT its parent (<li>)
You could make the a tag have the padding not the li.
if in case you have:
li {
padding: 10px;
}
make it on the a tag like this:
li > a {
padding: 10px;
}
This question already has answers here:
List with nested `overflow-x: hidden` hides list counter/point - why/is this a bug?
(2 answers)
Closed 6 years ago.
I'm inclined to think this is a bug in Chrome (why would a style on a child element affect the parent?), but there might be something else going on that I'm not understanding.
The ordered list below has 1 item, which in Firefox and IE10 is numbered (although in IE, it's positioned wrong). In Chrome though, the number is hidden entirely.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px;
}
<ol>
<li>
<div>Some text that trails off</div>
</li>
</ol>
What's going on/is this a bug/can this be worked around?
Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.
CSS
ol > li:before {
content: '';
display: block;
height: 1px;
}
div {
margin-top: -1px;
}
Demo
Try before buy
This isn't a bug so to speak, more of a difference in how different browser engines render the CSS. (Blink vs Trident vs Gecko vs WebKit etc)
Technically speaking, the Chrome display is correct due to hiding everything outside of the div as specified with overflow: hidden;.
If you use the Chrome Inspector, you can see where the edges of the elements are and the number is outside of that area.
Your best work-around would be to set an additional piece of CSS to override the main div element.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
}
ol div {
overflow: visible;
}
<!doctype html>
<html>
<body>
<ol>
<li>
<div>Some text</div>
</li>
</ol>
</body>
</html>
If you need to use the div inside li, display the div as inline, otherwise list-style: inside will work.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px; display: inline;
}
<ol>
<li><div>Some text</div></li>
</ol>
Define selectors for these elements.
Your going to began to run into problems if your just using global tags: <li> <div> especially since your nesting here.
eg:<li class="dothis"> <div class="thisdivdoes"> ...
After you do this it would be easier to differentiate overflow:hidden; where and not where.
Since your tag is within your <li> define what you want them to do individually since that's what you want to do, or else you may see them inherit each other as your experiencing.
Also, check your doctype in HTML5 I think it's not valid while in strict it may be.
This is the code for a horizontal <ul> that I'm using:
.list ul{
width: 100%;
}
.list li{
display: inline;
list-style-type: none;
padding-right: 20px;
padding-bottom: 20px;
}
Using this, if I do this:
<ul class="list">
<li>
<img src="myImg.png" />
<span class="edit"></span>
<span class="delete"></span>
</li>
</ul>
Then it all works, however if I put a <br> between the image and the edit/delete buttons, e.g:
<ul class="list">
<li>
<img src="myImg.png" />
<br />
<span class="edit"></span>
<span class="delete"></span>
</li>
</ul>
Then the list breaks, and I get the images in a vertical list instead of horizontal. Screenshot when its working:
Screenshot of when its not working:
Any ideas?
Replace the
display: inline
with
float: left
Example fiddle
The solution is to use: display:inline-block on your li element which then allows all other markup to function correctly, both in and out of your list.
inline-block: The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
Here is a jsfiddle showing an example.
The above jsfiddle is now edited to support older IE7 to work alongside modern browsers. The order of the .css for display is important. To throw in support for IE6, then additonal _height: 30px; where 30 is your required height needs to be added. But IE6 browser use is less than 1%.
Try to use for .list li { float:left; } instead { display:inline; } and will work.
I have been trying to learn horizontal lists in html. I have the following code,
CSS:
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
}
</style>
HTML:
<div >
<ul id="list">
<li>Store </li>
<li>Mac </li>
<li>IPod </li>
<li>IPhone </li>
<li>IPad </li>
<li>ITunes </li>
<li>Support </li>
</ul>
</div>
When I put the id in the div tag (<div id="list">)then it does not show the list horizontally while the current code displays the list horizontally. I don't get the reason behind it. Please help me clear the concept. Thanks
Because a div is not a list element. It has no list-style-type, so it won't change the bullets on any lists within the div. And an 'inline' display type does not propagate down the DOM tree from a parent node, so the inline applies only to the div itself and won't affect the list or li elements.
It works just fine if you put the ID on the div element as well.
Have a look at this fiddle: http://jsfiddle.net/sKaYm/
Your CSS selector #list li says "apply this to any list element that is child of an element with ID 'list' - no matter if it is an immediate child or not." - So basically it doesn't matter how many levels of div's or other elements you wrap around your list, it will still select it.
According to this jsFiddle it works.
list-style-type only changes the marker in front of the item.
to create cross browser horizontal list add float left to each list item :
#list li
{
text-decoration:none;
display: inline;
list-style-type: none;
padding-right: 20px;
float:left;
}