The HTML code is compatible with Google Chrome and IE9, but unfortunately does not function properly in

I am having some trouble with the code linked below. It looks great in Google Chrome and IE9, but not so good in IE8. Does anyone have any suggestions on how to make it display properly in IE8? I want to maintain a 3-column layout with a fixed middle column and fluid/liquid/flexible side columns that also fill the vertical space to 100% of the browser window height.

Click here for the code

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>title here</title>
<style type="text/css">

.header {
display: table;
width: 100%;
height:100%;
text-align:center;
}

.header > div {
display: table-cell;
vertical-align:top;
}
.col {
width:20%;
}

#rightcol {
width:10%;
background-image:url('http://quetico.info/images/topo.png');
}
#leftcol {
width:10%;
background-image:url('http://quetico.info/left.jpg');
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
#midcol {
background:#d0eadd;
/*  ffff8b;  */
padding-top:55px;
}
</style>
</head>
<body>
<div class="header container">

<div id="leftcol" title="portage photo by Hans Solo"></div>

<div id="midcol" class="col col-2">

<div id="divLeftInd">some text here</div><!-- ######## end of divLeftInd ##### -->

</div><!-- ####### END OF DIV FOR midcol -->
<div id="rightcol"></div>

</div><!-- ####### END OF DIV FOR header container -->
</body>
</html>

Answer №1

It appears that the background-size property is not compatible with Internet Explorer 8.

Answer №2

Experiment with the sizingMethod attribute within the filter property, as suggested in this response

Answer №3

If I understand correctly what you're aiming for, I believe this solution will be effective.

<html>
    <body style="margin:0px; padding:0px;">
        <div style="height:100%; width:100%; margin:0px; padding:0px; background-color:#333;">
            <div style="width:80%; min-width:960px; margin-left:auto; margin-right:auto; background-color:#fff" height:100%;>
                <p>information goes here</p>
            </div>
        </div>
    </body>
</html>

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 optimizing search functionality in Angular to prevent loading all data at once

An exploration for information within vast datasets is triggered by AngularJS when the input contains more than 3 characters. var app = angular.module('test_table', []); app.controller('main_control',function($scope, $http){ $scope ...

Significant challenges with the CSS grid system

I'm brand new to the world of programming and I'm currently attempting to recreate this webpage layout using HTML & CSS: Click here for desired look. My approach so far has been utilizing CSS grid, and while I grasp the concept, I'm faci ...

Deleting images based on their class through a loop

Currently, I am in the process of constructing a carousel using data retrieved from an endpoint. The challenge I face is determining the appropriate image size to request from the server. To address this, I perform some front-end processing to dynamically ...

Is it possible for a DIV in one bootstrap column to appear on top of the content in another column?

Is there a way to get a div in the first bootstrap column to overflow the x-axis and have its content display above the second column to the right? <div class="row h-100"> <div class="col-3 bg-info"> <div class="LEFT ...

Creating a menu that is even more optimized for mobile devices

I recently came across a mobile menu style that I really like: https://www.w3schools.com/html/default.asp What I appreciate about this style is that even on smaller screens, it still displays some main navigation items. This allows for popular links to be ...

Strange Vertical Offset Issue with Custom Fonts in CSS

I have implemented a custom font in my CSS using the following method: @font-face { font-family: 'Gabriola'; src: url('Gabriola.eot'); src: url('Gabriola.eot?#iefix') format('embedded-opentype'), ...

Element with a fixed position within an iScroll container

Has anyone encountered an issue with fixing an element with position: fixed inside a big Iscroll page? It seems like the element scrolls along with the content due to the transition imposed by Iscroll. I'm trying to fix the "FIXTHIS" element, but it ...

CSS slideshow animation is not functioning properly

Hey there, I'm new around here and I've got a question for you all. Please bear with me if I make any mistakes. So, I'm attempting to create a simple CSS slide image. In my animation code, I want the picture to fade from the left every time ...

Determine total using PHP object

Can anyone assist me with adjusting this code? $aBlockVideos = (array) Advancedvideo_Service_Video::instance()->query("","v.total_comment DESC",1,5); I'm trying to figure out how to display the total number of comments for the current week. Any s ...

Is it feasible to share HTML5 media captures and display them in real-time on another page within the website?

Recently, I just learned about the html5 media capture API and I am excited to start experimenting with it. One thing that caught my attention is capturing the camera on the same page, but I haven't come across any information about streaming through ...

Challenges arise when IE distorts featured images in a Wordpress theme

I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm ...

Ways to update modal content upon clicking a button

I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions ...

I'm encountering difficulties with customizing the root styling of material-ui's DialogActions

Check out the two buttons in a DialogActions just like this. This is the JSX snippet I'm working with: <DialogActions classes={{ root: classes.dialogActionsLeft }}> <Button autoFocus onClick={() => { setOpen(false); }} ...

Customize the X and Y position of the CSS background with specific degrees

Looking for help customizing the background position in a PSD image to adjust the slope at the top, right-left side, and bottom. Here is my PSD: https://i.stack.imgur.com/Jr4h7.png Below is some of my CSS code: html{ background:#aea99f; } body{ backgroun ...

Issue with React Js: Text Sphere not appearing on page reload

Currently immersed in a react.js environment and eager to incorporate this impressive animated text sphere. Utilizing the TagCloud package for rendering assistance, however, encountered an issue where the text sphere would only display once and disappear u ...

An issue arises when attempting to send form information through email using PHP

I'm facing an issue with sending email from a form. Every time I submit the form, I receive an "error occurred" message as specified in my if else statement. This prevents the mail from being sent. Can you help me troubleshoot this problem? Below is t ...

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

Is there a way to choose multiple IDs in this code that all share a common word?

I'm attempting to target several duplicate ids such as "img1, img2" in my code, but I haven't had any success. How can I select all the ids that contain the same word without relying on jQuery or any other external libraries? Below is the code s ...

Changing camera view in Three.js upon clicking an HTML button

My goal is to create a straightforward animation using three.js, HTML, and CSS. The concept involves generating multiple BoxGeometries within a for loop and adjusting the rotation of each box incrementally with each iteration. I have successfully achieved ...

PHP implementation of sorting data

After populating a page with values from the database, I want to enable sorting by clicking on a column to arrange them in either ascending or descending order. What is the best approach to implement this functionality? ...