I am currently working on a basic horizontal menu. I have noticed that when I hover over an item, the background color changes but there seems to be a strange 3px space on the left side of the link. I have been trying to figure out why this is happening and how I can remove it.
You can view the menu here: (Links, Posts, Forums, Add)
Any suggestions or insights on what might be causing this issue?
The reason for this issue is that you have set the list to display horizontally using display: inline-block;. The white spaces in your HTML markup, most likely caused by line breaks after the li-tags, are what is being rendered.
To prevent this from happening, remove the white space and line breaks between the li-tags in your html code:
<ul id="main-menu" class="horizontal-list fleft">
<li><a href="#">Linki</a></li><li><a href="#">Posty</a></li><li><a href="#">Forum</a></li><li><a href="#">Dodaj</a><li>
</ul>
@cimmanon shared a useful article by Chris Coyier on how to display list navigations horizontally: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Ensure that your LI-Elements are properly aligned without any unnecessary whitespaces. One way to achieve this is by utilizing the CSS property:
float: left;
This will resolve the issue, but don't forget to add clear: both; after your UL element.
It seems like your links are inline blocks, causing the HTML whitespace to take up space ;) One solution could be to set the font size to 0 on the ul element and then reset it for the li elements.
In this instance, you can try:
.horizontal-list {
font-size: 0;
}
.horizontal-list li{
font-size: 17px;
}
I have developed a unique business tool using html canvas. It is equipped with a variety of draggable and droppable elements. I personally created the functionality with the following pseudocode: if(mouseIsDown && mouseInBoundsOfIcon){ icon.g ...
In the project run with http-server and node.js, the angular controller is unable to connect with index.html. classifieds.js (function() { "use strict"; angular .module("ngClassifieds") .controller("ClassifiedsCtrl", ['$scope', ...
Upon taking over a project, I found myself working with material ui for the first time. Here is an excerpt from my code: <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > ...
I've got an HTML snippet that looks like this: var useful, cool, funny; '<ul data-component-bound="true" class="voteset'+data[i]['review_id']+'">'+ '<li class="useful ufc-btn" id="1">'+ & ...
I'm having trouble using fancybox on an element with this code: $(this).parent().parent().parent().find('.comments').fancybox(); Is it not feasible? Could it be because it's a class and not an id? I have multiple rows of items, so as ...
I am looking to create a button that will open a modal window displaying a message. However, when I tried to add a label and viewed the page, the desired window appeared on top of the rest of the content. But unfortunately, clicking the button did not prod ...
After some experimentation, I've managed to wrap an element inside a div using jQuery. My next challenge is to wrap it as you scroll down and unwrap it as you scroll up. Do you think this is achievable? Although I have succeeded in wrapping it while ...
Can someone help me with styling my Kendo grid to match the look of a basic HTML table? I want to use the table style I already have set up instead of the default Kendo style. Is there a way to achieve this? #resultTable th { cursor:pointer; } #result ...
Struggling to integrate the express-validator with angularjs and html in order to show validation errors, but encountering difficulties accessing the errors variable. Check out the code snippet below. routes.js router.post('/register', functio ...
Recently updated the outer html and encountered a new error. It appears that the element was identified but failed to be clicked on. My script fails at the element below. I have attempted various methods to reconstruct the xpath, but the robot continues t ...
I have a JSON variable that holds attributes in a specific structure: // This json variable defines the attributes for elements to be created let myElements = [ { attr1: "myAttr1", attr2: "myAttr2", }, { ...
Here is the HTML code I am working with: <td class="gnb_menu" id="MAIN_04" name="MAIN_04" style="width:100px;text-align:center;"> <span style="cursor:pointer;" onclick="javascript:movePage('MAIN_04','/basis/menuServlet.do?m ...
Just starting out with AngularJS and eager to get the best approach to tackle this challenge. Describing my dilemma: I have an anchor element that, when clicked, needs to toggle between classes "show-all" and "hide-all" while also updating the styling of ...
My JavaScript function is designed to apply a style.right property to an element based on the media width. There are three different styles that can be applied: listElements[i].style.right = "calc(425 * " + portfolioScrollPosition + "px)&quo ...
Check out my code snippet here: http://pastebin.com/pDkM4FQi #img1, #img2, #img3, #img4 { display: inline-block; height: 100%; } #navBar { background-color: white; border: 1px solid white; border-radius: 15px; display: inline-block; height ...
I am working on a website that I want to adjust to the width of different browsers. Everything seems to be functioning properly, except for the fact that the parent div containing the 100% width divs always appears around 5 pixels too tall. This is causin ...
To convert an HTML file to a PDF, I use The process involves using the following code: <script type="text/javascript" src="http://www.pdfmyform.com/js/pdfmyform.js"></script> <a onclick="pdfmyform(this);" href="#">PDF this page!</a& ...
When I navigate to my new profile tab, I encounter an issue where I cannot switch to other tabs by clicking on them. Below is the code snippet that I am using. Navigating from the Dashboard tab to the New Profile tab works fine, but the reverse direction d ...
I implemented an image viewer component with interactive buttons for rotating, zooming in, and zooming out. Upon clicking a button, CSS transform is applied to the image. However, I encountered an issue where, when zooming the image, it cannot be scrolled ...
I need assistance with a unique jQuery script for the desired functionality: While inputting text into the text field, I would like the adjacent 'Load' text to be displayed. If typing stops, the 'Load' text should change to 'Del& ...