Strange Margins in Internet Explorer – A CSS Mystery

Encountering a strange rendering problem in Internet Explorer with an inline unordered list. Attempting to create a visual representation of a project's lifespan, but every time I insert text into my <p> element meant for holding a time period, it causes the entire <li> element to shift down, exclusively in Internet Explorer.

Please check out this issue here: https://jsfiddle.net/xny1zv3j/

I don't mind if the name and position (e.g., 'John' and 'Project Lead') are pulled down - that's not a concern. However, in IE only, it appears as though the whole list element is being dragged down. When the <p> element is empty, everything works fine and all browsers display correctly. But once content is added, IE goes haywire.

htmlcssinternet-explorer

Answer №1

To achieve the desired layout, consider including vertical-align: top in your styling for the .li class.

Answer №2

Are you aiming for something like this? https://jsfiddle.net/xny1zv3j/3/

HTML

<div class="container body-content">
<div class="container" id="main-container">
        <ul class="timeline">
            <li class="li" >
                <div class="timestamp">
                    <div class="author">John</div>
                    <div class="date">Project Lead</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p></p>
                    </div>
                    <h4>Created Project</h4>
                </div>
            </li>
            <li class="li" >
                <div class="timestamp">
                    <div class="author">Jenny</div>
                    <div class="date">Programmer</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p></p>
                    </div>
                    <h4>Built Project</h4>
                </div>
            </li>
            <li class="li" >
                <div class="timestamp">
                    <div class="author">Jeremy</div>
                    <div class="date">Marketing</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p>2 yrs</p>
                    </div>
                    <h4>Advertised Project</h4>
                </div>
            </li>
            <li class="li" >
                <div class="timestamp">
                    <div class="author">Jack</div>
                    <div class="date">Sales</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p></p>
                    </div>
                    <h4>Sold Project</h4>
                </div>
            </li>
            <li class="li" >
                <div class="timestamp">
                    <div class="author">Jebeddiah</div>
                    <div class="date">IT</div>
                </div>
                <div class="status">
                    <div class="time-period">
                        <p></p>
                    </div>
                    <h4>Defended Project</h4>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

 .timeline {
   text-align: left;
   list-style-type: none;
   display: inline-block;
   margin-bottom:-23px;
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 5px;
   padding-right: 5px;
 }

 .li {
   width: 150px;
   display: inline-block; 
   }

 .timestamp {
   margin-bottom: 20px;
   padding: 0px;
   font-weight: 100;
   display: block;
   white-space: nowrap;
   overflow: hidden;
 }

 .status {
   padding-top: 10px;
   position: relative;
   transition: all 200ms ease-in;
   white-space: normal;

 }
   .status h4 {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     word-wrap: break-word;
     padding-bottom: 3px;
   }
   .time-period {
     display: inline;
     text-align: center; }

     .time-period p {
      /* margin: -30px 0px 20px;*/
     }

     .time-period p:empty {
         display:inline-block;
     }

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

Tips for adjusting font sizes within the same HTML header?

Looking to design an HTML header in the following format: "(10.3.4) Version1: vs (10.3.4) Version2:" Need the version numbers to be smaller than "Version1" and "Version2." Any ideas on how to achieve this? ...

htmlcssfontsfont-size

Learn the steps to update PHP headers on a specific website using AJAX

contactfrm.php <?php // Server side validation $name = $_POST['name']; $surname = $_POST['surname']; $bsubject = $_POST['subject']; $email= $_POST['email']; $message= $_POST['message']; $to = " ...

phphtmlcssajaxforms

Need a stylish Noun Project CSS container?

I've looked everywhere for the link, including scouring through Hacker News where I first saw the project, but haven't had any success. Instead of downloading images from The Noun Project and similar sources, is there a way to simply include a C ...

css

Error: the function is not defined, therefore the variable is being passed

I'm attempting to pass a variable in the URL in order to automatically check a radio button on a different page depending on which link is clicked. However, I keep encountering an "Uncaught ReferenceError: radio_onload is not defined" error. Could th ...

javascripthtmlradio-button

PHP and MySQL-based system for generating automated student identification numbers

Currently, I am working on implementing a new feature within my system that will automatically create Student IDs in the format of YYYY-0000 for students who are newly enrolled. The 'YYYY' part represents the year of enrollment and '0000&apo ...

phphtmlmysql

Update the function to be contained in a distinct JavaScript file - incorporating AJAX, HTML, and MySQL

Currently, I am working on a project and need to showcase a table from MySQL on an HTML page. The JavaScript function in my code is responsible for this task, but due to the Framework 7 requirement, I must separate the function into a different .js file ra ...

javascripthtmlmysqlajax

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

javascriptcsshtmlpdf

Is it possible to switch the button's image when hovering over it?

Hey there! I have an HTML button configured like this: <input type="image" src="derp.png"> Since the image is not assigned via CSS, how can I change it on hover? ...

htmlcssforms

Incorporating personalized CSS styles into a Bootstrap 4 card

I have been scouring through countless questions and solutions on StackOverflow, but nothing seems to be working for me. While p-5 is doing its job just fine for padding, it applies to all devices. I am in need of specific CSS for mobile devices when it co ...

htmlcssdjangobootstrap-4django-staticfiles

Executing a Click Action on div Tags

When using Protractor, I am encountering an error when trying to interact with a div element. The error message states "Element not interactable." This particular div element represents a menu where clicking on one option should trigger another menu to app ...

javascripthtmlseleniumselenium-webdriverprotractor

Using the ngFor directive, parent and child components can establish communication even with empty arrays

I am working on passing data from a parent component to a child component using the ngFor directive. However, I am facing an issue when some arrays have no length, as I need to indicate to the child component that the array is empty. How can I achieve this ...

javascripthtmlangulartypescript

Modifying the appearance of scoped child components in Vue: A step-by-step guide

I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...

cssvue.jscomponentsstylesvantui

When I click the button, the loading.gif fails to appear

I'm having trouble getting my loading screen to display when my button is clicked. The Ajax function works fine, but the loading screen is not showing up. CSS <style> #display_loading{ position: absolute; top: 50%; left: 50%; transform ...

javascriptjqueryhtmlcssajax

Guide on how to retrieve a csv file from the assets folder by clicking on an anchor tag in a React Js application

Attempting to download a CSV file from the project assets folder by clicking an anchor tag is resulting in an error message saying "File wasn't available on site". Various solutions have been tried, but none have been successful. Providing my code sn ...

htmlreactjs

When an input is double-clicked, the message"[object object]" appears on the screen

Here is the structure of the template used for the directive. Our code fetches data from a service which contains all the details of a specific individual. We display only the first name, last name, and either designation or company affiliation from that d ...

htmlangularjscssfirefox

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

htmlcsshtml-table

Maximizing the efficiency of Java Script code

I am struggling with optimizing this JavaScript code that adds and removes classes based on the presence of a specific class in the next rows of a table. Can anyone provide some guidance on how to make this code more efficient? $(".showTR").click(functi ...

javascripthtmlcss

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

javascriptcssreactjsmaterial-ui

When utilizing CSS Animation in Bootstrap 5 collapse, the margin-collapse feature is deactivated, resulting in a choppy animation effect

Unique Example with CSS Snippet Here's a straightforward example along with some CSS: .mynav { margin-top: 36px; } li { margin: 18px 0; } <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email ...

cssbootstrap-5

What is the reason behind the failure of a distinct milestone (such as w-70) to show progress in Bootstrap, unlike w-25, w-50, w-75, and w-100, and what steps can be

As I navigate through Bootstrap using <div>, I aimed to reach a milestone of 70%. However, when I tried setting w-70, the progress bar only displayed around 5%. It seems that this issue persists with values like w-45, w-50, w-75, and w-100 only. Her ...

htmlprogress-barbootstrap-5