When you utilize the overflow:hidden property in an inline-block list, you may notice some

Referring to this example: http://jsfiddle.net/CZk8L/4/

I'm puzzled by why the CSS style overflow:hidden is creating extra space at the bottom of the first li. Can anyone shed some light on this?

This has been bothering me for hours, as I need the 

position:relative; overflow:hidden
on the first li to hide and move a form inside it (following the cursor).

I've tried setting height or max-height on each element, as well as experimenting with line-height, but nothing seems to work.

One potential solution could be adding the same 

position:relative; overflow:hidden
to the second li to realign both elements. However, there still remains extra space beneath them, and I'd like to understand the underlying cause.

Thank you in advance for your assistance!

htmlcss-positionspacecss

Answer №1

To eliminate the space under li, adjust ul padding:5px to padding:0px.

 ul {display: inline-block; background:#DDD; padding:0px;white-space: nowrap; margin:50px 200px;}

You can position the li elements using vertical-align: top;

   .with_overflow li:first-child {position: relative; overflow: hidden;vertical-align: top; }
    .with_overflow form {position: absolute; opacity: 0;}
    .with_overflow iframe {display:none}

Check out the updated fiddle here

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

What is the best way to utilize jQuery for deleting the final <li> within a <ul> element?

One of my web pages contains an unorganized list similar to this: <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> How can I target the last ...

jqueryhtml

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...

htmlcsspseudo-element

Is the H1 tag styled differently when located within an article element? Additionally, what is the best way to style multiple paragraphs within a

What is the best and most effective way to style multiple paragraphs within a div or semantic tag, each with different styles? Also, I have noticed that when I include an h1 tag inside the article, it does not display at the expected size. Does anyone know ...

htmlcsscss-selectors

Enhancing Time Precision in CakePHP: Introducing Quarter-Accurate Time Input

I'm currently implementing time inputs using the following code snippet: $form->input("time") However, the select boxes generated have minute-accuracy, which is unnecessary for my project. Is there a way to restrict the options in the select lis ...

htmlformscakephptime

Styling elements using flexbox and various other divs

Looking to style a webpage with CSS to achieve this particular layout: https://i.sstatic.net/K3x0A.png The objective is to make the page responsive where the red and blue columns (left and right) have fixed widths. The center column should be collapsible ...

htmlcssflexboxresponsive-design

Having issues extracting information from easports.com due to difficulties with the <ea-elements-loader> element

Recently, I've been developing a Python WebScraper to extract data (such as wins and losses) from our FIFA ProClub by crawling various websites. While I successfully implemented it on a third-party website using BeautifulSoup and requests, I encounter ...

javascriptpythonhtmlseleniumweb-scraping

Implement feature to enable selection using jQuery

I have a question about implementing an <option value="fiat">Fiat</option>"> element into a dropdown list using jQuery. I've tried the code below and encountered some issues. When I click the button, I want to add the <option value= ...

javascriptjqueryhtml

Issue with PHP redirection not functioning as expected upon submission

Thank you for taking the time to offer assistance. I am encountering an issue with a basic HTML contact form that utilizes a PHP file for processing. The form's method is set to post and it directs its action to a PHP file. Upon completion of the PHP ...

phphtmlformshttp-redirect

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

Is there a way to automatically clear all typed characters in form fields when switching between radio buttons with the same ngModel on different pages? I noticed that the characters I type in one field are retained when I switch to another radio button. ...

htmlangulartypescript

Blazor Shared CSS File

Currently, I have successfully implemented 2 pages in my Blazor app: Login.razor located in the Auth folder AddPerson.razor situated in the Profile directory At this point, I have managed to integrate a CSS file specifically for the AddPerson.razor page ...

c#cssblazor

The CSS :lang() selector targets elements within documents that do not specify a particular language

Can elements that do not have a language set or inherited, meaning they are in an unspecified ("unknown") language, be targeted? Facts The language of an HTML document or element can be specified using the HTML lang attribute, for example: <html lang=& ...

css

Show a plethora of images using the express framework

I have two closely related questions that I am hoping to ask together. Is there a way for express (such as nodejs express) to handle all requests in the same manner, similar to how http treats requests with code like this: pathname = url.parse(request.url ...

javascripthtmlnode.jshttpexpress

Create a centrally located search bar in the header with a stylish button using Bootstrap 5

Struggling with aligning elements on my simple search page. The goal is to center the company name above the search input and have buttons centered under it with some spacing in between. https://i.stack.imgur.com/FdadF.png <div class="backgroundWh ...

htmlcssbootstrap-5

Can <option> tags be arranged side by side using CSS?

Here is a form I am working with: <form action="file.php" method="GET"> <input type="hidden" name="page"> <select> <option>Text 1</option> <option>Text 2</option> <option>Text 3 ...

htmlcsshtml-select

jQuery's z-index feature is malfunctioning

When I hover over my menu, a box fades in. However, there is a small icon behind this box that I want to move to the front so it can be visible during hover. To see an example of my menu, click here: Navigation I attempted to address this by using jQuer ...

javascriptjqueryhtmlz-index

What is the best way to transition an absolute positioned element from right to center?

When hovering over an overlay element, I want the <h3> tag to appear with a transition effect from right to center, similar to the example shown here. Could someone please assist me in achieving this? Thank you in advance. HTML <div class="row m ...

javascriptjquerycss

Adjusting canvas dimensions for angular chart.js: A quick guide

I am currently creating my first sample code using angular chart.js, but I am facing an issue with changing the custom height and width of my canvas. How can I adjust the height and width accordingly? CODE: CSS #myChart{ width:500px; he ...

javascripthtmlcssangularjscanvas

Parse and style particular text within a DIV element

A unique text inside a div: Welcome to the world of coding. This is where creativity meets logic. Lines of code come together beautifully. Creating amazing projects is our goal. Mission: I aim to develop a script that will: Turn all instances of " ...

jquerycsshtml

Styling with CSS: How to Adjust Word Wrap in a Container that Resizes Dynam

I'm struggling to ensure that long lines of text break and wrap correctly within a chat feature I am developing. The crucial elements in question are .chat__messages__item and .chat__messages__body (these are all contained within a parent element set ...

css

Darkening effect observed in iOS Safari when applying CSS gradient on a background with similar color tone

I am facing an issue with the gradient overlay on my blue box. I want the overlay to fade from transparent to blue at the bottom of the box, creating a smooth transition for overflowing text. This is how it is supposed to appear (and does on most browsers ...

ioscsssafarigradient