Issue with aligning a div in IE8 using CSS

Essentially, my layout consists of the following HTML/CSS structure

HTML:

<div id="container">
    <div id="main">
        <h1>TEST</h1>
    </div> 
</div>

CSS:

#cont {
  width: 100%;
  background: #ddd;
}
#main {
  width: 900px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
}

While this setup functions correctly in Firefox, Safari, Chrome, and Opera, Internet Explorer 8 still positions the "main" div to the left.

Does anyone have any insight into what might be causing this problem? Thank you in advance.

htmlcss

Answer №1

To resolve the issue, simply update the css #cont to #container or change the id of the div to cont.

This solution worked perfectly for me on IE8. Check out the code snippet here: http://jsfiddle.net/7K4B2/

Answer №2

Have you set a document type declaration?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Additionally, remove the width: 100% from the first div and ensure that both the body and div have padding: 0 and margin: 0.

Answer №3

For Internet Explorer to function properly, a correct DOC Type is essential!

I personally prefer using the following CSS:

#container{
  padding:10px;
}

and setting the width to 90% instead of 100%.

To adjust margin values, you can either set both top and bottom margins to 0 or

#container{
  margin:20px auto 0;
}

to only change the top-margin.

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

Identify all the CHECKBOX elements that are visible and not concealed

On my page, I have various checkboxes - some with hidden=true and others with hidden=false attributes. Despite trying to use a selector or jQuery to locate checkboxes with the hidden property, I am still facing some challenges. My goal is to differentiate ...

javascripthtmljquerytypescript

Adjust Node visibility as User scrolls to it using CSS

Suppose I have a structure like this: <br><br><br>...Numerous BRs...<br><br><br> <div id="thetarget"></div><div id="show"></div> <br><br><br>...Numerous BRs...<br><br&g ...

javascripthtmlcss

The progress bar is visually enhanced with a border style that doubles as a background color

While experimenting with a jsfiddle to create an animated progress bar, I stumbled upon something peculiar. I had a single CSS rule applied to the progress tag: progress { border:2px solid #ccc; } Prior to adding this CSS rule, the progress bar looke ...

htmlcss

Form that updates the class attribute to 'active'

I have a webpage with 3 list items (<li>) and each has its own onclick() function. One of them is active by default. When a form on the page is submitted, I want it to switch the active class from the default item to one of the other two. How can thi ...

javascriptphpjqueryhtml

The loading of charts and animations is sluggish on mobile devices

My Chart.js chart starts with 0 values and updates upon clicking submit to load data from an external database. While this works efficiently on a computer browser, the load time is significantly longer when accessing the page on a mobile device. It takes a ...

javascriptjqueryhtmlchartschart.js

Transform your CSS styles into Material-UI makestyles

I am looking to implement an IconButton with a website preview feature that appears when the user hovers over the help icon. I came across a similar solution using CSS, but I need to convert it to Material UI. Here is the CSS code that needs to be converte ...

javascriptcssreactjsmaterial-ui

The dropdown menu is extending beyond the edge of the screen

I'm having trouble with my navbar dropdown menu extending off the page to the right. Take a look at the code below: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

htmlcssbootstrap-4

The browser is struggling to interpret the incorrect HTML content

I am looking for a way to create a function that can retrieve account data from my database and organize it in a user-friendly HTML table where users can make selections and modifications. The code I have so far is as follows: $.ajax({ url: "./dat ...

javascripthtmldom

Reposition the origin when scaling SVG

Can anyone assist me in repositioning the smoke group origin to the center so that it scales along with the rocket? I've attempted utilizing the following: transform-origin: center; translate-box: box-fill; but it doesn't seem to resolve the i ...

htmlcsssvgcss-animationssvg-animate

Align navigation bar using Angular Material

Trying to center my navbar has been a struggle for me. I attempted using 'layout-align='space-between center' but it's not taking up 100% width and is acting more like an inline element. I've been following the documentation close ...

cssangularjsflexboxangular-material

Ways to confirm the validation of radio buttons in a form and implement CSS

I am having trouble adding validation to a form with radio buttons displayed as labels. I want to show a red border around the radios/labels or outer div when a radio button hasn't been checked before the user submits the form. I have attempted this ...

javascripthtmljquerycssforms

The exact measurement of width is not specified in the custom element that extends HTMLCanvasElement

I have created a custom element that extends a canvas, but when I try to add it to the DOM, the width appears to be undefined. Here is my code snippet. class Renderer extends HTMLCanvasElement { constructor() { super(); } } customElements.def ...

javascripthtmlcanvascustom-element

Creating a multimedia input field that allows users to input text, images, and gifs similar to the "Create Post" field on social media platforms like Facebook and Twitter is a

Could someone provide guidance on how to create an input field that allows for text, pictures, gifs, attachments, similar to the "Create Post" input field in Facebook, Twitter, or Quora? I would appreciate a plugin recommendation or tips on creating it m ...

javascripthtml

Separate the array list into 3 columns, however, there seems to be a misalignment issue with the HTML

Need help with dividing a list into 3 rows with Lines separating two columns. This is the code I have written: HTML let Arr = [ { num: 'jkjjk' }, { num: 'jkjjk' }, { num: 'jkjjkkj dshdjsh jhsjhsdj' }, { num: 'jkjj ...

javascripthtmlcssreactjs

One way to dynamically change the background image of a DIV in Angular is by accessing the

In the past, I would set the background image of a div by making a get request like this: style="background-image:url('/api/image')" However, now I am looking to do an $http request in Angular. Once I retrieve the image from response.data, I pl ...

javascriptangularjshtml

Randomizing jQuery for duplicated HTML/jQuery elements

I'm facing a challenge with my jQuery and HTML scripts. I have a dropdown menu where a randomly generated number is displayed in the supplies field (voorraad) based on the selected option. However, when I clone this field using the add button, the fun ...

javascriptjqueryhtml

Unable to select div element by clicking on the text

I'm currently working on automating downloads for my employer. I'm using selenium with python and chromedriver. However, I've hit a roadblock when trying to click on a div element as part of a javascript drop down menu. <div class="item ...

pythonhtmlseleniuminnertext

Positioning an item beneath two floating objects

Trying to create a visually interesting element on my website with 2 circles overlapping their parent element and 1 overlapping below. How can I make the third one centered below the first two? I've experimented with float left and right, but not sur ...

htmlcsscenter

I am attempting to design an HTML page to serve as the body of an email. Can anyone advise me on how to effectively pass it into my setBody() function while using yiiMail?

On one of my .php pages, I have the following code snippet: <html> <head></head> <body> Hi <?php echo $user['first_name'].' '.$user['last_name']?>, <br><br> To reset your ...

phphtmlemailyii

"Encountering an issue when linking the file with phpMyAdmin

I've been struggling with this issue for hours now. I'm currently working on a registration form for my website and while coding in PHP, I connected it to MySQL and the Database using this line of code (which happens to be the 6th line): $mysq ...

phphtmlcss