Member Avatar for jb1ker

Hi
I've been looking for this one like crazy but I just can't find it. Hope anyone can help me out. On my website I have a sliding banner that uses a background image 'repeat'. It shows up perfectly in Firefox, Chrome, Safari but not in IE. I've tried many different things but I don't know what's causing it.

The interesting part is that the #bottomslider (which holds the 3 circles) has the same background image and it shows in IE.

Sincerely hope your coding skills can help me.
Jacob

  • 4 Contributors
  • 6 Replies
  • 184 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Varnius

Dani AI

Generated

Short summary: the banner showing grey in Firefox but blue in IE — while #bottomslider displays the same tile correctly — most commonly means a runtime style is overriding the stylesheet for the rotating slides. ' note about the slideshow script applying backgrounds lines up with the symptoms, and / were right to flag cross-browser differences and markup validation as useful checks. Diagnosis should start by confirming which rule actually wins for the banner element.

Suggested diagnostic steps: IE Developer Tools (F12) can inspect #slider and each slide to reveal the computed background-image and background-color and whether an inline style attribute is present. A search through the site’s script files for assignments to background, backgroundColor or calls like .css('background', ...) will often expose a slideshow/plugin setting inline values. Also check for duplicate library includes, any IE-only CSS, or opacity/filters that might change rendering. If an inline style exists, the stylesheet is being overridden rather than the image failing to load.

Fix options (ordered by preference): modify the slideshow code so it stops setting the background inline (cleanest); if that is not possible, add a higher-specificity CSS rule to restore the intended look; as an emergency fallback an !important rule will override non-!important inline styles. Example:

#slider, #slider .slide {
  background-image: url('images/slider-bg.png');
  background-repeat: repeat;
  background-color: #cccccc;
  zoom: 1; /* helps old IE layout issues */
}

/* fallback override only if needed */
#slider, #slider .slide { background-color: #cccccc !important; }

Notes and cautions: !important hides the root cause and should be a last resort. zoom:1 and explicit height/box rules can fix IE "hasLayout" or sizing differences. Clearing cache and briefly disabling the slideshow script will quickly confirm whether the plugin is the culprit. The observations from (validation) and (script-applied styles) are on the right track; addressing the script or overriding its inline styles resolves this class of IE-specific background mismatches.

Recommended Answers

All 6 Replies

Member Avatar for teedoff

A sliding banner where? In your header? I viewed your page in IE 8 and firefox 3.6 and they both look the same. Not sure whats missing then.

Member Avatar for teedoff

Just out of curiousity, have you tried to validate your code at w3c? Might give some indications as to why this issue is occurring.

Member Avatar for jb1ker

A sliding banner where? In your header? I viewed your page in IE 8 and firefox 3.6 and they both look the same. Not sure whats missing then.

Thanks for the response. The sliding banner has three images that rotate. In IE that background is blue while it should be grey as it is in Firefox.

Member Avatar for teedoff

Ahhhh ok..lol I see what you mean..Wow big difference in color. Also it seems to be a bit smaller top to bottom in IE. Not sure whats going on myself. I know there are many elements that translate differently on different browsers. Colors should be colors though..lol Different screens show colors slightly different. I had a page one time and the background was set to an off white, but on my laptop it was white.

Member Avatar for Varnius

Take a look .

It seems that your javascript sets blue backgrounds on #slider and all three divs inside it and overrides your styles. I`m not sure which .js but might be it.

By the way, why are you using two jQuery libs?
And don`t use iepngfix.htc for fixing transparent stuff in IE. This proves to be a better solution (requires javascript though).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.