I am facing an issue with the padding at the top of my list items. Here is a link to a working Fiddle:
[http://jsfiddle.net/TH3zq/9/][1]
Can anyone suggest a CSS style solution for this problem?
Thanks, John
I am facing an issue with the padding at the top of my list items. Here is a link to a working Fiddle:
[http://jsfiddle.net/TH3zq/9/][1]
Can anyone suggest a CSS style solution for this problem?
Thanks, John
Take a look at this fiddle: http://jsfiddle.net/TH3zq/11/. It appears that there was no padding added in the CSS, instead, there were <br> tags placed inside the <li> elements. I have removed the <br> tags and implemented padding in the CSS to create consistent padding on all sides. Feel free to adjust the padding as needed in the CSS.
HTML
<div id="content">
<ul>
<li id="q1" class="main-group">Some Text Some Text Some Text
<ul class="antworten">
<li class="a1 answer"><label>
<input type="radio" name="q1" />Text A</label></li>
<li class="a2 answer"><label>
<input type="radio" name="q1" />Text B</label></li>
<li class="a3 answer"><label>
<input type="radio" name="q1" />Text C</label></li>
<li class="a4 answer last"><label>
<input type="radio" name="q1" />Text D</label></li>
</ul>
</li>
</ul>
</div>
CSS
#content ul {
list-style: none;
margin:0;
padding:0;
}
#content ul ul {
margin: 0!important;
padding: 10px 0!important;
}
#content ul ul li {
list-style: none;
margin-bottom: 4px!important;
padding: 10px;
}
#content ul ul li.last {
margin-bottom: 0!important;
}
#content .answer {
border: 1px solid #8A9839!important;
}
#content .main-group {
border: 2px #F7AC1B solid;
padding:10px!important;
margin-bottom:10px!important;
}
To eliminate the padding over the radio buttons, simply remove the <br> element inside each <li>.
Make sure to eliminate the page break tag inside your li element following the label tag to resolve the issue at hand.
Make sure to remove the "br" tag inside your li element after the label tag, as shown below:
<li class="a1 answer"><label>
<input type="radio" name="q1" />Text A</label>
</li>
Instead of
<li class="a1 answer"><label><br />
<input type="radio" name="q1" />Text A</label>
</li>
Hello, I am encountering an issue with a dropdown box as shown below: function createDropdown( $name, array $options, $selected=null ) { /*** starting the select element ***/ $dropdown = '<select name="'.$name.'" id="'.$name.'" ...
Currently in search of an alternative to QuickForm. I have encountered performance problems with QF, specifically when dealing with a large number of options in combobox. I prefer something that is more object-oriented like Zend_Form, but without the exc ...
I am struggling to figure out why I cannot highlight the current menu page on a navigation bar (aside from the fact that I am a complete beginner :-) I have tried using a JQuery function that I found online, but none of them seem to work. Here is the funct ...
Currently, I am implementing a posting system where posts can be added using a button. The posts have two additional buttons - one to show/hide content and the other to delete content. I am utilizing jQuery's slideToggle event to toggle the visibility ...
I've been searching all over the place and I just can't seem to find a solution to my specific situation. But here's what I'm dealing with: Instead of using inline HTML onclick, I'm trying to use jQuery click() like this $(docume ...
I have a primary container with the following CSS: .major { width:30%; height:100%; position:absolute; } Now, I want to insert web information at the bottom part which includes: About | Terms | Policies | Contact Us This content will be within the .web ...
Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...
In the process of creating a library database and dealing with a many-to-many relationship between books and writers, I am contemplating how best to design the user interface for managing this information. When editing a book entry, selecting one or more ...
Can someone guide me on how to use CSS class-nesting in Material-UI or JSS in general? I have been attempting the following: card: { cardHeader:{ marginTop:"30px" } } ...
I am experiencing an issue with centering the background image below a link. When using mouseleave, the image does not return exactly to the center of the list. Any assistance on how to resolve this would be greatly appreciated. Thank you! Here is the ref ...
Link to a JSFiddle for reference: http://jsfiddle.net/STmwz/4/ Initially, there is only the top div displayed. Upon clicking the edit button, the JavaScript code replaces the top div with the bottom div. However, during this transition, there is a slight ...
I am struggling to display products in boxes on my ecommerce website, similar to how they appear on other platforms. Although I am utilizing AngularJS ng-repeat and bootstrap classes, the layout of the products is not coming out as intended. Take a look ...
I am attempting to add an Accordion button to my website using the HTML code provided below. I am currently incorporating this in a very basic manner, without any utilization of javascript code, within this example of accordion snippet. When the button i ...
Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...
Recently, I've been pondering the process of animating an HTML element solely through CSS. Unfortunately, my knowledge on the subject is quite lacking... I attempted to utilize the animate keyword in pursuit of this goal ...
I am currently developing a student attendance management system using the Django framework. The objective is to fetch all the names of the students from the student database and display them in an HTML table. Additionally, I will be updating the informati ...
One common method to access an element is by using its id: <div id="myId"></div> <script type="text/javascript"> $(document).ready(function(){ $('#myId').something(); }); </script> However, there are inst ...
view image description herei need assistance with centering the div over the background image. I attempted to use relative positioning for the container and absolute positioning for the elements, but it did not yield the desired result. The code snippet be ...
Looking to send form data to PHP using jQuery. Check out the code below. -------------HTML FORM-------------- <div id="createQuestionBlock"> <form id="createQuestionForm" action="" method="POST"> Question Code: <input id="code" ...
I have a table with multiple rows, where I have styled each odd row in one shade of gray and the even rows in slightly different shades to make it easier to read. When clicking on a row, I am currently highlighting it with a different color to indicate wh ...