[SOLVED] image is seen in firefox, safari but not in ie6

[thosecars82]

Hello there

I have two gif image files to change the language of a website between English and Spanish. Nevertheless, I just can see the images of the flag in firefox, safari and opera, but not in ie6. You can check this at www.metatradersoftware.com by seeing the language flag at the top right corner of the screen. Does anyone know why this might happen?

 

The php code is:

 

if ($language=='en')

{

echo '<FORM name="auxemail" id=\'idauxemail\' action=\''.$pagina.'?' . $state.'&language=sp'.'\' method=\'post\'>';

echo '<P>';

echo '<INPUT class = \'enlacespanishflag\' type=\'submit\' onClick=\'storeState()\' value=\'';

echo _(" ") . "'>";

echo '<TEXTAREA name =\'auxemailcontent\' id=\'idauxemailcontent\' rows=\'10\' cols=\'10\'>';

  if (isset($_SESSION['emailcontent']))

  echo $_SESSION['emailcontent'];

echo '</TEXTAREA>';

echo '<TEXTAREA name =\'auxemailsubject\' id=\'idauxemailsubject\' rows=\'10\' cols=\'10\'>';

  if (isset($_SESSION['emailsubject']))

  echo $_SESSION['emailsubject'];

echo '</TEXTAREA>';

 

echo '</P>';

echo '</FORM>';

}

else if ($language=='sp')

{

echo '<FORM name="auxemail" id=\'idauxemail\' action=\''.$pagina.'?' . $state.'&language=en'.'\' method=\'post\'>';

echo '<P>';

echo '<INPUT class = \'enlacebritishflag\' type=\'submit\' onClick=\'storeState()\' value=\'';

echo _(" ") . "'>";

echo '<TEXTAREA name =\'auxemailcontent\' id=\'idauxemailcontent\' rows=\'10\' cols=\'10\'>';

if (isset($_SESSION['emailcontent']))

echo $_SESSION['auxemailcontent'];

echo '</TEXTAREA>';

echo '<TEXTAREA name =\'auxemailsubject\' id=\'idauxemailsubject\' rows=\'10\' cols=\'10\'>';

if (isset($_SESSION['emailsubject']))

  echo $_SESSION['emailsubject'];

echo '</TEXTAREA>';

 

echo '</P>';

echo '</FORM>';

 

And the css code is:

.enlacespanishflag {

padding-left: 0px;

padding-right:0px;

padding-top:0px;

padding-bottom:0px;

background-image:url(images/spanishflag.gif);

width:30px;

height:18px;

outline:none;

border:none;

}

.enlacebritishflag {   

padding-left: 0px;

padding-right:0px;

padding-top:0px;

padding-bottom:0px;

background-image: url(images/britishflag.gif);

width:30px;

height:18px;

outline:none;

border:none;

}

 

Another thing that happens is that I want to get rid of the outline which is shown when someone clicks on the language flag. Nevertheless, although I put outline:none in both the css tag of the Spanish flag and the one of the British flag, this outline is still shown when someone clicks the flag.

I would appreciate if anybody gave me any suggestion.

Thanks in advance

[BlueSkyIS]

it looks like you've got spaces in your HTML parameters. there shouldn't be:

 

class = 'enlacebritishflag' WRONG
class='enlacebritishflag' RIGHT

[thosecars82]

it looks like you've got spaces in your HTML parameters. there shouldn't be:

 

class = 'enlacebritishflag' WRONG
class='enlacebritishflag' RIGHT

Thanks, good to know!. That might be one of the culprits, but I have just changed that and it still does not show the image. Actually, I can tell you that when I modified the width  field in the css tags of the flag images, I could see how the button which is shown instead of the flag in ie6 changed its width. For that reason, I think the class parameter is working right and there must be a problem between ie6 and the background image of the css tags, but still don't know what problem.

[BlueSkyIS]

i still see this on the page linked in your first post:

 

class = 'enlacespanishflag'

 

is using an input of type 'image' out of the question?

 

<INPUT type='image' SRC='/path/to/flag/image.jpg' onClick='storeState()' id='flag_image' name='flag_image'>

 

then switch the SRC of flag_image in javascript?

 

another idea: have you tried setting a z-index for the flag image?

[thosecars82]

i still see this on the page linked in your first post:

 

class = 'enlacespanishflag'

 

is using an input of type 'image' out of the question?

 

<INPUT type='image' SRC='/path/to/flag/image.jpg' onClick='storeState()' id='flag_image' name='flag_image'>

 

then switch the SRC of flag_image in javascript?

 

another idea: have you tried setting a z-index for the flag image?

Excuse me, I was still in the process of uploading the website which had some heavy parts and that is why you still did not see the class = 'enlacespanishflag' corrected into class='enlacespanishflag'. But now, it is corrected as you told me and I still can't see the images in ie6. I still do not know the problem and looking for a solution.

 

This is the code like it is now:

if ($language=='en')

{

echo '<FORM name="auxemail" id=\'idauxemail\' action=\''.$pagina.'?' . $state.'&language=sp'.'\' method=\'post\'>';

echo '<P>';

echo '<INPUT type=\'image\' SRC=\'../estilos/images/spanishflag.gif\' onClick=\'storeState()\' value=\'';

echo _(" ") . "'>";

echo '<TEXTAREA name=\'auxemailcontent\' id=\'idauxemailcontent\' rows=\'10\' cols=\'10\'>';

  if (isset($_SESSION['emailcontent']))

  echo $_SESSION['emailcontent'];

echo '</TEXTAREA>';

echo '<TEXTAREA name=\'auxemailsubject\' id=\'idauxemailsubject\' rows=\'10\' cols=\'10\'>';

  if (isset($_SESSION['emailsubject']))

  echo $_SESSION['emailsubject'];

echo '</TEXTAREA>';

 

echo '</P>';

echo '</FORM>';

//echo '<a href=\''.$pagina.'?' . $state.'&language=sp'.'\' class="enlacespanishflag">';

//echo "<img src=\"estilos/images/spanishflag.gif\" border = \"0\" alt=\"spanishflag\"/></a>";

}

else if ($language=='sp')

{

// echo '<a href=\''.$pagina.'?' . $state . '&language=en'.'\' class="enlacebritishflag">';

// echo '<img src=\'estilos/images/britishflag.png\' border = \'0\' alt=\'britishflag\'/></a>';

echo '<FORM name="auxemail" id=\'idauxemail\' action=\''.$pagina.'?' . $state.'&language=en'.'\' method=\'post\'>';

echo '<P>';

echo '<INPUT class=\'enlacebritishflag\' type=\'submit\' onClick=\'storeState()\' value=\'';

echo _(" ") . "'>";

echo '<TEXTAREA name=\'auxemailcontent\' id=\'idauxemailcontent\' rows=\'10\' cols=\'10\'>';

if (isset($_SESSION['emailcontent']))

echo $_SESSION['auxemailcontent'];

echo '</TEXTAREA>';

echo '<TEXTAREA name=\'auxemailsubject\' id=\'idauxemailsubject\' rows=\'10\' cols=\'10\'>';

if (isset($_SESSION['emailsubject']))

  echo $_SESSION['emailsubject'];

echo '</TEXTAREA>';

 

echo '</P>';

echo '</FORM>';

 

css code:

.enlacespanishflag {

padding-left: 0px;

padding-right:0px;

padding-top:0px;

padding-bottom:0px;

/*background-image:url(images/spanishflag.gif);*/

/*background-repeat:no-repeat;*/

width:30px;

height:18px;

outline:none;

border:none;

}

.enlacebritishflag {   

padding-left: 0px;

padding-right:0px;

padding-top:0px;

padding-bottom:0px;

background-image: url(images/britishflag.gif);

/*background-repeat:no-repeat;*/

width:30px;

height:18px;

outline:none;

border:none;

}

 

[thosecars82]

i still see this on the page linked in your first post:

 

class = 'enlacespanishflag'

 

is using an input of type 'image' out of the question?

 

<INPUT type='image' SRC='/path/to/flag/image.jpg' onClick='storeState()' id='flag_image' name='flag_image'>

 

then switch the SRC of flag_image in javascript?

 

another idea: have you tried setting a z-index for the flag image?

Thanks BlueSkyIS, I liked your idea of putting an image type as input and that actually fixed the problem. Just in case other people wanna see how the code ended up, here it is:

 

....

echo "<INPUT type='image' SRC='../estilos/images/spanishflag.gif' value='";

echo _(" ") . "'>";

....

echo "<INPUT type='image' SRC='../estilos/images/britishflag.png'  value='";

echo _(" ") . "'>";

...

[thosecars82]

Well, I thought that I had solved this problem, but I have just realized that although I can see the language flags in safari, firefox, opera and ie6 in the remote installation of the website, I cannot see these flags in the local installation of the website in my pc. Nothing similar had happened to me so far. Moreover, I have syncronized both remote and local server and they have exactly the same website.

Still looking for a solution.

Any idea?

Thanks in advance

[haku]

It may be a haslayout problem. IE 6 is wierd this way - you put an element on the page, but it doesn't appear. It's because haslayout is set to false. Unfortunately, this is not something you can set to true, you have to set some other CSS statement, and that will give it haslayout of true.

 

http://www.satzansatz.de/cssd/onhavinglayout.html

[thosecars82]

solved with this code:

.enlacespanishflag {

padding-left: 0px;

padding-right:0px;

padding-top:0px;

padding-bottom:0px;

background-image:url(images/spanishflag.gif);

background-repeat:no-repeat;

background-color:transparent;

width:30px;

height:18px;

outline:none;

border:none;

}

 

.enlacebritishflag {   

padding-left: 0px;

padding-right:0px;

padding-top:0px;

padding-bottom:0px;

background-image: url(images/britishflag.gif);

background-repeat:no-repeat;

background-color:transparent;

width:30px;

height:18px;

outline:none;

border:none;

}

 

echo "<input type='submit' class='enlacespanishflag' value='' onclick='storeState()' onfocus='this.blur()'";

echo " />";

 

echo "<input type='submit' class='enlacebritishflag' value='' onclick='storeState()' onfocus='this.blur()'";

echo " />";

 

[haku]

Good it worked, but sloppy programming, seeing as the images aren't actually input buttons.

 

You also didn't learn anything about haslayout, which means that the next time this situation occurs on an element that isn't an image (which it does happen in IE6 often), you will not know how to fix it.