The proper rendering of <UL> inside <span> within <div> is not occurring as expected

Below is a div element:

<DIV id=footerTop style="height:15%">    
        <DIV id=footerBottom>
            <DIV id=footerBottomLeft>
                    <DIV id=footerBottomRight>
                        <IMG alt=img src="images/images.jpg">
                    </DIV>
                    <SPAN>
                        <UL><%= new java.text.SimpleDateFormat("yyyy").format(new java.util.Date()) %>blah blah!</UL>                                                       

                    </SPAN>
            </DIV>
        </DIV>
    </DIV>

The span element is not being rendered properly in Chrome and Firefox, but works fine in Internet Explorer. In Chrome or Firefox it's printed without any space.

In the code above, the div containing the span has the following CSS settings that work in IE but not in Chrome:

#footerBottomLeft {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #FFFFFF; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: top; WIDTH: 100%; PADDING-TOP: 0px; HEIGHT: 100%; TEXT-ALIGN: left
}

Where text-align is set to left with some space in IE, but no space at all in Chrome.

csshtmljspdom

Answer №1

Below is my recommended solution for resolving the issue at hand:

Style adjustments:

<style>
#footerBottomLeft {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #FFFFFF; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: top; WIDTH: 100%; PADDING-TOP: 0px; HEIGHT: 100%; TEXT-ALIGN: left;
}
p {
text-align:center;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
}
</style>

The HTML structure:

<DIV id=footerTop style="height:15%">    
        <DIV id=footerBottom>
            <DIV id=footerBottomLeft>
                    <DIV id=footerBottomRight>
                        <IMG alt=img src="images/images.jpg">
                    </DIV>
                    <div>
                        <p ><%= new java.text.SimpleDateFormat("yyyy").format(new java.util.Date()) %>blah blah!</p>                                                       

                    </div>
            </DIV>
        </DIV>
    </DIV>

By using a combination of <div> and styled <p> elements, the content is centered on the page and looks consistent across Google Chrome and MSIE browsers.

Answer №2

As per the guidelines outlined by W3C in the HTML structure:

Typically, inline elements are limited to containing only text and other inline elements.

Since UL is not considered an inline element, the inline element SPAN cannot serve as its container. Additionally, UL is designed to only house LI elements.

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

A guide to dynamically adjusting the overflow property for the body element within an AngularJS application

I am facing a challenge in my AngularJS application where I need to dynamically control the overflow on the body element. Specifically, when a side nav is opened, I want to disable scrolling on the body. Below is a snippet of my code and I would appreciate ...

javascripthtmlcssangularjs

Using jQuery to smoothly scroll to the exact center of the element

Currently, I'm developing a jQuery function that scrolls to a specific div when clicked. At the moment, it automatically scrolls to the top of the div. I'm curious if there's a method to make it scroll to the center of $('.scrollit&apos ...

jqueryhtmlscroll

Evaluating CSS Specificity

Is there a recommended approach for automatically testing css selectors? I am in the process of developing a SCSS framework and I want to integrate automated tests. Specifically, I aim to verify that the css selectors are functioning correctly. For examp ...

cssunit-testingseleniumtestingcss-selectors

What is the best way to align the content of a <ul> in the center while keeping the text left-aligned and setting a max-width

UPDATE: Including an image for better visualization: [![Check out the image link][1]][1] To understand more clearly, refer to this fiddle: https://jsfiddle.net/c7jazc9z/2/ Currently, I have a list with items aligned to the left. The goal is to center th ...

htmlcss

Issues with arranging DIV elements using CSS

I have organized a few DIVs within a parent DIV. I am trying to make them align horizontally, but despite my efforts, they remain stacked vertically. Here is the code snippet: <style> #entrycontainer { height: 100px; width: 500px; } #entry ...

csshtml

Aligning the toggle menu in the center when it is collapsed

Hello everyone, I am new to Bootstrap 4 and struggling to figure out how to center the toggle menu on mobile devices. Can anyone provide some guidance or solutions on how to achieve this? Here's an example of what I'm aiming for. <body> ...

csstwitter-bootstrapbootstrap-4

Retrieve the hidden input values from a div using jQuery

Currently, I am in the midst of a project using CakePHP with jQuery and AJAX. Within this project, I have a div that is being repeated in a PHP loop. Here is what the div looks like: <div class="heart"> <input type="hidden" i ...

jqueryhtml

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

javascriptjqueryhtmlajaxdhtml

Django and facial hair (relying on laravel's index)

Previously, I developed some Laravel sites using technologies like SASS, jQuery, and Angular. Now, I am attempting to utilize these sites in Django, but I have encountered errors right from the start. 2 <html lang="PL"> 3 <head> 4 &l ...

jqueryhtmldjangolaravel

Using ArrayBuffer Images in Angular can cause a decrease in the application's speed

When I load an image through an arrayBuffer from a REST service, it slows down the application display. Is there a more efficient way to handle this? Here is the HTML code snippet: <img (click)="previewPlaneringskarta()" class="planering ...

htmlangulartypescriptrestarraybuffer

Is it possible to insert an image as the background of a specific word within a paragraph?

I am looking to enhance certain words in a paragraph by adding a brushstroke image in the background, similar to this example: https://i.sstatic.net/KzjGn.png. I attempted to use a simple background for a span, but the image exceeded the padding and was cu ...

cssimagetexthighlight

Struggling to align text to the far left within a text area using Bootstrap

When I accidentally place my cursor earlier in the text area, it starts writing from that point, leaving some unwanted spaces at the beginning. I prefer it to start from the extreme left, similar to how it behaves in input boxes. Below is the code snippet ...

htmlcsstwitter-bootstraptextarea

I am curious as to why the Bootstrap 4 dropright selected menu appears as a default browser button in Chrome, while it functions seamlessly in Firefox

An issue has been identified that is specific to Chrome. The dropright selected menu appears differently in Chrome compared to Firefox, where it displays correctly with a white background. !https://i.sstatic.net/BulRA.jpg The Bootstrap version being used ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Ensure that the Div element remains visible on the screen while contained within a

Is there a way to maintain the position of elements on the right side of a div without using position: fixed, while still keeping the div within its parent container? See the desired layout. I need the "Stays in view" element to stay within its parent div ...

htmlcss

Tips for adding jQuery UI styling to elements generated dynamically

I have a challenge with generating text fields using jquery while applying jquery ui styling to the form. The issue is that the dynamically created elements do not inherit the css styles from jquery ui: let index = 0; $('#btn_generate').on(& ...

jquerycssjquery-ui

Prevent certain parts of an element from displaying using CSS

By utilizing the CSS3 property clip-path, I am able to easily clip elements so that only a specified area remains visible. While this feature is useful, I'm wondering if there is a method to exclude an area so that everything except the specified path ...

htmlcss

Discovering the offset location using touchmove

Struggling with a code for dragging/moving an element via touchscreen. The code is functional, but encounters a common issue - unable to drag from the touchpoint itself. Every movement initiates from the edge of the element, no matter where the touch begin ...

javascriptcssoffsettouchmove

Accessing data attributes using jQuery and the class selector

I'm looking for a way to trigger an onClick event for an entire class of elements and access their individual data attributes within the function. Typically, I would use the following method: $(".classy").click(function(){ console.log("Replace th ...

javascriptjquerydomonclickclick

The functionality of the jQuery click event is not functioning properly

I encountered a strange issue where the code below works perfectly fine when directly pasted into the browser (chrome console). However, it does not work when executed from my source file. <script type="text/javascript" > $(".test").click( ...

javascriptjqueryhtmlcss

Firefox is blazing its own trail by rising to the top while other browsers are

Have you ever noticed that when an image becomes too large, Firefox pushes them up while other browsers push them down (which is what I prefer)? The first scenario demonstrates how Firefox handles it, the second scenario shows how other browsers handle it ...

htmlcssfirefox