What could be causing my content to disappear behind the header while in compatibility mode?

Is there a solution to prevent content from disappearing behind a fixed header when running a layout in compatibility mode?

To see the issue, visit the jsfiddle here and switch to compatibility mode in Internet Explorer. The layout behaves properly in Chrome and IE9 when not in compatibility mode.

The CSS for the header is as follows:

#headerContainer
{
    position: fixed;    
    top:0px;   
    z-index:999;
    background:green;
    width: 100%;
}

And for the content:

#container{
overflow:hidden;
padding-left:480px; /* The width of the rail */
margin-top: 135px;
background: red;
}

This layout features a fixed-fluid design with a fixed left rail. When scrolling down, the goal is to have the content disappear below the header.

Answer №1

Here's a simple solution for ensuring compatibility with Internet Explorer:

#container{
    overflow:hidden;
    padding-left:480px; /* Adjust based on rail width */
    margin-top: 135px;
    background: red;
    *position:relative;
    *top:135px;
}

To address IE7, I've employed a CSS hack using *. Fiddle: http://jsfiddle.net/keaukraine/phPAN/

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 adjusting an @media css for a material-ui react component

After posting this inquiry about overriding a CSS property in a material-ui component, I received a helpful example. However, I encountered difficulty when attempting to set the height of the Toolbar component due to an overarching @media specification. My ...

The iPad screen displays the image in a rotated position while it remains

Recently, I developed a mini test website that enables users to upload pictures and immediately see them without navigating back to the server. It seemed quite simple at first. $('input').on('change', function () { var file = this. ...

Utilization of Bootstrap's .container class in various scenarios

As I delve into Bootstrap, the usage of the .container class is provoking some confusion. Most tutorials suggest a structure like this: -.container --.row ---.col- ---.col- However, I came across a different approach in a W3schools example: W3Schools - ...

Having trouble viewing the image slider on an HTML webpage

I've been attempting to incorporate an image slider into my personal website on GitHub, but I've encountered some difficulties as the images are not displaying. Interestingly, I can load individual images without using the slider and they show up ...

CSS media query that prioritizes styling for large screens over small screens

I am currently working on making my new website development project mobile responsive, but I am encountering some strange behavior that is quite frustrating. I am hoping someone can help me figure out what mistake I may be making here. Whenever I test the ...

The Selenium chromedriver sometimes fails to recognize specific websites or their components

Having trouble with a Python script designed to interact with a specific website using ChromeDriver. The script is unable to locate any elements or print the page source, as the entire page is nested within multiple frames. Suggestions from others involved ...

When hovering over different <a> tabs, showcase various images in individual <div> sections

Here are the buttons I am working with - <div class="nav nav-tabs " id="nav-tab" role="tablist"> <a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab& ...

Interactive jQuery Dropdown Menu with Multiple Divs

I have been working on this and I'm almost there, but the jQuery part is driving me crazy (I'm not very proficient in it yet, but I am learning). Here's the link to the fiddle: http://jsfiddle.net/5CRA5/4/ Since I can't demonstrate th ...

Jquery function for determining height across multiple browsers

I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...

Validate Email and Phone Number using Javascript

How can I create a Javascript function to validate an HTML form? Currently, my form validation only checks if a field is empty. I want to enhance it to also validate the email format and ensure the phone number is numeric. Currently, the form displays a po ...

Ensuring my form adjusts effortlessly to the sprites

I need assistance in making my contact form responsive to match the eagle sprite on this specific webpage: The goal is to ensure that as the screen size changes, the eagle's mouth aligns perfectly with the form. While the sprites and form are both re ...

Mathjax2 in React is not supported in React v17

After successfully running recat-matcjax2 on react 16, I encountered some issues when updating to react version 17. I am facing two specific errors: These are the error files: https://i.sstatic.net/iy0ZV.png https://i.sstatic.net/trfrL.png Here is my ...

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

Currently working on an HTML5 project with Javascript, here is a snippet of my code: Your inquiry <textarea type="text" name="phrase" id="phrase" cols="50" rows="5" placeholder="Write your text here. . ."></textarea> I am looking for a way ...

"Can the form and action occur on the same page, or should they be

When it comes to form actions, what is more effective: having the action on the same page or a different page? See the sample code below: <form action="act.php"> html code </form> <form action=""> html code </form> < ...

The segmented button's dropdown menu in Bootstrap is malfunctioning on Firefox version 27.0.1

I'm attempting to create a basic search bar using Bootstrap's segmented button feature (check out an example at http://getbootstrap.com/components/#input-groups-buttons-segmented). This is the code I have so far, and it's accessible on jsfi ...

The scroll function is failing to activate at the desired location

I've been trying to fine-tune a window scroll function I created. Initially, I attempted to use waypoints for this, but unfortunately, I couldn't get it to work as expected. The main issue I'm facing is that the function triggers too early ...

What is the origin of the character?

Currently running a string test. When I obtain the innerHTML, there are unexpected u'\n and \n', AssertionError: u'\n<p><strong>The user/password code entered is incorrect!</strong></p>\n' != ...

Embracing Divs Similar to the Grid Selector in Windows Phone

Can someone help me create square divs in HTML 5, similar to the example shown? I have written this HTML5 Code - what should I include in the CSS file to achieve the desired outcome? (If Bootstrap can be used, please provide the necessary classes instead ...

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

Tips for resizing images to fit the parent container dimensions

After uploading an image, I needed to adjust its dimensions. The original image was 450x700, while the parent container was 400x400. Using 'object-fit' helped fit the image to its parent container while maintaining its aspect ratio. However, I r ...