Seeking assistance urgently.
Any tips on eliminating the annoying small space that separates my 2 UL LI lists? I have a hunch it might be related to the <dd> tag, but pinpointing the exact issue is proving tricky.
Check out this visual representation of the problem:
https://i.sstatic.net/xQYS7.png
And now take a look at the desired layout:
https://i.sstatic.net/rXqQg.png
Here's the HTML and CSS Markup in question:
<!DOCTYPE html>
<html>
...
To improve the styling of your <dl> element, make sure to add margin: 0:
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select dd,
.select dt,
.select ul {
margin: 0px;
padding: 0px;
}
.select dd {
position: relative;
}
.select a,
.select a:visited {
color: #000;
text-decoration: none;
outline: none;
}
.select dt:hover,
.select dd ul:hover {
border-color: rgb(128, 128, 128);
}
.select dd ul li a:hover {
background-color: rgb(112, 146, 190);
color: #FFF;
}
.select dt {
background: url(arrow.png) no-repeat scroll right center;
display: block;
padding-right: 20px;
border: 1px solid rgb(170, 170, 170);
width: 180px;
overflow: hidden;
}
.select dt span {
cursor: pointer;
display: block;
padding: 4px;
height: 15px;
}
.select dd ul {
background: #fff none repeat scroll 0 0;
border-bottom: 1px solid rgb(170, 170, 170);
border-left: 1px solid rgb(170, 170, 170);
border-right: 1px solid rgb(170, 170, 170);
border-top: 0;
display: none;
left: 0px;
padding: 5px 0px;
position: absolute;
top: -1px;
width: auto;
min-width: 200px;
list-style: none;
}
.select dd ul li a {
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
display: block;
}
.selected {
background: rgb(195, 195, 195);
}
.header-list,
.header-list:hover {
padding-left: 3px;
font-weight: bold;
font-style: italic;
cursor: pointer;
}
dl {
margin: 0;
}<table style="border-collapse: collapse;" cellpadding="0" cellspacing="0">
<tr>
<td>
<dl data-val="multiple" class="select">
<dt><span id="fruits"></span></dt>
<dd>
<ul id="select_fruits">
<li><a data-val="" href="#"> </a>
</li>
<span class="header-list">- Fruits -</span>
<li><a href="#">Apples</a>
</li>
<li><a href="#">Bananas</a>
</li>
<li><a href="#">Oranges</a>
</li>
</ul>
</dd>
</dl>
</td>
</tr>;
<tr>
<td>
<dl class="select">
<dt><span id="vegetables"></span></dt>
<dd>
<ul>
<li><a data-val="" href="#"> </a>
</li>
<li><a href="#">Carrots</a>
</li>
<li><a href="#">Celery</a>
</li>
<li><a href="#">Brocoli</a>
</li>
</ul>
</dd>
</dl>
</td>
</tr>;
</table>It is also important to note that there was an error in your HTML table markup (corrected above).
To style your elements, make sure to utilize the given CSS snippet:
.dropdown {
margin: 0;
padding: 0;
}
I have a Zingchart Area Graph that displays events on a timeline with time on the X-Axis. I want to be able to automatically zoom into a specific timeframe on the graph based on user input from a form. For example, if a user selects a start time of 8 AM an ...
What's the most effective method for emphasizing an error card view in backbone? Initially, I render 10 cards as UI where users input details in each card. Upon clicking submit, I validate all the details by parsing through collection->models. Curr ...
Is there a better way to align button 3 & 4 in a vertical column next to button 1 & 2 without using tables in CSS? See the working example below: https://jsfiddle.net/Jaron787/0te3cs66/1/ Code: HTML <div id="lse" class="display"> <di ...
Currently, I am attempting to retrieve the radio button value in an Angular 2 project. The radio buttons are defined in index.html as: <input type="radio" id="options1" name="function" value="create"> <input type="radio" id="options2" name="func ...
Utilizing Material-UI and JSS for CSS management, I've encountered an issue where styles appear differently in development versus production. The discrepancy stems from the order of rules within the file. For instance, when defining an element like ...
Currently, I have an input box with default text displayed: <input type="text" value="Enter Name"/> My goal is to have the text disappear once the user starts typing and have them input their desired text. I attempted to achieve this using the foll ...
I am having trouble deleting markers from my Google Maps using my code. The markers array seems to be empty even after adding markers. Can anyone help me troubleshoot this? Thank you! When I use console.log(markers.length) in the removeMarkers() function, ...
Is there a way to create a 'save game file' using Jquery or JavaScript? I know you can use HTML's local files in the browser, but I want users to be able to click a 'save' button and choose a location to download their generated ga ...
My Issue : One of my challenges involves a modal form that appears when I click on a submit button. This form allows users to input information and request a demo from an organization. The data entered into the form is then stored in a MySQL database usin ...
As I work on an application for my parents' restaurant, I encounter a situation where clients can access a private area on the website to view their account status post-login. After successfully logging in, I am presented with the private HTML conten ...
Here is an example of a typical Bootstrap Dropdown: <div class="btn-group"> <button type="button" class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default option<span class ...
Encountering a django error "MultiValueDictKeyError at /employeeUpdate/ 'id'" after making changes to the data. Here is the code snippet from my views.py: def employeeUpdate(request): id = request.POST['id'] emp_username = requ ...
I currently have a web application running on my local machine. Within an HTML file, I am referencing a script src as /node_modules/bootstrap/dist/js/bootstrap.js. I have configured a route in my Routes.js file to handle this request and serve the appropri ...
I am facing a small issue and I want to incorporate an animation from: http://codepen.io/chuckeles/pen/mJeaNJ My main query is how can I modify it so that instead of dots, there would be small images? Which part of the code should I edit for this purpose? ...
I'm attempting to create two unique styles for a pair of paragraphs in an xhtml document by utilizing a CSS style sheet. Despite my efforts and extensive search, I have yet to find a clear solution. ...
I have a single AJAX call that requires passing parameters to my function. Below is the AJAX call implementation: $.ajax({ url: 'lib/function.php', data: { action: 'getStoreSupplyItems', id: store_id, ...
My GUI controls have a complex nested structure, and I need to prevent events from propagating up the DOM tree when they are clicked or changed. This functionality must be consistent across all browsers. Currently, I am using some cumbersome JavaScript co ...
I have successfully made the entire DIV clickable, but I am facing an issue with the dropdown menu. Whenever I click on the dropdown button, it not only opens up the dropdown menu but also quickly redirects to 'next.html'. Is there a way to preve ...
I have scoured all the related questions and answers on StackOverflow, but none seem to address my specific issue. Here is the HTML code I am using: <select name="search_month" onclick="javascript: $('#categories').val(null);" id="months"> ...
I have a straightforward directive that renders an element, and this is the template: <div class="nav-item"></div> The .nav-item class looks like this: .nav-item { height: 50; } Here's the directive in action: angular.module('m ...