Web Design Forum: IE8 and Background Images - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

IE8 and Background Images IE8 not always displaying background images properly Rate Topic: -----

#1 User is offline   chrisbirder 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 03-May 10
  • Reputation: 0

Posted 03 May 2010 - 10:23 AM

Hi

This is my first post to this forum. I have recently redesigned a site www.birdingart.com
I have used image replacement for headers(h1, 2 and 3's) and navigation buttons(h4's) across the site, which works fine on Firefox, Safari and some of the time on IE8.

My problem is that IE8 appears to only randomly display these background images part of the time. If you return to a page that was displaying correctly or refresh a page, some or all of the background images might be missing.

Some pages load correctly first time and then develop the problem on refreshing, some don't load correctly at all, despite the background images and html headers being the same across the site.

I am using a negative text indent(upto -1400px) to replace text, and the headers are positioned absolutely with negative values, but I don't see why either of these could cause a problem?

My xhtml and css validate and I can't figure this problem out. Any help from more experienced designers would be much appreciated before I start to rework the design of my pages!
0

#2 User is offline   mteam 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,828
  • Joined: 07-November 09
  • Reputation: 247
  • Gender:Male
  • Location:Manchester
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 03 May 2010 - 11:47 AM

Try wrapping the missing content in a div, I seen this before with IE7

<DIV>
<H1 class=birdingarttext>Birding Art Gallery for Bird Art, Bird Illustrations and Paintings of Birds, </H1>
<H2 class=gallerydesctext>The online gallery for bird art, bird paintings and bird illustration</H2>
<H3 class=iombanner>Bird Art Image of Month <A title="peregrine by Steven Lingham" href="http://www.birdingart.com/pages/lingham/peregrine.html">Peregrine oil painting by Steven Lingham</A> </H3>
<DIV class=navcon>
<H4 id=home><A href="http://www.birdingart.com/index.html">Home</A></H4>
<H4 id=gallery><A href="http://www.birdingart.com/pages/gallery.html">Bird Art Gallery</A></H4>
<H4 id=artists><A href="http://www.birdingart.com/pages/artists.html">Bird Artists</A></H4>
<H4 id=top20><A href="http://www.birdingart.com/pages/top20.html">Top 20 Paintings of Birds</A></H4>
<H4 id=exhibit><A href="http://www.birdingart.com/pages/exhibit.html">Exhibit Bird Art</A></H4>
<H4 id=contact><A href="http://www.birdingart.com/pages/contact.html">contact</A></H4></DIV>
<DIV id=homenew><A title="avocet by Clive Meredith" href="http://www.birdingart.com/pages/meredith/avocet2.html"><IMG alt="avocet by bird artist Clive Meredith" src="http://www.birdingart.com/images/meredith/avocet2-s.jpg"> </A><A title="avocets by artist Richard Allen" href="http://www.birdingart.com/pages/allen/avocets2.html"><IMG alt="avocets bird art by bird artist Richard Allen" src="http://www.birdingart.com/images/allen/avocets2-s.jpg"> </A><A title="nightingales bird painting by artist Tina Bone" href="http://www.birdingart.com/pages/bone/nightingales.html"><IMG alt="nightingales bird art by bird artist Tina Bone" src="http://www.birdingart.com/images/bone/nightingale-s.jpg"> </A><A title="connecticut warbler by Jonathan Latimer" href="http://www.birdingart.com/pages/latimer/connecticutwarbler.html"><IMG alt="connecticut warbler by bird artist Jonathan Latimer" src="http://www.birdingart.com/images/latimer/connecticut-warbler-s.jpg"> </A><A title="Peregrine by artist Steven Lingham" href="http://www.birdingart.com/pages/lingham/peregrine.html"><IMG alt="Peregrine bird art by bird artist Steven Lingham" src="http://www.birdingart.com/images/lingham/peregrine-s.jpg"> </A><A title="common gulls bird painting by artist Chris Lodge" href="http://www.birdingart.com/pages/lodge/commongulls.html"><IMG alt="common gulls bird art by bird artist Chris Lodge" src="http://www.birdingart.com/images/lodge/common-gulls-s.jpg"> </A><A title="long tailed tits by artist Richard Allen" href="http://www.birdingart.com/pages/allen/longtailedtits.html"><IMG alt="long tailed tits bird art by bird artist Richard Allen" src="http://www.birdingart.com/images/allen/long-tailed-tit-s.jpg"> </A>
<DIV id=homerecent><A title="Redshank bird art by bird artist Jan Wilczur" href="http://www.birdingart.com/pages/wilczur/redshank.html"><IMG alt="Redshank bird art by bird artist Jan Wilczur" src="http://www.birdingart.com/images/wilczur/redshank-s.jpg"> </A><A title="grey partridge by artist Jonathan Pointer" href="http://www.birdingart.com/pages/pointer/greypartridge.html"><IMG alt="grey partridge bird art by bird artist Jonathan Pointer" src="http://www.birdingart.com/images/pointer/grey-partridge-s.jpg"> </A><A title="Robin bird painting by artist Carl Thompson" href="http://www.birdingart.com/pages/thompson/robin.html"><IMG alt="Robin bird painting by artist Carl Thompson" src="http://www.birdingart.com/images/thompson/robin-s.jpg"> </A><A title="Little Owl painting of birds by Peter Cotton" href="http://www.birdingart.com/pages/cotton/littleowl.html"><IMG alt="Little Owl painting of birds by Peter Cotton" src="http://www.birdingart.com/images/cotton/little-owl-s.jpg"> </A><A title="Hoopoe bird drawing by bird artist Mike Hughes" href="http://www.birdingart.com/pages/hughes/hoopoe.html"><IMG alt="Hoopoe bird drawing by bird artist Mike Hughes" src="http://www.birdingart.com/images/hughes/hoopoe-s.jpg"> </A><A title="curlew roost bird painting by artist Chris Lodge" href="http://www.birdingart.com/pages/lodge/curlewroost.html"><IMG alt="curlew roost bird art by bird artist Chris Lodge" src="http://www.birdingart.com/images/lodge/curlew-roost-s.jpg"> </A><A title="robin by artist Steven Lingham" href="http://www.birdingart.com/pages/lingham/robin.html"><IMG alt="robin bird art by bird artist Steven Lingham" src="http://www.birdingart.com/images/lingham/robin2-s.jpg"> </A><A title="marsh harrier bird art by bird artist Jan Wilczur" href="http://www.birdingart.com/pages/wilczur/marshharrier.html"><IMG alt="marsh harrier bird art by bird artist Jan Wilczur" src="http://www.birdingart.com/images/wilczur/marsh-harrier-s.jpg"> </A><A title="snowy owl bird art by bird artist Lukasz Bednarz" href="http://www.birdingart.com/pages/bednarz/snowyowl.html"><IMG alt="snowy owl bird art by bird artist Lukasz Bednarz" src="http://www.birdingart.com/images/bednarz/snowy-owl-s.jpg"> </A></DIV></DIV></DIV>

0

#3 User is offline   chrisbirder 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 03-May 10
  • Reputation: 0

Posted 15 May 2010 - 10:19 PM

Thanks for that mteam.

I have enclosed the headers in a div as you suggested and it seems to have cured the problem. If anybody knows why this should be I would love to know! - I didn't change the CSS, or assign class or identity to the new div, all the CSS declarations still relate to the header elements exactly as before- it is just a seemingly unnecessary extra piece of html with no apparent function that is needed to make IE8 render the pages correctly on some computers!

I also can't understand why this problem only affected certain users - many people using IE8 had no problems at all before the addition of the extra div element...

Thanks again for the help!
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users