CSS and HTML - Website appears extremely distorted on Internet Explorer

Take a look at this website - . It appears correctly in Firefox, Chrome, and Opera, but it's all messed up in Internet Explorer (8 and 9). What could be causing this issue? (If you select "śląskie" from the list "Wybierz województwo", click "Dalej >>", and then click on the link that appears, you'll see an overlay window)

Several basic CSS commands seem to be malfunctioning, such as:

margin:0 auto;

Answer №1

Starting your document without a Doctype is causing the browser to enter Quirks mode, where it emulates the bugs of outdated browsers.

One such bug in IE is not supporting auto margins for centering, although this was fixed in IE 6.

Make sure to validate your HTML and avoid placing any tags before the Doctype declaration.

Answer №2

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/geo.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Update the code to:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/geo.js"></script>
    ...

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

Choose the checkbox if the tablerow includes specific text

I am working with a table that has two columns. The first column consists of checkboxes and the second column contains attribute names. My goal is to select the checkboxes next to a cell that includes specific text. Below is the structure of my table: &l ...

Creating a JavaScript function to selectively blur elements while leaving one in focus

My goal is to blur all elements on a webpage except for the p#this tag using vanilla JavaScript. I am determined to learn the intricacies of JavaScript, so I'm not looking for solutions involving jQuery or CSS. I came across a potential solution on t ...

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

What is the best way to position a div to float or hover from the bottom after it has been

I am working on creating a menu where clicking it will reveal a submenu at the bottom, but I'm encountering an issue. Currently, in my code, the submenu is appearing from right to left before moving down. Here is my code: <meta name="viewport" co ...

Insert numerous records into a database table using razor CSHTML

I have been attempting to code in VS2012 to enable the input of a username, selection of project checkboxes within a table, and submission. The goal is for each project to be inserted into a database table alongside that username. Despite my efforts, I am ...

What is the process for bringing an array from a .js file into an HTML document?

Exploring the world of JS and HTML, I recently came across an assignment that involved working with a file named stocks.js, which houses an array of stock information: 'use strict'; const stocks = [ { company: 'Splunk', symbol: &ap ...

I'm currently developing a Javascript quiz, but unfortunately, I am not seeing any outcomes. Can someone identify the issues in my code and provide guidance on what steps I should take next?

There are 3 requirements I must meet: The script should show the number of correct answers and the percentage of correctness at the end of the quiz. If all questions are answered correctly, display 'Well Done', or else display 'Try again&ap ...

Table Structure Misalignment Issue

Below is the code used to align contact details: <html> <body> <table width="900" class="contact-details"> <tr> <td><img src="./images/Mobile.png"></td> <td> <p> ...

I'm having trouble using jQuery to access my element

Hi there, I am having trouble accessing my button on the page. When I try to click on it, nothing seems to happen. Can someone please help me out with this issue? $(document).ready(function() { $('#cart_inside').load('php/load_Cart.php&a ...

What is the source of these additional pixels that appear when percentages are used for defining height?

I have been working on implementing a sticky footer that I've successfully used in the past for various websites. You can find the link to the original method here: However, this time I am facing a challenge as I want to make the footer more responsi ...

What is the best way to combine a custom CSS class and a bootstrap class to style an element in next.js?

In the following example, the CSS class is imported and then applied to the element: import customStyles from "./Home.module.css"; <div className={(customStyles.collection, "card")}> Although they work individually, when combined as shown above, t ...

CSS Errors during Wordpress Transfer - Everything else is functioning properly

I am experiencing an unusual issue while trying to transfer my website to a new server with the same domain name but a different host. The website is not loading the layout or CSS properly, causing everything to display vertically instead of in its intende ...

Creating a dynamic calendar text box with JavaScript: a step-by-step guide

I am trying to dynamically add a calendar text box on each click of a link. While I have tested some codes, it seems that the functionality only works for the first declaration and not for subsequent ones. Here's the code snippet I have been working ...

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

I'm having trouble with the Bootstrap navbar. I want to change the color of the active nav-link, but it's not working as expected. I am currently using Bootstrap-5. Below is the CSS code I have: .nav-link { color: #666777; font-weight: 4 ...

Getting data from an HTML file with AJAX

I have a JavaScript application where I am trying to retrieve an HTML file in order to template it. Currently, I am using the following method: var _$e = null; $.ajax({ type: "GET", url: "/static ...

Struggling with Extracting HTML Attribute

I am a beginner in python and facing challenges with scraping HTML code. My objective is to extract the text "Coupon", "Maturity Date", and "Initial Offering Price" along with the text within the float-right class from the provided HTML snippet. This exce ...

Allow children to fit seamlessly in Bootstrap while enabling scrolling for other children

Is there a way to make the height of my container fit the content in the left column, while allowing the right column to scroll if it overflows? Here is an example of what I am working with: <div class="container"> <div class="row"> & ...

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

After collaborating with fellow coders to develop info boxes using HTML, CSS, and JavaScript, I have come across an issue with the hover functionality not working properly in Internet Explorer. Interestingly, everything functions flawlessly on Google Chrom ...

It appears that the anchors and fragment identifiers are not functioning as expected

On my page somepage.html, I have the following markup: <div class='someclass' id='hashtag1'> <h1>somecontent</h1> </div> <div class='someclass' id='hashtag2'> <h1>somecontent& ...

Ways to customize the appearance of a search box

I am looking to revamp the appearance of a search bar that currently looks like this: <div class="searchbase input-group animated trans" id="searchbase"> <input type="text" placeholder="<?php _e(_l('Searching...'));?>" class=" ...