The border of the CSS Span element does not extend the full height

Looking to add a separator line to my star rating bar, but struggling to make the border-left go full height. Any ideas on what I might be missing?

Check out the JSBIN link for reference: http://jsbin.com/fusor/1/edit

Answer №1

The solution to my problem was realizing that the height property was missing from my .answer container and adjusting it to match the .rating-star element resolved the issue.

Answer №2

To solve the problem, consider setting a specific height for the .answer class.

.answer {
  width: 135px;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0 0 5px rgb(200, 200, 200);
  background: rgb(229, 229, 229);
  margin-left: auto;
  margin-right: auto;
  height: 24px;
}

Answer №3

To make it work, add .rating{display:block}

Take a look at this demo samplesite.com/demo/!X58Uu!qY3r0Mp9aJaaumERicZARsVfj

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AvoidDefault functionality in Safari

I am encountering an issue with a textbox on my webpage. The code for the textbox is as follows: <input type="text" maxlength="5" size="2" value="1" id="paging_textbox"> Interestingly, there is no form tag enclosing this textbox on the page. When ...

Bootstrap 4 - Interactive horizontal timeline for optimal viewing on all devices

I'm working on creating a responsive horizontal timeline using Bootstrap 4 for my timeline and project. The code I've developed so far is working well in terms of being responsive. timeline.html <div className="container timeline-container"& ...

Choosing the relevant kendo row on two different pages

I am facing a situation where I have a Kendo grid displayed on a dashboard page. Whenever a user selects a row in this grid, I need to load the same row in another Kendo grid on a separate ticket page to showcase the details of that particular ticket. The ...

Converting HTML files to PDF documents using dompdf

After downloading dompdf from GitHub and extracting it onto my webserver, I encountered an error (I'm using Windows). I also attempted a solution but it did not resolve the issue. define('DOMPDF_ENABLE_AUTOLOAD', false); <br /&g ...

Enhance your web design with the latest Bootstrap 5.2

I attempted to implement a tooltip using jquery in my jquery datatable, but unfortunately the tooltip is not appearing. Below is the code snippet: render: function (data, type, row, meta) { var total = row.success + row.error; if (row.isConsumed = ...

Assign the filename to the corresponding label upon file upload

I've customized my file uploader input field by hiding it and using a styled label as the clickable element for uploading files. You can check out the implementation on this jsFiddle. To update the label text with the actual filename once a file is s ...

Two CSS files are loaded sequentially

Currently, when my HTML page loads, it first displays the styles from the initial CSS file before switching to the second CSS file. This brief moment where the page appears differently than intended is a bit frustrating. Is there a way to prevent this chan ...

Modify the content of a div by clicking on a word or link using Javascript

I'm attempting to create a clickable word (page 2) that acts as a link to display different div content. When the user selects option 2 and clicks the next button, they should be able to click the "Page 2" text to show the content with id="test1" (Cho ...

Organizing list items into vertical columns

Could you help me with UL/LI syntax and how to create a wrapping list? For example, I would like to display: 1 2 3 4 5 6 As: 1 4 2 5 3 6 Currently, I have a header, content, and footer all set with specified heights. I want the list to wrap when ...

Positioning a Bootstrap popover directly adjacent to the cursor's location (within the clicked element)

I've been struggling to get my bootstrap popover to show up inside the element I'm calling it on, next to my mouse cursor. Despite extensive research in the popper.js documentation and numerous attempts with various parameters, including the &apo ...

working with html data in a bootstrap modal using javascript

Utilizing an id, I pass data to a bootstrap modal and link that id with stored data. $("#fruit").html($(this).data("fruit")); In addition, I am appending data to the bootstrap modal $('#mymodal').find('.modal-body').append('< ...

Tips for pausing keyframes animation on its final animation frame

Is there a way to halt my animation at the 100% keyframe? What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this? <h ...

Troubleshooting issues with browser scrollbars in a Silverlight application (HTML)

I am currently working on a simple silverlight application and I need to incorporate web browser scroll bars into it (scroll bars should not be inside my silverlight app). This is the HTML code I have: <style type="text/css"> html, body { heigh ...

Having trouble with JavaScript not working when clicking an image and toggling a div?

Why isn't the onclick image and toggle div functionality working with JavaScript? I made the change from: <input type="button" id="Showdiv1" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" /> to: <img src="https://d ...

Dynamically apply colors to the pagination arrows to enhance visual appeal

Looking to incorporate the 4 standard arrows for pagination with dynamic coloring. Any advice on how to achieve this? Thanks, Javier ...

Unable to retrieve list using Selenium in C# due to issues with FindElements method

Currently, I am working with C# and NUnit. I have encountered an issue where I need to extract the value from a span element and store it in an ArrayList. This is the code I am using to retrieve the price list: var productprice = driver.FindElements(By. ...

In JavaScript, attempting to trigger a click event on an element with a <ul> and <li id> and <a href>, but only after the <li id> has been selected

Apologies if this question is too basic, I've been struggling with it for some time... I am trying to trigger an <a href> from within a tag. I have found several methods to do so, however... the entire script is contained within a <ul>, ...

Aligning table elements for optimal responsiveness

Need a hand with my HTML email code. I'm struggling to center the "resort boxes" when viewed on smaller screens like phones. Tried everything but can't crack it. Appreciate any help! https://i.sstatic.net/V6Rdr.jpg <html> <head> ...

What is the best way to interact with parent elements inside an iframe?

I'm working on a fresh image uploader where I aim to place the file input in an iframe and display the uploaded images on the parent page. How can I achieve access to the parent elements from within the iframe? Any examples would be greatly appreciate ...

Utilizing a Python script within a Django project

I am a beginner in Django and HTML and I am looking to incorporate the following code into my Django project: import csv with open('FILE.csv', newline='') as csvfile: CSV_DATA = list(csv.reader(csvfile)) df = pd.DataFrame(CSV_DATA ...