Image not showing in IE HELP PLEASE !!!

[wbmkk]

What causes a png image to show Ok in Firefox, but not in IE7

 

[GeneticOpera]

It's not working on my laptop either :-( The html looks fine, though eventually you might want to type a hight and width for the picture. I have IE8. What's your CSS look like?

 

[wbmkk]

Hi, I am puzzled

I tried to give the url, but each time it was showing incorrectly, so I eventually gave in and just wrote a basic question.

I have tried previously with heights, widths etc taking into effect the box model problem, all without luck.

I've tried converting the original large logo to a GIF file and that worked, but not a very good image.

Is there a way tpo have one <img src ...> for Firefox and a different <img option for IE ?

Would I have to use a conditional comment and try using the background image css method rather than img way

I'll try that tomorrow ... I really have had enough for this evening

Regards !

I've removed the logo for the time being

 

[GeneticOpera]

The img code is the same in IE, it's just <img src="image.png" width="124" height="394" alt="Discription of the image" /> When I went to your website I could see the source code, but not the CSS and since the html looks good your problem is in the CSS.

 

[wbmkk]

Hello again GeneticOpera

Here is the CSS, well as it is is now ... I changed the #logo rules several times.

Maybe there's another general rule causing the problem

@charset "utf-8";
/* CSS Document */

/* styles for individual shop */

/* still to fix for double float bug   done */

*{
margin:0px;
padding:0px;
}

body{
background-color:black;
font-family:Helvetica, Arial, sans-serif;

}

/* overall container for all text */

#container{
	width:960px;
	margin:0 auto;
	margin-top:0px;
}


/* new header, split left and right  */

#header{
width:960px;
float:left;
position:relative;
}

#headerleft{
width:960px;	
	height:120px;
	background-image:url(../graphics/shops_in_newcastle_logo.png);
	background-position:top left;
	}






/* ---- left hand section style here ----- */

#leftnav{
width:198px;
height:670px;
float:left;
background-color:#EFB852;
border-top:2px solid black;
border-right:2px solid black;
}

h1{
color:#ffeace;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:30px;
font-weight:bold;
margin-left:355px;
padding-top:70px;
width:560px;
text-align:right;

}




h2, h3 {
font-weight:bold;
color:navy;
}

h3 {
margin-left:10px;}

#shopdetails{
border-top:2px solid black;
background-color:#efc77c;
width:760px;
margin:0 0 0 auto;
float:left;
height:670px; 
}

/*
#logo{
width:140px;
height:120px;
background-color:black;
color:white;
margin-left:30px;
margin-top:30px;
}
*/


#location{
border:2px solid #bc8012;
background-color:#ffeace;
line-height:150%;
width:250px;
float:left;
/* for double float */
display:inline;
margin-left:20px;
margin-top:30px;

}

#locationleft{
width:226px;
margin-left:10px;
padding:5px 0px 5px 0px;

}


#contact{
border:2px solid #bc8012;
background-color:#ffeace;
width:380px;
margin-top:20px;
line-height:150%;
float:left;
margin-left:20px;
display:inline;

}

#contactleft{
margin-left:10px;
padding:5px 0px 5px 0px;
width:120px;
float:left;
display:inline;
}

#contactright{

padding:5px 0px 5px 0px;
width:246px;
float:left;

}

#contactright a{
color:#192182;
font-weight:bold;
font-size:80%;
text-decoration:none;
}

#contactright a:hover{
color:red;
text-decoration:none;
}


#options{
border:2px solid #bc8012;
background-color:#ffeace;
margin-top:20px;
line-height:150%;
clear:left;
width:415px;
margin-left:20px;
display:inline;
float:left;
}

#optionsleft{

padding:5px 0px 5px 0px;
margin-left:10px;
width:180px;
float:left;
display:inline;
/*
background-color:red;
*/
}

#optionsright{
padding:5px 0px 5px 0px;
width:170px;
float:left;
/*
background-color:yellow;
*/
}


#opening{
border:2px solid #bc8012;
background-color:#ffeace;
width:228px;
height:210px;
float:right;
margin-top:20px;
margin-right:20px;
display:inline;
}


#days2
{width:100px;
padding:5px 0px 5px 0px;
float:left;
line-height:150%;
text-align:left;
margin-left:10px;
display:inline;
}

#days2 ul{
list-style-type:none;}


#times2{
text-align:left;
line-height:150%;
width:110px;
padding:5px 0px 5px 0px;
float:left;
}

#times2 ul{
list-style-type:none;
}

#services {
border:2px solid #bc8012;
background-color:#ffeace;
width:450px;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}

#servicesleft{
width:428px;
margin-left:10px;
margin-right:10px;
padding:5px 0px 5px 0px;
line-height:150%;
height:177px;
overflow:auto;
}


#image{


color:white;
float:right;
margin-right:20px;
margin-top:30px;
display:inline;
height:250px;
width:300px;
}

/* ------ general rules are here -------  */

.clear{clear:both;}


/* left nav style only here */

#mininav{
width:160px;
/*
height:240px;
*/

margin-left:27px;

margin-top:40px; /*    ??  */
}

#mininav ul{
margin:0px;
padding:0px;
list-style-type:none;
}

#mininav ul li{
width:148px;
height:76px;
text-align:center;
margin-bottom:10px;

}

#mininav li a{
display:block;
width:140px;
height:50px;
background-color:#262e9a;
border-style:outset;
border-width:4px;
border-color:#2d3489;
padding-top:10px;
text-decoration:none;
color:white;
font-weight:bold;
}

#mininav li a:hover{
display:block;
width:140px;
height:50px;
background-color:#787FCD;
border-style:inset;
border-width:4px;
border-color:#2d3489;
color:black;
}

/*   trial for photograph follows ..   */

#mypic{
background-color:white;
width:143px;
height:261px;
margin-left:27px;
margin-top:18px;
border:2px solid #bc8012;
background-color:#ffeace;
}




/* footer section styles */

#footer{
float:left;
margin:0px;
padding:0px;
width:960px;
text-align:center;
background-color:#192182;
height:30px;
color:#ffeace;
font-family:verdana;
font-size:12px;
line-height:30px;}

#footerleft{
float:left;
height:30px;
background-color:#192182;
width:198px;

}

/* for validation logo */

#footerleft img{
border-style:none;
}

#footerright{
float:right;
width:750px;
height:30px;
}



h5{color:yellow;
font-size:20px;
}

Thanks for any help.

 

[anna]

PNG files do not work well with Internet explorer. Here is a workaround I found online:

http://www.pcmag.com/article2/0,2817,1645187,00.asp

I'd use jpg files if I were you. Good luck!

 

[PixelPusher]

what is the problem you are having with the png image? Not showing? corrupted color?

If the image has transparency, then early versions of IE will have issues. With IE7 and IE8 there should be no problem.

Can you provide a link to your page with the problematic image?

 

[GeneticOpera]

Hmmm... I've never had an issue using png files in IE and I'm using the latest version but could not get yours to show up. In your CSS I noticed

#logo {width:140px;
height:120px;
background-color:black;
color:white;

Try putting the height and width in the HTML code instead and getting rid of the background color and color.

 

[wbmkk]

Thanks for all your help. I am all sorted now

PixelPusher ... originally did try to give a URL, but after repeated attempted I gave up, as the on screen preview always had several letters misssing.

I got a new image and all is OK

For a logo, basically two blocks of colour, the jpg was not the best option, but that what i was given.

The site ... I'll try again is at

http://www.shopsinnewcastle.co.uk/shops/the_bike_place.html

end is shops/the_bike_place

 

[anna]

Hmmm... I've never had an issue using png files in IE and I'm using the latest version but could not get yours to show up. In your CSS I noticed

#logo {width:140px;
height:120px;
background-color:black;
color:white;

Try putting the height and width in the HTML code instead and getting rid of the background color and color.

IE does not support transparent png files. Have you ever noticed the gray background behind png files in IE?

 

[PixelPusher]

Link worked

So all is good now? problem fixed?