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

Understanding the behavior of the enter key in Angular and Material forms

When creating forms in my MEAN application, I include the following code: <form novalidate [formGroup]="thesisForm" enctype="multipart/form-data" (keydown.enter)="$event.preventDefault()" (keydown.shift.enter)="$ev ...

javascripthtmlangularangular-materialmaterial-ui

Enabling the acceptance of blank values within an HTML5 date input field

When using an HTML5 date input for a field that corresponds to a nullable datetime column in the database, how can one avoid setting an empty value in the input field? In my AngularJS application, the ng-model is connected to a scope variable with an init ...

javascriptangularjshtmldate

Pass data back and forth between app.js (node) and javascript (main.js)

I am facing a challenge in sending and retrieving data (username) between app.js and main.js. In my setup, I have a node app.js that calls index.html which then triggers the main.js function called "clicked". Below is the code snippets for each file: app. ...

javascripthtmlnode.js

Is there a problem with the alignment of

<s:form id="inputThresholdForm" name="inputThresholdForm" theme="simple"> <table border="0" class="display-table" cellspacing="2" cellpadding="2" height="100%" width="100%"> <tr> <td colspan= ...

javascriptjqueryhtmlcss

Alphabetic divider for organizing lists in Ionic

I am currently working with a list in ionic that is fetched from a controller and stored in localStorage. My goal is to add alphabetic dividers to the list, but I am facing some confusion on how to achieve this. Here is a snippet of the code: app.js $ion ...

javascripthtmlangularjsionic-framework

There seems to be a glitch with the Flask flash messaging feature, as

My Flask application includes login and register routes where I aim to display flash messages when username passwords are not matched. Specifically, this issue arises in my index and login routes: @app.route('/') @login_required def index(): ...

pythonhtmlflaskwebflash-message

Checkbox: Activate button upon checkbox being selected

On my webpage, I have a modal window with 2 checkboxes. I want to enable the send button and change the background color (gray if disabled, red if enabled) when both checkboxes are selected. How can I achieve this effectively? HTML: <form action="" me ...

javascriptjqueryhtml

Having trouble reloading a seekbar (input range) in Angular 7 with a function?

I am currently in the process of developing a music player using Angular 7, and below is the HTML code for my component: <div class="track-controller"> <small>{{musicPlayerService.getCurrentTime()}}</small> <div class="progress- ...

htmlangulartypescript

Ruling out the use of jQuery script within a dynamic framework

I have a unique jQuery script to create a "Back to Top" functionality: <script type="text/javascript"> $(document).ready(function(){ // Initially hide the #TopButton $("#TopButton").hide(); // Fade in the #TopButton on scrolling $(function () { ...

jqueryhtmlcss

Angular does not support fetching JSON files

update: The code has been modified to include the latest suggestions provided by you all. I've got this data.json file: [{ "codigo": 21420, "desc": "itv orion 20 a", "prod_24_h_kg": 22 }, { "codigo": 21421, "desc": "itv orion 20 w", "prod_24_h_kg": ...

angularjsjsonhtml

What are the best ways to position elements within a div?

In my small information div, I am looking to align the content on the right side. Specifically, 065 31 323 323, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d4c4c1c0cbdfc4e5c2c8c4ccc98bc6cac8">[email protected]</ ...

htmlcssalignment

Arrange elements within a div using Bootstrap

I have been struggling to align items within a div tag and despite trying various methods, I have not been successful. . Here is the current structure of my code: https://i.stack.imgur.com/t9PAj.png I attempted to use flexbox, but encountered an issue ...

htmlcssbootstrap-4

HTML does not support the use of certain symbols

Currently, I am in the process of designing a homepage for my school project. However, I have run into an issue. The content that I want to be displayed on my homepage is as follows: "Daudzspēlētāju tiešsaites lomu spēle (Massively Multiplayer Online ...

htmlcss

Forwarding the geographic coordinates directly to the system's database

I have a unique script that retrieves the precise latitude and longitude position. It then automatically sends this data to a database without the need for user input. <script> function getPosition(position) { var latitude = position.coor ...

javascripthtmlnode.js

Send the selected dropdown value to two separate PHP pages without using JavaScript

I am specifically looking for PHP programming, not JavaScript. My requirement is to have a dropdown menu containing 15 weeks. When a user selects a week from the dropdown, they should be redirected to a page that displays a message saying: Welcome! You h ...

phphtml

Ways to change content within an editable div without altering the current cursor location

In the javascript code below, I am trying to highlight characters after 255 and display them in another div with a different color. $( "#testdiv" ).keyup(function() { if($("#testdiv").text().length>255) { var text = $("#info").text() $("#te ...

jqueryhtmlcontenteditable

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

javascriptjqueryhtml

Exploring the World of Html

I'm struggling with an HTML problem related to a web programming class I'm taking. The assignment involves creating a video game using HTML and JavaScript, where an image moves randomly on the screen and the player must click on it as many times ...

javascripthtmlcss

Label text will not be wrapped in front of the label (bootstrap)

I'm struggling with some css coding. I want the text to wrap so the label is positioned on the middle right of the box, similar to this example: . However, currently it looks like this: http://jsfiddle.net/yuvemL1z/ and the label ends up being pushed ...

htmlcsstwitter-bootstrap

Drop and drag to complete the missing pieces

Here is a drag and drop fill in the blanks code I created. The challenge I'm facing is that I want users to be able to correct their mistakes by moving words to the right place after receiving points. <!DOCTYPE HTML> <html> <head&g ...

javascripthtmldrag-and-drophtml5-draggable