We help IT Professionals succeed at work.

internet explorer not showing images

asaidi
asaidi asked
on
Hi
i have a website www.fidgambia.org works fine with firefox in intro you can see the 4 flags top and bottom but when i use iexplore i can see only one in top left

<style type="text/css">
body {text-align: center;
background-image:url(gambiaflag.jpg),url(englandflag.jpg),url(walesflag.jpg),url(irishflag.jpg);
background-repeat:no-repeat;
background-position:left top,left bottom ,right bottom,right top;


}
</style>
Regards
A.S
Comment
Watch Question

Commented:
CSS3 is supported by IE9 and above so the syntax
background-image:url(gambiaflag.jpg),url(englandflag.jpg),url(walesflag.jpg),url(irishflag.jpg);
is not valid for all ie browsers

Commented:
look here at explanation 3.

or convert images to .gif

Author

Commented:
changed the jpg to gif not showing at all ,firefox after change works fine but ie8 not showing

Commented:
well, you should also change code to link

background-image:url(gambiaflag.jpg),url(englandflag.jpg),url(walesflag.jpg),url(irishflag.jpg); 

Open in new window


to appropriate new images (that you have uploaded to server)

background-image:url(gambiaflag.gif),url(englandflag.gif),url(walesflag.gif),url(irishflag.gif); 

Open in new window

Author

Commented:
hi
i changed it still not working with ie8

Commented:
Internet explorer 8 does not support this css3 attribute as you try to use it
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx
Commented:
here is alternate way of doing it

CSS
#flag1{
  
    bottom: 0;
    left: 0;
    position: absolute;
  }
  
  #flag2{
  
    bottom: 0;
    right: 0;
    position: absolute;
  }
  #flag3{
  
    top: 0;
    left: 0;
    position: absolute;
  }
  #flag4{
  
    top: 0;
    right: 0;
    position: absolute;
  }
  #content{
    position:absolute;
    top:100px
    }

Open in new window


HTML
<img id="flag1" src="http://www.fidgambia.org/gambiaflag.gif" />
<img id="flag2" src="http://www.fidgambia.org/gambiaflag.gif" />
<img id="flag3" src="http://www.fidgambia.org/gambiaflag.gif" />
<img id="flag4" src="http://www.fidgambia.org/gambiaflag.gif" />

<div id="content">
dfgh dfh dfh dfh kjsd hlksdjfg l;kasdjfhgl ksjdh glksjdh g;sd ljh 
</div>

Open in new window