Repairing a CSS file for Internet Explorer versions 7, 8, and 9

Does anyone have experience with troubleshooting HTML5 CSS3 layouts across different browsers?

I recently created a website layout from scratch that looks perfect in Firefox 5, Safari 5.1 and Chrome 12 on Mac. However, when using tools like Adobe BrowserLab to test it, I noticed some issues such as the footer being misplaced, background repeating incorrectly, and submenus appearing unstyled.

Testing the site on Internet Explorer using browserlab or NetRenderer shows even more significant problems:
• In IE9, the radial background is missing, menus are disorganized, and content layout is completely broken.
• In IE8, sometimes the sidebar list takes up the entire space or displays as a black page.
• In IE7, the main content becomes unreadable among other issues.

I currently use two JavaScripts to address IE compatibility and HTML5 support, but they seem to be conflicting, leading to some pages displaying as blank.

I am concerned about the usability of my site for the 13% of visitors who use Internet Explorer. Any advice or assistance would be greatly appreciated as this issue is delaying the launch of my website.

Link to the problematic site

EDIT1: HTML validated, CSS errors present
EDIT2: Major layout issues resolved, updated link

internet-explorerhtmlcss

Answer №1

It appears that html5shiv may not be functioning properly for you, as mentioned by others. I encountered the same issue with html5shiv before, and I switched to using Modernizr which resolved the problem for me (Modernizr offers similar functionalities along with additional features; refer to their website for more details).

Replacing html5shiv with Modernizr could potentially resolve many of the issues you are facing.

To address concerns like the radial background and border-radius on the tabs, consider utilizing CSS3Pie.

Your usage of transparent in the stylesheets may cause compatibility problems, particularly in IE7 (uncertain about IE8). While there are workarounds available to support such elements in IE, they may not be ideal solutions.

The positioning of your rotated menus is inaccurate due to discrepancies in how IE rotates elements compared to other browsers. In IE, the filter style utilizes a different rotation origin point, rotating around the top-left corner instead of the center point as seen in CSS3-compliant browsers.

An effective solution would be adjusting the CSS3 transform-origin style to align the behavior of CSS3 browsers with IE (although modifying IE's origin point can be cumbersome).

You have CSS selectors like this:

.ul_nav_main li a:not(:last-child):after

Note that this won't function correctly in IE8 due to lack of support for :not and :last-child, while :after isn't supported in IE7. Additionally, complex attribute selectors used won't be compatible with older versions of IE.

This covers most of the issues observed. If problems persist after addressing these points, feel free to ask again with a more specific inquiry for better assistance.

I hope this information proves helpful.

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

"Using HTML to assign a unique identifier to an image within

Apologies in advance for any errors as I am relatively new to html. I am attempting to construct a table with images that have onclick events, so that each clicked seat is tracked and its id is added to a list to change the class. Each image has been give ...

javascripthtmlimage

Change the order of numbering in ordered lists

I am seeking a way to change the ordering of an ordered list to be in descending order. You can view a live example here. Instead of having the counter span multiple ol elements, I would like the counter to reset after each ol. For the live demo, the des ...

javascriptjqueryhtmlcss

Pop-up website opening with fixed dimensions error

On my webpage, I have a terminal where you can type commands and receive output. For example, typing "/unsolvedproblems" displays a list of unsolved problems with a hyperlink. I've been trying to make the hyperlink open in a popup window with a fixed ...

javascripthtmlhyperlinkpopup

Default close x button not functioning to close modal dialog

When I click the [X] button in my modal dialog box, it doesn't close. Here is an example of my code: $('#apply_Compensation_Leave').show(); This is the modal code: <div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="di ...

javascripthtml

The height of the parent div increases as its children grow when the browser is resized

I have a set of three divs aligned horizontally within a parent div. As the browser width changes, one of the child divs wraps under the other two when the width is reduced, transitioning them to a vertical alignment. Here are some visual examples: View i ...

htmlcssheight

Inexperienced with Bootstrap/CSS: Cannot open dropdown by clicking (CDN properly installed)

I am having trouble getting my Bootstrap dropdown to toggle correctly, despite placing the JS script last. I have checked multiple resources and it was suggested that CDN may not have been imported correctly. I have also tested this on different browsers w ...

htmlcssbootstrap-4

Main method is unable to access file path declaration for Method call

I'm currently working on crafting an application aimed at automating form-filling tasks in Java using Selenium. The setup I have permits the entire operation to be portable via a thumb drive. Here's the code snippet: package AutoFill; import ja ...

javainternet-explorerseleniumbrowser-automationselenium-iedriver

Unable to grab hold of specific child element within parent DOM element

Important Note: Due to the complexity of the issue, the code has been abstracted for better readability Consider a parent component structure like this: <child-component></child-component> <button (click)="doSomeClick()"> Do Some Click ...

javascripthtmlangulartypescript

Navigate to a fresh webpage and find the scrollbar sitting at the bottom

When launching a new website using my forum system, I want the scrollbar to automatically be at the bottom so users don't have to scroll down. I'm not experienced in JavaScript and need help creating the code for this feature. ...

javascripthtmlajaxscrollbar

What are the steps to prevent a redirect?

I have two forms with different functionalities - one for submitting/adding and the other for selecting/redirecting. Currently, both forms are redirecting. How can I prevent the top form from redirecting after submission? <?php if($_POST){ / ...

phphtmlhttp-redirectsubmit

Building dynamic charts using JSON data in Oracle JET

I am attempting to populate a pie chart using JSON data retrieved from restcountries.eu/rest/v2/all. I use $.getJSON to fetch the data, create a temporary array as the data source, and then bind it to the pie chart. However, I seem to be encountering an er ...

javascripthtmlknockout.jsoracle-jet

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

phpjavascriptcssperformanceimport

Using the arrow keys to navigate through a list of items without using jQuery

Exploring ways to develop a basic autocomplete feature without relying on third-party dependencies has been my recent project. So far, I have managed to populate a results list using an ajax call and complete fields with mouse onclick events for each optio ...

javascripthtmlcssajaxautocomplete

Determine if the HTML Application Cache is void

Our website uses a "manifest.appcache" file to manage the application cache. Some pages are designed to be accessed offline, so they have references in the html tag to the manifest, while others do not. Is there a way to determine if the cache is empty ac ...

htmlcachingmanifest

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

I currently have two pages within my website, one is called details.page and the other is maps.page. In the details page, I have set up a search input as shown below : <form method="get" id="form-search" data-ajax="true" action="maps.page"> ...

javascriptjqueryhtmlajax

Utilize the v-for second argument in VueJS 2 to showcase the index and index+1

For a VueJS 2 project, I am tasked with enhancing the display of the first and second elements in an array by making them stand out from the rest. To achieve this, I am utilizing the v-for syntax to iterate over a child component within a parent component. ...

javascripthtmlcssvuejs2v-for

- Challenges with internal systems

I have a dialog window where I want to display a confirm dialog when clicking Cancel. To achieve this, I am creating a div element with some text that should be shown in the confirm dialog. However, the issue I'm facing is that the text intended for t ...

javascriptjqueryhtmlcssmodal-dialog

Is there a way to smoothly incorporate a new animation into a page, while ensuring that existing elements adjust to make room for it?

I am looking to smoothly fade and move a hidden element (display:none) within the page, shifting other elements to animate into their new positions as necessary. When I reveal the hidden element by changing it to "display:initial," it should seamlessly a ...

htmlcss

Tips for utilizing navigator.getDisplayMedia with automatic screen selection:

navigator.mediaDevices.getDisplayMedia({ audio: false, video: true }).then(gotMedia).catch(function(e) { console.log('getDisplayMedia() error: ', e); }); Triggering the above code will result in a popup like this. There is anoth ...

javascripthtmlreactjs

What is the best way to retrieve the value of a textbox in AngularJS?

Trying my hand at creating a basic web page using angular. I've got 2 textboxes and 2 buttons - one to set a predefined value in a textbox, and the other to add some text. Here's the code snippet: <!DOCTYPE html> <html lang="en" ng-app ...

javascriptjqueryhtmlangularjs