Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being floated. Any suggestions for a CSS solution, or do I have to manually generate numbering and style it accordingly?
It appears that you are quite knowledgeable about the list-style-position property, which is why you understand why the horizontal rule does not extend all the way underneath the bullet or number. The padding on the left of the list is causing the list elements to be pushed to the right, keeping their contents within their designated space :).
To address this issue, I found a solution here: http://jsfiddle.net/J4b6Y/14/
[EDIT]
For webkit browsers, here is a fix: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
This solution works in all browsers and even has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
And yet another option... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
It appears that Update 3 was successful on webkit but not in FF... time to harness the true power of CSS.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
What do you think about this?
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
UPDATE
If it works for you, give this a try
My recommendation would be to eliminate the hr tag and the floating image properties.
If you are unable to utilize the image as a css background, consider the following approach:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Furthermore, by removing the p tag, you can save a few bytes in your code.
After reviewing the various responses to this question, it appears that while there may be methods to achieve this using CSS, an elegant solution is not readily available. In my opinion, I find it more effective to create the numbering within the HTML code and style it accordingly. This approach can be easily implemented when generating the page through server-side scripting.
I will continue to explore potential elegant solutions using CSS and will update this question if I come across any.
For years, I've relied on MAMP to manage my web development projects. However, after performing a clean install of my Mac recently, I reinstalled MAMP only to encounter issues with it not functioning properly. Upon reinstalling the program and placin ...
I've encountered a common issue that is slightly different from others I've come across. Despite my best efforts, I have been unable to find a solution on my own. If anyone could offer me some guidance on this, I would greatly appreciate it. The ...
I'm using the text-overflow: ellipsis property in a div to shorten lengthy text values. Since there is no white space in the URL, I want to prevent the overflow from increasing the width of the div. What I want to achieve is to display the following: ...
Is there a way to dynamically change the margin-left of my main {% block content %} in the base.html template based on whether the viewer is using a mobile or desktop device? This is how my current base.html looks like: <div class="content container-f ...
Looking for some assistance with this issue. The solution I found doesn't seem to be working properly in IE 8. In short, when you add a background image to a table row, the background is showing up in all the inner cells as well. ...
I am utilizing a library named Sidr to generate sidebars. I have included all the necessary jQuery and CSS, and while it is operational, I find that I need to double click instead of just one click to open the sidebar. Here is the code snippet. I essentia ...
I am trying to create a toggle menu using jQuery on this particular page: . The menu is located in the top right corner and I want it to appear when someone clicks on the "Menu ☰" button, and then disappear when clicked again (similar to this website: ). ...
I need assistance with modifying a form that contains two buttons and several text inputs. Currently, if the enter key is pressed, it triggers a click event on the first button. However, I want to modify this behavior so that if any of the text boxes are f ...
I've been working hard to implement the tips from a tutorial on keeping the footer at the bottom of the page, especially when there isn't much content. The link to the tutorial can be found here: Despite following all the guidelines and properti ...
Below is the HTML code for a Bootstrap Modal dialog box: <div class="modal fade" id="rebateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> ...
My validation for a textbox only accepts two digits, such as 11 or 12. However, it does not accept the digit 10. Check out my code snippet: <td width="60" height="20" class="case_txt" align="center"> <input type="text" onblur="CheckUnitValue ...
I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...
I am facing an issue with my bootstrap modal that contains multiple dropdowns. To accommodate the content, I have set overflow: auto to enable a scroll bar on the right side of the modal. The problem arises when I click on a dropdown - it opens under the ...
I am having trouble getting my alert to display when the form is not validating. It should show an alert message if the form is valid but it's not working as expected. I've spent hours trying to fix this issue with no luck. I appreciate any help ...
I'm currently facing an issue with my code. It seems to be functioning correctly, but only for the first iteration. Let me explain further. If I select a date and time that is already in the database, it correctly displays "date unavailable". Likewis ...
My floating list menu is behaving oddly in Firefox. It only displays correctly after clearing the cache, but as soon as I refresh the page, the menu breaks again. The links inside the list elements appear wider than the text, even though I haven't se ...
Within my JSP file, I have implemented an HTML form that utilizes the GET method to send data to my servlet. <form method="GET"> <input name="cmd" type="hidden" value="firstValue"/> ..... </form> Upon triggering another form ...
My goal is to manipulate the height of the div #target when a specific event is triggered, either by reducing/increasing its height from the top or by hiding/showing its content. However, I'm struggling to find a solution to achieve this. The current ...
I am looking to experiment with importing all weights and styles of a Google font, such as Roboto or Roboto Slab, in a CSS file. Is there a more efficient way to do this rather than listing out each individual style in the @import? ...
Seeking assistance with a Java compiler app I am developing through phonegap. Need help setting the default Java Class name in a textarea without it disappearing. This is what I have: <div> <label for="source">Source Code:</label> ...