Centering a floating div in IE causes issues

Suppose I have the following HTML:


    <div id="submitPage" align="center">
        <div id="middlecontainer">
            <p align="center" id="loading-image">&nbsp;<img src="/cso/images/loading.gif" border="0"> <font color="red">Submitting order...</font></p>
        </div>
    </div>

I am attempting to float the submitPage div at the center of the page. I have applied the following CSS, which works fine in Mozilla but for some reason does not work in IE-8:


#submitPage {
    border: 1px solid black;
    width: 746px;
    height: 201px;
    background: aqua; 
    text-align: center;
    z-index: 99;
    position: fixed;
    display: block;
    margin: 90px auto;
}
#middlecontainer{
    text-align: center;
    width: 91px;
    margin: 0 327px;
}
#loading-image {
    position: absolute;
    top: 74px;
    left: 299px;
    z-index: 100;
}

Please inform me if there is anything wrong that I am doing or if there is something missing that needs to be added for IE compatibility. Any assistance using JQuery would also be appreciated.

Mozilla Screenshot

Thank you!

jquerycsshtmlalignment

Answer №1

My apologies, but I must say... what a chaotic situation. The mishmash of HTML attributes and CSS, the excessive centering, and those font tags. It's all too much.

It's best to steer clear of centering text within an element that contains block elements, especially because IE tends to mishandle it by applying centering to the block elements as well, not just the text.

In this case, where you only have text and an image in an element, all you really need is the element itself, the image, and the text:

<div  id="submitPage">
  <img src="/cso/images/loading.gif" alt="">Submitting order...
</div>

#submitPage {
  border: 1px solid black;
  width: 746px;
  height: 201px;
  background: #0ff; 
  z-index: 99;
  position: fixed;
  left: 50%;
  top: 90px;
  margin-left: -373px;
  line-height: 201px;
  text-align: center;
  color: #f00;
}
#submitPage img{
  margin-right: 10px;
  border: none;
}

Check out a demo here: http://jsfiddle.net/pkMqM/

Answer №2

Reminder: Don't forget to optimize your CSS, the color:red rule is no longer recommended;

Check out the demo below

http://jsfiddle.net/2GmC4/

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

jquery ajax not ready - responsetext empty - status code 0 - statustext error occurred

I encountered an error message stating: jquery ajax readystate 0 responsetext status 0 statustext error when providing this URL: url(http://www.tutorialspoint.com/prototype/prototype_ajax_response.htm), however, the same code works perfectly fine with thi ...

javascriptjqueryajax

Displaying jQuery elements 3-5 within the divs

Currently, I am working on implementing a tab content pagination feature. The main requirement here is to display and conceal div elements based on the chosen paginate item value. Specifically, I aim to exhibit 3 divs at once within the content section. Us ...

jquerypaginationslicejquery-pagination

Is it important that the end date does not exceed the start date?

In my request, the end date cannot be later than the start date. For example, if the start date is 24/4/2017 and the end date is 23/4/2017, the search function should be disabled for the calendar date 23/4/2017. Only dates from 24/4/2017 onwards should be ...

javascripthtmlangularjs

What could be the reason for my CSS animation with :hover @keyframes not functioning?

As a newcomer, I am struggling to understand why this code isn't functioning correctly. My goal is to create the illusion of a flying bird. This is my HTML: <img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" /> <br> <div c ...

htmlcsscross-browsercss-animations

Adding Tooltips to Your Bootstrap 5 Floating Labels Form: A Step-by-Step Guide

Can you include tooltips or popovers in Bootstrap 5 floating labels text? I've set up a form with floating form fields and I'd like to provide instructions for certain fields using tooltips or popovers. I can make it work with the standard form ...

javascripthtmlformsbootstrap-5

What are the steps for implementing this javascript code in an HTML document?

Recently, I've been seeking advice on how to address the issue of wanting a button click to automatically select the search box on my website. Suggestions have pointed towards using Javascript for this functionality, with the following code recommend ...

javascriptjqueryhtml

The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body. @{ Lay ...

cssasp.net-mvcbootstrap-4

Providing an Object as the Output of an Event Handler, in cases where the data cannot be transformed into another format

My goal is to have the second dropdown menu, labeled Item, dynamically update when a category is selected from the first dropdown menu, labeled Type. If I could access the array I created within the change event, I could easily populate the second dropdow ...

javascriptjqueryhtml

Tips for successfully integrating jQuery UI datepicker in a form loaded through an ajax request

Having a calendar page with links that load forms using ajax into bootstrap popovers for each day. The loaded form includes start and end date fields, to which jQuery binds datepicker as follows: $( ".datepicker" ).datepicker({ changeMonth: true, chan ...

jqueryruby-on-railsajaxtwitter-bootstrapdatepicker

JavaScript time zone error specific to Internet Explorer

In my code, I am attempting to retrieve the timezone name or ID based on the client's local time. When testing with clients from the United States, I correctly receive EDT. However, when trying the same code with clients in the Indian timezone, it ret ...

javascripthtmlinternet-explorerdatetimetimezone

What is the best way to link one element to another element?

Apologies for the mismatched title, but here's my issue: I need to create hidden checkboxes for each Polymer's paper-button div in jsp/style related problems. <%int i; %> <form ACTION="Computation.jsp"> <% for(i=0; i<n; ...

javascriptjqueryhtmljsp

What is the reason behind the lack of style for the pills in Bootstrap 4?

I attempted to create a vertical navbar using Bootstrap 4 pills, but unfortunately, the styles were not appearing as expected. Instead, all the pills appeared as regular links. Pills without any styling: <ul class="nav nav-pills flex-column"> &l ...

cssmenubootstrap-4

Ways to solve the padding issue in Bootstrap 5

I am encountering an issue with setting the padding in my fluid container. The top-down padding is set to 3%, but the left-right padding of 15% is not working as expected. After debugging using Chrome Developer Tools, I noticed that the left-right padding ...

htmlcssbootstrap-5

I encountered an issue with my foreach loop where the checkbox failed to properly send the value

Having an issue with the checkbox not sending the desired value. This is my HTML code for the checkbox. I am using a foreach loop. <form id="signupform" autocomplete="off" method="post" action="inputchecklist.php" class="form_container left_label"> ...

phphtml

Utilizing jQuery UI to dynamically alter CSS classes

I'm currently working on a project and could use some assistance. I have divs that are droppable using jQuery UI. While everything is functioning properly and I can drag and drop, I am looking to modify the opacity of the div I am dragging by changing ...

javascriptjqueryhtmlcssjquery-ui

Tips for properly halting an AJAX request

My challenge is to halt an Ajax request when a user clicks a button. Despite using .abort(), the Ajax request continues to occur every 2 seconds. Essentially, the user waits for a response from the server. If the response is 2, then an Ajax request should ...

javascriptphpjqueryajax

Steps to implementing a function just before a form is submitted

Imagine a scenario where you have the following HTML form: <form action="myurl.com" method="post" id="myForm"> <input type="number" name="number" class="numberInput"> <input type="number" name="number"> <input type="submit ...

javascripthtmlforms

Learn the secret to toggling the visibility of Bootstrap 4 collapse elements with jQuery

I have been attempting to toggle the Bootstrap 4 collapse using a checkbox with jQuery. Here is the code snippet I am using: `<script type="text/javascript"> $('.card-header').click(function() { $(this).find('input[name=&qu ...

jquerybootstrap-4

What are some methods for saving HTML form data locally?

Creating an HTML form and seeking a solution for retaining user data even after closing and reopening the window/tab. Utilizing JavaScript cookies or HTML 5 local storage would require writing code for every input tag, which could be time-consuming especi ...

javascriptphpjqueryhtmlforms

The art of organizing dates and times

Need help with formatting a datetime that is retrieved from the database. The current format is as follows: 2012-06-11 21:39:54 I would like to display it in the format of June 11. Any suggestions on how this can be achieved? Thank you! ...

phpmysqlhtml