What could be causing issues with my CSS/HTML on Internet Explorer, including version 9?

Utilizing modernizer and html5boilerplate's CSS, I have encountered challenges in designing and debugging for Internet Explorer. It seems that my reliance on FireBug has hindered my progress. Can someone please review my work-in-progress at and provide feedback?

The layout appears distorted in IE (even version 9)

https://i.stack.imgur.com/jKkO2.jpg

This is how it should be displayed in Firefox/Chrome

https://i.stack.imgur.com/zFX8j.jpg

Answer №1

An interesting tidbit: To ensure proper styling in Internet Explorer, it's important to place the modernizr script inside the head tag. Many websites have already adopted this practice while declaring their pages as HTML5.

Answer №2

Internet Explorer does not have the capability to support selectors like: a:link::before (which you are utilizing in your menus).

Furthermore, <section>, <article>? We're talking HTML5 here. Internet Explorer is not going to be able to handle this at all (maybe version 9 down the line, but definitely not versions 6, 7, or 8 unless they incorporate chromeframe!)

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

The use of e.preventDefault in Ajax/jQuery is stopping the page from refreshing and preventing the form

Currently, I am experimenting with using ajax/jQuery/php/html to submit my form without reloading the page. If I include e.preventDefault(), the page remains static and the form does not get submitted. When I remove e.preventDefault(), the form gets submi ...

Display overlay objects specifically focused around the mouse cursor, regardless of its position on the screen

I am currently working on a project using SVG files and processing.js to develop a unique homepage that incorporates both animation and static elements. The concept is to maintain the overall structure of the original homepage but with varying colors, esse ...

What is the best way to retrieve the color of a WebElement when dealing with a complex CSS structure in Webdriver

I am currently trying to determine if the color of a specific page changes immediately after clicking on a button designed to alter the color of an element within that page. My goal is to extract the RGB value stated as rgb(183,168,168); in this particul ...

The CSS slideshow is malfunctioning when displaying images retrieved from the database

I received a complimentary website layout to enhance my PHP skills. The website originally had slides on the index page, sourced directly from my computer when it was in index.html. However, now I have modified it to retrieve images from a database. Instea ...

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

Stop cascading styles when using nested rules in LESS to prevent unintended style application

In the process of developing a sophisticated front-end system using plugins, we are exploring different methods for composing CSS rules. Currently, we are considering two main approaches: Including parents in the class name Nesting parents in the selecto ...

Mapping memory for FirefoxOS is like equivalent strides

Is there a way to create a memory mapped file in FirefoxOS, Tizen or other pure-JS mobile solutions? In the scenario of a mobile browser where you have large amounts of data that can't fit in RAM or you prefer not to load it all at once to conserve R ...

Should the <head> tag in an HTML document contain a substantial amount of content?

Is there a difference in performance if we have a large amount of content in our HTML document? I believe it shouldn't make much of a difference, right? My plan is to load all text content on a single page and then use JavaScript to display the relev ...

Executing a YUI function via HTMLJSGlobal called is feasible

Recently, I stumbled upon the Dial example on the official YUI website and was thoroughly impressed. I managed to get the function working perfectly in a JS file, but now I am facing issues trying to call it within the HTML page with specific parameters su ...

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Hey there! I've been exploring this tool to customize the default scroll-bar, and here's a fiddle showcasing my experimentation. In the fiddle, I've included the following code snippet <div class="scroll-pane horizontal-only">(located ...

The HTML function transforms blank spaces into the symbol "+"

Just starting out with a question: I created a basic submission form, but I noticed that if there are any spaces in the inputs, the values get changed to a plus sign (+). Here's my form: <form name="input" action="search" method="get"> Web Ad ...

Tips for accessing values from a bs4 result set in Beautiful Soup?

Is there a way to extract all the title values from this bs4 result set? [<span class="zaman" title="16.3.2022 15:22:44">1 hf.</span>, <span class="hide zaman pull-right ml-5 mt--1">( Message Deleted )</sp ...

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

Ways to eliminate unused classes from JQuery UI

We have successfully implemented JQuery UI library for enhancing our interface. However, since we no longer need to support outdated browsers like IE6, classes such as .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl are unnecessary and clu ...

Placing a materialUI circular progress bar on top of the circular icon

I'm striving to add a circular progress bar that surrounds a circular icon with a visible space between the two elements, just as depicted in the image below. Although I successfully positioned the circular progress bar around the icon, creating adequ ...

Enhance your website with Jquery-powered page transitions that can easily be linked for a

I have a client who has a specific vision for their website. To demonstrate the concept, I've created a demo which can be viewed here: She requested page transitions similar to those in the demo for the main content. I used jQuery to implement this ...

Mandatory tick box needed for submitting PHP form

Although the topic of PHP form validation is frequently discussed, I am a complete beginner in PHP and I am currently experimenting with a PHP form script that I discovered here. As a result, I am unsure about how to proceed with incorporating two specific ...

Retrieve the child element index of a specific element using jQuery

I am dealing with a group of 'DIV' elements, each containing a list of 'p' elements. Take a look at the example below: <div class="container"> <p>This is content 1</p> <p>This is content 2</p> ...

To make the down arrow image scroll to the end of the page after the 2nd click, simply follow these steps. Initially, the first click

After setting up the image icon and utilizing Javascript and jQuery, I encountered an issue with the down arrow functionality. The first click successfully takes me to the second row grid box downwards, but I am struggling to implement a second click actio ...

The Gusser Game does not refresh the page upon reaching Game Over

Hi there, I am a beginner in the world of JavaScript and currently working on developing a small guessing game app. However, I have encountered an issue where the page is not reloading after the game is over and the 'Play Again' button appears to ...