EdgelmildLive
New Member
My question is: Is the following behaviour defined or is it a bug?I have seen answers with various workarounds, but not about the behaviour itself.By default the bullets for each <li> against a block which is floated left get rendered inside the block instead of to the right. However, this is how I would expect it to render (space between the block and the bullets until the <li>s drop below the element, then the same amount of space between the edge of the parent block and the bullets):\[code\]<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Page Title</title> <style type="text/css"> .my_div { float: left; background-color: #CCF; /* To push <li>s out */ margin-right: 25px; } .my_ul { /* Consistency across all browsers */ padding-left: 25px; /* Fix for Opera only */ list-style-position: inside; } </style></head><body> <div class="my_div">Some text<br>Second line</div> <ul class="my_ul"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul></body></html>\[/code\]Try removing the \[code\].my_ul\[/code\] style and \[code\]margin-right\[/code\] and view again. I expected that it would render the same way but it doesn't. It works the same in all browsers that I have tested it on (Opera 12, Firefox 17, Chrome 23, Internet Explorer 8, Safari 5).