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>
There are several panels stacked below each other. Each panel has a button that, when clicked by the user, should move the panel to the bottom of the stack. For example: If there are 10 panels aligned sequentially and the user wants to remove Panel 2 by ...
Here is an interesting concept: adding a CSS-selector optionally to the existing selector stack within a mixin. This is what I envision: @mixin myMixin(mobileSelector:true) { @if(mobileSelector) { .foo .mobile:before, } .classXY .subclass:before ...
I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React inst ...
I was attempting to create a dynamic animation where multiple texts change color, similar to what you can see on https://vercel.com. I have successfully figured out how to make one text change color using keyframes, but I am struggling to make each text ch ...
Whenever I attempt to connect to send a servage SMTP, it gives me this error message: SMTP connect() failed. I have tried using the following settings: include('res/mailer/class.phpmailer.php'); $mail->SMTPDebug = 2; include('res/mai ...
UPDATE: I am seeking a way to embed an HTML file with JavaScript or jQuery that can directly access the contents of the SD card while being opened in a browser. Currently, I have posted code for accessing it through an activity, but I want to be able to d ...
I'm unsure if this can be achieved. I am aiming to create a header and footer that remain the same while only switching the content pages. The resources I have at my disposal cover HTML, JS, CSS, and JQuery. Below is a simplified version of my curre ...
I'm having trouble centering the contents of a div with my code. The properties I am applying don't seem to work. Any idea why this is happening? <div class='center'> <form (ngSubmit)="loginUser()" style="background: steel ...
I am facing an issue with my React component where multiple onChange functions are not getting fired. After some debugging, I realized that the problem lies with the fieldset element within the form. Removing the fieldset allows all onChange functions to w ...
Hi everyone, I have been trying to extract the value of <li> elements that display images horizontally. Below is the HTML code I am working with: <div id="layoutInnerOptions"> <ul id="navigationItemsContainer" class="layouts_list"> <l ...
I'm trying to adjust the column headers so that I can scroll horizontally while keeping the headers visible. I've attempted the following changes but haven't been successful. In the screenshots provided, you can see that when I scroll up or ...
In the process of developing a Shopping cart website, I encountered an issue regarding allowing users to upload multiple images of a single product. Using jQuery, I successfully cloned the file input section to enable uploading additional images of the sam ...
UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...
I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...
Trying to extract text from a webpage using Python has always been tricky, especially with the surprises lxml tends to throw. Here's what I attempted: >>> import lxml.html >>> import urllib >>> response = urllib.urlopen(&a ...
I'm trying to adjust a popular fluid jQuery script so that it can automatically center a vimeo video vertically, without any black bars. A little horizontal cropping is acceptable. Here is my current code: HTML <div class="container"> < ...
Is there a way to download the exact source code of a webpage? I have tried using the URL method and Jsoup method, but I am not getting the precise data as seen in the actual source code. For example: <input type="image" name="ctl00$dtlAlbums$ct ...
I need help with displaying a background image that is 1920x1170 pixels and has a file size of 183KB. Here is the code I am using: .bground{ height:auto; left:0; position:fixed; top:0; width:100%; } <div class="bgrou ...
On my local webserver, I have a page running off SQLite as its database. Since it is used locally and loads results quickly, displaying all of them on one page isn't a concern. However, I'm facing an issue where the formatting goes awry after 500 ...
I am in the process of developing a browser extension that allows users to save images from web pages into their favorites, similar to Pinterest. The functionality involves clicking on the extension icon which adds a special field to the HTML where users c ...