The text and links should appear transparent against a gradient background; however, they are displaying in white

I am currently facing a small issue while working on my new website, www.dvpwebdesign.com. The problem arises in Internet Explorer (IE) when the intro page displays a repeated gradient background with text and links overlaid on it. While the layout works perfectly on Safari and Firefox, IE shows a white background behind the text, disrupting the design. I have tried using background-color:none and background-color:transparent in the CSS code to fix this issue, but to no avail. I would greatly appreciate any help or guidance in resolving this problem. Below is the CSS code snippet, and the live HTML code can be accessed from the website directly. Thank you in advance!


body {
margin: 0;
padding: 0;
background-color: none;
width:1000px;
background-image: url(gradient4.jpg);
background-repeat: repeat-x;
}

#menu a{
color:#a0a0a0;
font-weight:normal;
text-decoration:none;
font-size:14px;
margin-left:10px;
margin-top:-35px;
font-family: Skia;
}

#menu a span.two{
color:#33ccff;
cursor:pointer;
font-size:14px;
font-weight:500px;
font-family: Skia;
}

#menutwo a{
color:#9966ff;
font-weight:normal;
text-decoration:none;
font-size:12px;
margin-left:10px;
margin-top:-35px;
font-family: Skia;
}

#menutwo a span.two{
color:#660099;
cursor:pointer;
font-size:12px;
font-family: Skia;
}

#menuthree a{
color:#c8c8c8;
font-weight:normal;
text-decoration:none;
font-size:80px;
font-family: Skia;
}

#menuthree a span.two{
color:#33ccff;
cursor:pointer;
font-size:80px;
font-family: Skia;
}

#menufour a{
color:#b8b8b8;
font-weight:normal;
text-decoration:none;
font-size:42px;
font-family: Skia;
}

#menufour a span.two{
color:#339999;
cursor:pointer;
font-size:42px;
font-family: Skia;
}

#menufive a{
color:#a8a8a8;
font-weight:normal;
text-decoration:none;
font-size:22px;
font-family: Skia;
}

#menufive a span.two{
color:#0066ff;
cursor:pointer;
font-size:22px;
font-family: Skia;
}

ul#menu {
width : 1000px;
list-style-type : none;
position : relative;
margin-top:20px;
margin-right:230px;
float: right;
display:inline;
font-family: Skia;
letter-spacing: 1px;
}

#menu li {
float: right;
display:inline;
}

ul#menutwo {
width: 1000px;
letter-spacing: 1px;
margin-top:-10px;
margin-bottom: 20px;
list-style-type: none;
position: relative;
float: right;
display: inline;
font-size: 24px;
font-family: Skia;
margin-right: 180px;
}

#menutwo li {
float: right;
display: inline;
}

ul#menuthree {
width: 1000px;
letter-spacing: 1px;
list-style-type: none;
position: relative;
float: left;
display: inline;
font-family: Skia;
top: 300px;
}

#menuthree li {
float: left;
display: inline;
}

ul#menufour {
width: 1000px;
letter-spacing: 1px;
list-style-type: none;
position: relative;
float: left;
display: inline;
font-family: Skia;
top: 320px;
}

#menufour li {
float: left;
display: inline;
}

ul#menufive {
width: 1000px;
letter-spacing: 1px;
list-style-type: none;
position: relative;
float: left;
display: inline;
font-family: Skia;
top: 340px;
}

#menufive li {
float: left;
display: inline;
}
htmlcss

Answer №1

It seems that your jQuery tricks are causing the background color to be applied as an inline style.

When I check the spans in IE 8's developer tools, I see this:

filter: alpha(opacity=100); ZOOM: 1; background: #fff;

Update: Found the culprit in fadelinks.js

var bgcolor = "#fff";   // Unfortunately, we need to set the background color because of IE's quirks and bugs. Please make sure the background color in your links matches that of your document.

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

Enhancing the Appearance of HTML Select Dropdowns in JavaFX 2.2 WebEngine

I am currently working on a project that is unable to be updated to Java 1.8 to support the latest JavaFX version. While this may or may not impact the issue I am facing, I have been exploring various solutions from the internet to customize the look and f ...

javascripthtmlcssjavafx

Ways to extract variables from a component and utilize them in App.js

Despite my efforts to search online, I could not find the answer or understand what I needed to. My issue: I need the "inputVal" variable from the "InputField.js" component to be accessible in the "App.js" component (specifically in the fetch request where ...

javascripthtmlreactjsfrontend

Tips on optimizing website performance by implementing lazy loading for images and ensuring they are ready for printing

Many websites feature an abundance of images, prompting the use of lazy loading to enhance load times and reduce data consumption. But what happens when printing functionality is also required for such a website? One approach could involve detecting the p ...

javascripthtmlimageprintinglazy-loading

Parsing HTML with AngleSharp - Extracting Text from IElement

I am currently developing an HTML parser using AngleSharp that takes input in the following format: <p> Paragraph Text <a href="https://www.example com" class="external text" target="_new" rel="nofollow">Link Text</a> Paragraph Text 2 &l ...

c#htmlparsinganglesharp

Customize the default classes for DataGrid in Material UI

Attempting to customize the CSS properties in the "DataGrid" Material UI, specifically adjusting font weight and overflow of the header. Below is the JSX code snippet: import React, {useState, useEffect} from 'react'; import {DataGrid, GridToolb ...

htmlcssreactjsmaterial-ui

Implement a floating div below an accordion element on the page

As depicted in the image, there is a "Quick Tips" div located below the accordion. Let's assume the outermost div is named id="TipsDiv". The goal is to ensure that this div remains below the accordion as the user scrolls down, never going above positi ...

jqueryhtmlcssinternet-explorer-8

Having difficulties with Smooth Div Scroll and Colorbox integration

Check out the gallery page by following this link: http://www.gerardtonti.com/Scrollable%20Gallery%2/index.html After trying numerous methods, I am still facing the same issue. Upon discovering your jQuery Smooth Div Scroll tool online, I intend to contr ...

jqueryhtmlscrollcolorboxsmoothing

Experiencing problems with malfunctioning javascript tabs

As a beginner user and coder, I'm currently working on creating a portfolio website. I had the idea to implement tabs that would allow for content swapping, but unfortunately, I'm having trouble getting the JavaScript to function correctly. I at ...

javascripthtmlcss

How can I personalize the HTML code of images added to my WordPress articles?

I've been on an extensive search trying to find a solution for this issue. I'm aiming to modify the markup of an uploaded image in WordPress from its current form: <div id="attachment_906" style="width: 590px" class="wp-caption aligncenter"&g ...

phphtmlcsswordpress

The background image doesn't extend to the bottom of the page due to the inability to utilize background-attachment

Currently, I am working on a project that requires a background image to cover the entire page. Unfortunately, using "background-attachment: cover" is not an option due to the need for compatibility with iOS, which does not support this property. .sky-b ...

htmlioscssbackgroundposition

A problem arises in Next.js when CSS is not rendering properly during Server Side Rendering

After creating my next.js application using the command npx create-next-app, I realized that the styles from the imported .css files are rendering correctly on Client Side Render but not on Server Side Render. The Next.js documentation states that importe ...

javascriptcssnext.jsserver-side-rendering

Assistance requested for integrating Remy Sharp's JQuery Marquee Plugin

I'm currently working on a project to display the latest tweets for a specific hashtag. I came across this example at http://exscale.se/__files/uploads/scrolling-twitter-feed.htm which shows tweets from user timelines rather than using the search api ...

jqueryhtmljsontwitter

I am looking to identify when the focus event occurs on all HTML input elements on a page without using addEventListener or any HTML attributes

Does anyone know a way to detect the focus event on all HTML input elements on a page without using the addEventListener function or HTML attributes? I was successful in detecting click events with the following code: onclick = () => { // do somethi ...

javascripthtmlfrontenddom-events

Generating HTML table rows dynamically in Angular based on the number of items stored in a $scope variable

In my current project, I am utilizing Angular to dynamically populate data in an HTML table. Instead of manually coding each row for display, I am in need of a solution that allows me to programmatically define each HTML row. The Angular controller snippet ...

javascripthtmlangularjs

Adding text to the end of a web address through a submission form

Here is an example of a form: <form method="post"> {% csrf_token %} <input class="search" type="text" name="q" placeholder="Search Engine"> <input type="submit"> I am looking t ...

pythonhtmldjangovisual-studio-code

Implementing a redirection of Dojo Data grid cell values to a different destination

I am working with a Dojo data grid that contains 10 rows (cells) of values. When the first row is clicked, I need it to redirect to another HTML page and carry along the values from the first row. Can you assist me in achieving this functionality? ...

javahtmldojo

Ways to invoke a function in HTML aside from using the (click)="function()" syntax

How can I display data from a GET request to the WordPress API as the page loads in an Ionic app using Angular? I am able to retrieve my desired post list, but only when I use a button click event to call the method in the HTML. Since this is my first att ...

htmlangulartypescriptionic-framework

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

javascriptcssreactjsmaterial-ui

How to Display Full Lightbox Image on both Tall and Short Height Browsers

Hey there! I'm showcasing my portfolio using lightbox, but I've run into a little issue. When the browser height is full, everything looks great - you can see the entire image, along with the paragraph and buttons. https://i.stack.imgur.com/UCJG ...

htmlcsssasslightbox

Creating a Drop-down Menu Item using React Material UI

I am experiencing an issue with displaying a MenuItem in my Dialog2 within my React app. Despite setting the zIndex: 1900 to a higher value than the two dialogs, the MenuItem remains hidden behind the dialogs instead of appearing at the front. Please revi ...

cssreactjsmaterial-uijss