Issues have arisen with the main background image in IE7 on ProLoser's AnythingSlider

Check out my website:

Everything is working perfectly with AnythingSlider in all browsers except for IE7 - not really a surprise. The background image of the entire page seems to be offset differently depending on the browser size. After some investigation, I've traced the issue back to the left and right navigation elements. When I turn off the navigation functionality in jQuery, the problem disappears. It looks like the metallic-styling CSS uses negative background values to hide certain buttons (I think I just figured out my own question :)

I just need a fix for IE's background positioning issue. I might experiment with using independent images that don't rely on negative background values.

I know IE7 is outdated, but testing it helps me uncover potential problems ;)

Thank you in advance, Nicholas

p.s. Attempts to use multiple images instead of negative background positions didn't solve the problem. It seems like the arrow div container could be the root cause.

internet-explorer-7cssanythingslider

Answer №1

It seems like the issue lies in using a negative top margin to center the arrow images vertically.

You can try adjusting the top percentage until the image is centered for you, then simply set the link's margin to zero, as shown below:

/* Navigation Arrows */
div.anythingSlider-metallic .arrow {
  top: 30%; /* adjust this percentage to vertically center your arrows */
  position: absolute;
  display: block;
  z-index: 100;
}
div.anythingSlider-metallic .arrow a {
  display: block;
  height: 95px;
  /* margin-top: -47px; - half height of image - REMOVE THIS LINE */
  margin: 0;
  width: 45px;
  outline: 0;
  background: url(../images/arrows-metallic.png) no-repeat;
}

Furthermore, remember to delete the text-indent: -9999px, as it may also be causing positioning issues.

Update: Version 1.5.10, released today, now includes a separate stylesheet for IE7 with these necessary adjustments.

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

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Can one retrieve the CSS/XPath from a Capybara Element?

Is it possible to extract CSS/XPath from a Capybara Element? I have attempted to use #path but it doesn't appear to be effective. Here is the link I tried: The test is being executed on Selenium Webdriver. ...

cssxpathcapybara

How to link an external CSS file to a Vue.js project

I created a new project using @vue/cli and now I want to add an external CSS file to my App.vue Here's what I attempted: <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | ...

javascriptcssvue.jswebpack

Blending a background image with CSS

I've set a background image for the div, which is also used for responsive design. Check out the demo My goal is to ensure that the image doesn't appear cut off in the responsive view. I'm looking for a CSS solution to blend the image wit ...

cssresponsive-design

unexpected alteration of text sizing in mathjax within reveal.js presentations

Something strange is happening with the font size in my slides. The code for each slide is the same, but there is an unexpected change between the 3rd and 4th slide. I cannot figure out what is causing this discrepancy. Oddly enough, when I remove the tit ...

javascripthtmlcssmathjaxreveal.js

Enhancing the appearance of CSS Tables

I need help with applying a gradient line below each row of data that I am fetching from my database and displaying in a <table>. I've been able to achieve the design using an <hr> element, as shown here: http://jsfiddle.net/ghrw3k8e/. Ho ...

phpcsshtml-table

Tips for optimizing the placement of div elements for top advertisements on Amazon's website

I'm looking to overlay some divs on top of Amazon.com ads, similar to the image above. This is part of a personal project where I need to position these divs precisely over the ads. To achieve this effect, I've been using getBoundingClientRect t ...

javascripthtmlcss

Automatically adjust the top margin of the content section to accommodate a fixed header height

After extensive searching, I've come across various solutions but none of them seem to fit my needs. I am a beginner/amateur developer. The issue I am facing is with a fixed header that resizes when scrolling. I understand that by adding padding-top: ...

javascripthtmlcss

Customizing MaterialUI styles in React: A step-by-step guide

When utilizing Material UI with React, I am facing difficulty styling the Outline Select component according to my preferences. How can I override the default styles effectively? Even after using withStyles, I am unable to achieve the desired appearance a ...

cssreactjsmaterial-ui

Activate the CSS on a click event using the onClick method

I am trying to implement a transition that triggers when clicking on a specific div element. Currently, the transition only occurs with the active css class. How can I achieve this effect by simply clicking on the div itself? I am using reactjs and believe ...

javascriptcssreactjs

Utilizing SASS for customizable color schemes

I am in the process of creating a website using Rails 3 which will allow users to customize their profiles with different layouts and color schemes. I have already implemented SASS, and I believe it would be incredibly useful if I could achieve something l ...

ruby-on-railscsssass

Are Bootstrap Input groups inconsistent?

Hey there! I've been working on the sign-in example, but I seem to have hit a roadblock. In my local setup, the top image is what I see in my browser after running the code, while the desired layout that I found on the Bootstrap site is the one below ...

javascripthtmlcsstwitter-bootstrap

implementing a time picker feature with jQuery

As I am not familiar with jQuery, I came across this script while searching for a time picker. If anyone could guide me on how to incorporate this code into my HTML page to enable the time picker functionality, I would greatly appreciate it. /* jQuery t ...

jqueryhtmlcss

Node.js has no trouble loading HTML files, however, it seems to encounter issues when trying to

Having a bit of trouble with my JavaScript skills as I try to load my index.html file (seems like it should be the 5th easiest thing to do in JavaScript). Let me get straight to the point; when I manually open my index.html, it loads perfectly WITH the CS ...

javascripthtmlcssnode.js

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

cssreactjsflexbox

I'm having trouble getting jquery css to function properly in my situation

I am trying to implement a fallback for the use of calc() in my CSS using jQuery CSS: width: calc(100% - 90px); However, when I tried running the code below, it seems like the second css() function is not executing. I suspect that there might be an issu ...

javascriptjquerycss

Is it possible to automatically adjust the text color based on the dynamic background color?

While browsing Palantir.com, I noticed that the logo color always changes to be the inverse of the background color behind it as the background scrolls or changes. I'm currently working on a website using Wordpress and would love to achieve the same ...

htmlcsswordpress

Guide on adjusting the darkness of a MaterialUI Avatar component image and adding text to it

I'm currently working with the Avatar component from Material UI along with Tailwind CSS. I found that by simply adding the image URL to the src, it displays the avatar successfully. <Avatar alt="Cindy Baker" src="https://mui.com/sta ...

javascriptcssreactjsmaterial-uitailwind-css

Struggling to get the picture and text to line up

I've been struggling with a seemingly simple task but just can't seem to make it work. My goal is to create a basic comment structure that looks like this: *image* *name* *comment* The issue I'm facing is trying to position the ...

htmlcssposition

Is there a way to refresh CSS styles when the window width is adjusted?

Is there a way to refresh CSS styles when the window width changes? I attempted this method, but unfortunately it did not work as expected. A simple refresh (F5) helps to rectify the CSS tags. jQuery(function($){ var windowWidth = $(window).width(); ...

javascriptjquerycssresizereload