Internet Explorer 7 background display problem

Having a strange issue with my layout in IE7. I don't have much experience dealing with IE7 bugs, so I'm hoping someone can assist me.

When the page loads in IE7, the background doesn't cover the entire content. It sometimes stops at the top or covers everything except the footer. After a few seconds, it may eventually start covering all the content correctly. I've added clearfix's and tried using "overflow: auto" without success.

Can anyone provide some help? Visit the site here:

Some of the scripts:

The source code: http://pastebin.com/r6R2rdP6

The CSS code: http://pastebin.com/qtMa22xX

The issues seem to involve #body, #page, #content, #bottom-sidebar, etc.

Thank you in advance to anyone who can offer assistance; Matthew.

htmlcssinternet-explorer-7

Answer №1

Relocating this:

<!--[if IE]>
<script type="text/javascript" src="http://www.matthewruddy.com/demo/wp-content/themes/la-rivista/lib/scripts/jquery.border.min.js"></script>
<script type="text/javascript">
// IE rounded borders
DD_roundies.addRule('#body', '5px');
</script>
<![endif]-->

from being inside the <head> tag to right before closing your body tag (</body>) should resolve the issue.

There may be an alternate solution worth exploring.

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

Is there a way to produce random colors using this SCSS function?

The current function is returning an output in the color #ff0063, but my goal is to create a variety of colorful pixel dots on the screen. Could someone provide an explanation of what this code is doing? @function multiple-box-shadow ($n) { $value: &apos ...

htmljquerycsssass

What is the best way to add a gradient effect to my image? (link)

All the details are provided in this JSFiddle. Apologies, I am unable to display the link here. It can be found in the comments section! I'm facing difficulty achieving a red gradient over the image.. ...

htmlcssgradient

The art of incorporating CSS style files in Next.js

Just starting out with Next.js and I could use some help. I'm having trouble getting all of the styles and images to work properly even though I've declared the css files in _app.tsx. Some styles are not being applied and images from 'publi ...

cssnext.js

Transforming React drag and drop page builder state into a functional html, css, and js layout

Currently, I am in the process of developing a drag and drop UI builder for react-based app frameworks. Before incorporating drag and drop functionality, my main focus is on rendering a page layout based on a structured array stored in the state. https:// ...

javascripthtmlreactjsdrag-and-droprender

The public link created by Github only displays the name of the repository

Hello, I am a newbie in the world of web development. After dedicating a week to practicing HTML, I decided to create a project based on my CV. However, when I attempted to host the HTML files on GitHub, I encountered an issue. Whenever I clicked on the ...

htmlgithub

Insert some padding above and below every line of text that is centered

I am looking to achieve a specific layout for my website. https://i.stack.imgur.com/dKT52.jpg Here is what I have attempted: <h2>Make search awesome using Open Source</h2> .banner .section_title h2 { font-family: "Oswald", Arial, sans- ...

htmlcss

Ensure that the background-color stretches across the entire width of the screen

This text needs to be centered and the background color width should cover the entire screen. Unfortunately, I couldn't find a solution for it here. .carousel-content { text-align: center; bottom: 0px; opacity: 0.8; displ ...

htmlcss

Tips for extracting information from JSON data in the provided API example

{"Dina-Kar":{"com":"available"},"DinaKarPool":{"com":"available"},"DinaKarStore":{"com":"available"},"DinaKarOnline":{"com":"available"},"DinaKarParts":{"com":"available"},"DinaKarJack":{"com":"available"},"DinaKarTunes":{"com":"available"},"DinaKarSmart": ...

phphtmljson

Including images directly in email using HTML

I need assistance with sending HTML content via email. I am currently using the code below to open Gmail and display the compose page: Intent emailIntent = new Intent(android.content.Intent.ACTION_SEND); emailIntent.setType("text/html"); emailIntent.setPa ...

androidhtmlemailinline-images

Instructions on setting a photo as a background image using a text-based model

I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...

cssangularionic-framework

Elements generated from bootstrap's divs are not produced in a single line

I'm attempting to have a div append multiple other divs with the class "card" from Bootstrap, but instead of being created in a horizontal line, they are stacked on top of each other. I have tried to modify the "card" class by adding display: inline- ...

jquerycssbootstrap-4

JQuery Menu Script Experiencing Technical Difficulties with Animation

At the top of my page, there is a menu button that has a CSS :hover animation when hovered over. $('.menu_button').click(function () { $(this).animate({ top: '-=50' }, 250); ...

jqueryhtmlcssjquery-animatemouseleave

Rows intersecting and stacking above one another

I designed a layout with some text and icons displayed in rows. While it appears properly on iOS, the rows overlap on Android. const criteriaList = [ { id: 0, title: 'Noor', checked: false }, { id: 1, title: 'Friends & Grades', ...

javascripthtmlcssreactjsreact-native

Webpack Encore: SCSS import order causing unexpected issues

When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my ...

csswebpacksass

Arrange, Explore (Refine), Segment HTML Chart

Is there a way to efficiently sort, paginate, and search (based on a specific column) data in an HTML table? I've explored several JQuery plugins such as DataTable, TableSorter, Picnet Table Filter, but none seem to offer all three functionalities (se ...

phpjavascriptjqueryhtmljquery-plugins

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

Just made some updates to an example by user @austin Encountering an issue when trying to transition backwards (from tab3 to tab2), but it works fine when transitioning forward. I'm not sure what I'm missing here, so any help would be appreciate ...

cssangularjsangular-ui-bootstrapangular-ui-bootstrap-tab

Launch the sidebar window using jQuery

I've been attempting to create something similar to this. However, I'm having trouble replicating it exactly. What I've attempted I've managed to create a replica, but the issue is that the buttons are fixed. Could setting the left ...

javascriptjqueryhtmlcss

What is the best way to incorporate multiple calculations in JavaScript?

As a newcomer to JavaScript, I am trying my hand at creating an online tax calculator for our website. While I can understand pre-written calculations, developing my own has proven to be challenging. The objective is simple: the user inputs their Gross Inc ...

javascripthtmlcsscalculator

Encasing the bootstrap dropdown menu and trigger within individual parent divs for a tidier appearance

Is it possible to toggle a bootstrap dropdown when it is wrapped in another div by using attributes such as data-target or aria-labelledby? I have seen examples where data-toggle="dropdown" and class="dropdown-menu" are siblings. An example of what I am r ...

jqueryhtmltwitter-bootstrapdrop-down-menu

Change the duration of a CSS animation rotation using jQuery and an input range control

I'm trying to rotate an element using the -webkit-animation properties, but I want to be able to control the duration using jQuery and an input range slider. Unfortunately, I'm having trouble getting it to work and I can't figure out what&a ...

jquerycssanimationrotationduration