Issue with IE7 causing div elements to slide off the screen on specific WordPress pages

Encountering a strange IE7 bug on two pages of a WordPress site I'm currently developing.

Some divs are shifting to odd positions, with one completely off the screen: and another here:

Additionally, possibly related or not, the "created by" link in the footer has also become jumbled up.

To investigate the issue, I added a red border to the problematic elements within IE7. Strangely enough, the border appears in the correct position, but the content isn't contained within it. Any insights on what might be causing this peculiar behavior?..

Thank you in advance :)

htmlcsswordpressinternet-explorer-7

Answer №1

Internet Explorer 7 does not support the new html5 tags such as article. To fix this issue, add the following code snippet to the head section of your html:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

=== UPDATE ===

There is a problem with the dir="rtl" attribute in Internet Explorer 7. Can you please remove it?

Answer №2

Great news! I received a helpful solution to the problem: it turns out that some of the css in wordpress included "position:relative;" in the article.

After removing that, the issue was resolved... :)

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

Blocked the loading of scripts due to non-compliance with the Content Security Policy directive

Encountering an error with externally loaded scripts: Refusing to load the script 'https://code.jquery.com/jquery-3.4.1.slim.min.js' due to violating the Content Security Policy directive: "script-src 'self' https://ajax.googlea ...

javascripthtmlcsscontent-security-policy

Is there a way to dynamically import several CSS files in React Native depending on the data stored in this.state?

How can I dynamically import multiple CSS files in a React Native project based on language? import React, { Component } from "react"; if(this.state.language === "he"){ import styles from "./he"; }else{ import styles from "./en"; } I attempted the ab ...

cssreact-native

Customizing the layout of specific pages in NextJSIncorporating

In my Next.js project, I'm trying to set up a header and footer on every page except for the Login page. I initially created a layout.tsx file in the app directory to apply the layout to all pages, which worked fine. However, when I placed another lay ...

javascripthtmlnext.js

Showing JSON information fetched from an AJAX request within an HTML page

I've been working on a project and I'm almost there with everything figured out. My main challenge now is to display an array of items on a web page after making an ajax call. Below is the code snippet I currently have: JQuery Code: var su ...

javascriptjqueryhtmljsonajax

Enigmatic blank space found lurking beneath the image tag

Recently, I made a change to the header image on my website. Previously, it was set using <div style="background-image... width=1980 height=350> and now I switched to <img src="... style="width:100%;"> This adjustment successfully scaled do ...

htmlcss

Uploading images in PHP

I need assistance with uploading an image to a server using PHP, saving it inside a directory, and then retrieving the image URL. Here is my HTML code: <form method="post> <fieldset> <div class="form-group col-md-6 col-lg-6 col-sm-1 ...

phphtmlimage

Searching for matching strings in jQuery and eliminating the parent div element

Here's an HTML snippet: <div id="keywords"> <div id="container0"> <span id="term010"> this</span> <span id="term111"> is</span> <span id="term212"> a</span> <span ...

javascriptjqueryhtml

The CSS selector functions as expected when used in a web browser, however, it

While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. Fo ...

javascriptjquerycssseleniumcss-selectors

Preview not showing CSS changes properly

1) I am encountering an issue with displaying CSS in a form preview tab. Despite setting the CSS, it does not reflect on the fields after clicking the preview button. 2) Are there alternative methods to open the tab in a new window rather than opening it ...

javascriptjqueryhtmlcsspreview

What is the best way to implement a sliding animation for a toggle button?

Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...

cssvue.jssasscss-animations

The importance of CSS styling links: the difference between a:link, a:visited and simply using a

Curious about the difference between using: a { ... } versus a:link, a:visited { ... } ...

css

Applying CSS styles to my container through a button click event

Currently, I am attempting to apply a padding-top to my container when a button is clicked. Unfortunately, the padding-top is not being added as expected. $('#login').on('click', function(){ $('#loginform1').css('padd ...

jquerycss

Troubles with Conditional Application of CSS Styles to a Twitter-Bootstrap Table

I am facing an issue with highlighting a row in a table when a barcode is entered. Despite following similar scenarios and checking my code, the CSS doesn't seem to be applied. Can anyone help me figure out what I'm missing or how I can fix this? ...

csshtmltwitter-bootstrapangular

How can I apply specific styling to certain cells within a table?

Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers. To see the code and example for this question, visit: http ...

htmlcss

Easily updating a SQL row with the click of an HTML button using PHP

I am in the process of creating a basic comment system that includes a rating for each comment. After reading a comment, users will be asked if they liked it with two options, "Yes" and "No". I am seeking a straightforward method to update the number of ...

phphtmlmysql

What is the best way to create CSS rules that can be dynamically applied as classes using JavaScript?

I have been attempting to use the addClass function in JavaScript to add a class, but I am struggling to make it work. Is there a specific way to define a class that will be added to an element when clicked on? Here is what I have attempted: var input = ...

javascriptjqueryhtmlcss

SharePoint 2013 on a mobile device does not support scrolling within iframes

Recently, I set up a SharePoint 2013 website with a few iframes. However, when I access the site on my mobile devices (iPad and Android), I am unable to scroll through the entire page by touching within the iframe. I attempted to solve this issue by inclu ...

androidioscsssharepointiframe

How can I specify the exact width for Bootstrap 3 Progress Bars?

I have a single page that displays all my files in a table format, and I also have the count of open and closed files. My goal is to represent the percentage of closed files using a progress bar. The width of the progress bar should change based on this p ...

javascripthtmlcsstwitter-bootstrap-3

Validate if cookie has been established in Javascript

Hello everyone! I am trying to redirect a user to another page when a cookie is set by clicking a button. <a href="" onClick="SetCookie('pecCookie','this is a cookie','-1')"><button type="button" name="accept" clas ...

javascriptphpwordpresscookies

The display message in Javascript after replacing a specific string with a variable

I'm currently working on a task that involves extracting numbers from a text input, specifically the first section after splitting it. To test this functionality, I want to display the result using an alert. The text input provided is expected to be ...

javascriptjqueryhtml