Trans overlay on background in IE not working

mikekj · July 13, 2010, 4:05pm

Code snippet


<div style="background: url(images/350-The_Way_We_Were.jpg) no-repeat;"><img src="/images/trans_over.gif" width="350" height="254.117647059" border="0" alt="The Way We Were" title=" The Way We Were " width="350" height="254.117647059" class=""></div>

Can anyone see wht in IE the background image is not showing from under the transparent overlay?

Needless to say works fine in FF!

mikekj · July 14, 2010, 11:49am

have found the solution!!!

Dont let the end user use capitals … go figure!

and thanks for the heads up on the ridiculous height figure!

Thanks

mikekj · July 14, 2010, 9:56am

I have taken on board your comments and set the height attribute to a whole number…thanks

Black_Max · July 13, 2010, 5:53pm

Two quick observations:

No one likes inline styling
This height: height="254.117647059 might be choking IE. I’ve never seen a height like this, and the string of figures behind the decimals is not only useless (no browser will render this as anything except as 254) but could well be throwing IE for a loop.

Also, because some file systems are persnickety, I never start a file name with a numeric character, but I don’t think that’s what’s causing your problem.

mikekj · July 14, 2010, 8:49am

I’m wondering if the DOM in IE has changed because when you reload the page it hangs for a short moment stating waiting for this particular image and I’m wondering if the transparent overlay is rendered before the background image it hides the background? Or am I clutching at straws here?

This is an excerpt from the DOM so I don’t think the above is valid


<TD class="padding5" width="50&#37;">
<BR style="LINE-HEIGHT: 15px" /><A href="http://www.angelgenie.com/product_info.php?cPath=1_6&products_id=1099">
<DIV style="BACKGROUND: url(images/350-The_Way_We_Were.jpg) no-repeat">
<IMG class="" title=" The Way We Were " border="0" alt="The Way We Were" src="http://www.angelgenie.com/images/trans_over.gif" width="350" height="254" />
</DIV>
</A><BR style="LINE-HEIGHT: 0px" /><SPAN style="PADDING-LEFT: 10px; COLOR: #393939; FONT-SIZE: 11px"><STRONG>The Way We Were</STRONG></SPAN><BR /><SPAN style="PADDING-LEFT: 10px"></SPAN><BR />
<!--br style="line-height:22px"-->
<SPAN></SPAN><BR />
<!--br style="line-height:23px"-->
<A style="PADDING-LEFT: 10px; FLOAT: left" href="http://www.angelgenie.com/product_info.php?products_id=1099"><IMG border="0" alt="" src="http://www.angelgenie.com/templates/theme053/images/buttons/english/small_view.gif" width="61" height="20" /></A> <A style="PADDING-RIGHT: 15px; FLOAT: right" href="http://www.angelgenie.com/index.php?cPath=1_6&page=4&action=buy_now&products_id=1099"><IMG border="0" alt="" src="http://www.angelgenie.com/templates/theme053/images/buttons/english/button_in_cart.gif" width="103" height="20" /></A><BR />
</TD>


<TD class="padding5" width="50%">
<BR style="LINE-HEIGHT: 15px" /><A href="http://www.angelgenie.com/product_info.php?cPath=1_6&products_id=243">
<DIV style="BACKGROUND: url(images/350-Racing_to_the_Future.jpg) no-repeat">
<IMG class="" title=" Racing to the Future " border="0" alt="Racing to the Future" src="http://www.angelgenie.com/images/trans_over.gif" width="350" height="230" />
</DIV>
</A><BR style="LINE-HEIGHT: 0px" /><SPAN style="PADDING-LEFT: 10px; COLOR: #393939; FONT-SIZE: 11px"><STRONG>Racing to the Future</STRONG></SPAN><BR /><SPAN style="PADDING-LEFT: 10px"></SPAN><BR />
<!--br style="line-height:22px"-->
<SPAN></SPAN><BR />
<!--br style="line-height:23px"-->
<A style="PADDING-LEFT: 10px; FLOAT: left" href="http://www.angelgenie.com/product_info.php?products_id=243"><IMG border="0" alt="" src="http://www.angelgenie.com/templates/theme053/images/buttons/english/small_view.gif" width="61" height="20" /></A> <A style="PADDING-RIGHT: 15px; FLOAT: right" href="http://www.angelgenie.com/index.php?cPath=1_6&page=4&action=buy_now&products_id=243"><IMG border="0" alt="" src="http://www.angelgenie.com/templates/theme053/images/buttons/english/button_in_cart.gif" width="103" height="20" /></A><BR />
</TD>

This is really weird

mikekj · July 14, 2010, 8:25am

Thanks for the observation…

This is a CreLoaded shop and the height attribute is developed automatically by imagemagik in a function using ‘convert’ to size the background image, getting the width and height and orientation of the background image and to html size the transparent overlay then return the html string being used in the while loop calling the function and was working fine up until recently…


 function tep_image_trans($src, $alt = '', $width = '', $height = '', $parameters = '') {
   if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
      return false;
    }
// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default
   // $image = '<img src="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"';

   $urlstr = tep_output_string($src);
   $a = split("/", $urlstr);
   $b = $a[1];
   $g = preg_replace('/ /', '_', $b);
   $convert = '/usr/bin/convert';

    if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (empty($width) || empty($height)) ) {
      if ($image_size = @getimagesize($src)) {
        if (empty($width) && tep_not_null($height)) {
          $ratio = $height / $image_size[1];
          $width = $image_size[0] * $ratio;
        } elseif (tep_not_null($width) && empty($height)) {
          $ratio = $width / $image_size[0];
          $height = $image_size[1] * $ratio;
        } elseif (empty($width) && empty($height)) {
          $width = $image_size[0];
          $height = $image_size[1];
        }
      } elseif (IMAGE_REQUIRED == 'false') {
        return false;
      }
    }
$path = '/var/www/www.angelgenie.com/images/';
$resized_bg_image = "$convert -resize $width -quality 100 '$path$b' $path" . "$width-$g";
if(!file_exists($path . "$width-$g")){
 system($resized_bg_image);
}

//$image = '<div style="background-image: url(' . $d . ')"><img src="/images/trans_over.gif" border="0" alt="        ' . tep_output_string($alt) . '"';

        $image = '<div style="background: url(images/'. $width . '-' . $g . ') no-repeat;"><img src="/images/trans_over.gif" width="' . $width .'" height="' . $height . '" border="0" alt="' . tep_output_string($alt) . '"';

    if (tep_not_null($alt)) {
      $image .= ' title=" ' . tep_output_string($alt) . ' "';
    }
    if (tep_not_null($width) && tep_not_null($height)) {
      $image .= ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';
    }
    if (tep_not_null($parameters)) $image .= ' ' . $parameters;
        $image .= '></div>';
    return $image;
}

There is another similar function that outputs an html string containing a javascript pop up window call that works fine


// The Javascript Image wrapper build a image tag for a dummy picture,
// then uses javascript to load the actual picure.  This approach prevents spiders from stealing images.
  function tep_javascript_image($src, $name, $alt = '', $width = '', $height = '', $parameters = '', $popup = 'false') {
    global $product_info;
    $image = '';
    if ( empty($name) || ((empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false')) ) {
      return false;
    }

    if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (empty($width) || empty($height)) ) {
      if ($image_size = @getimagesize($src)) {
        if (empty($width) && tep_not_null($height)) {
          $ratio = $height / $image_size[1];
          $width = $image_size[0] * $ratio;
        } elseif (tep_not_null($width) && empty($height)) {
          $ratio = $width / $image_size[0];
          $height = $image_size[1] * $ratio;
        } elseif (empty($width) && empty($height)) {
          $width = $image_size[0];
          $height = $image_size[1];
        }
      } elseif (IMAGE_REQUIRED == 'false') {
        return false;
      }
    }

    $sizing = ($width . 'x' . $height);

    $im_split = split("=", $name);
    $im = $im_split[1];
//print_r($product_info);
// Do we need to add the pop up link code?
   $urlstr = tep_output_string($src);
   $a = split("/", $urlstr);
   $b = $a[1];
   $g = preg_replace('/ /', '_', $b);
   $convert = '/usr/bin/convert';
   $path = '/var/www/www.angelgenie.com/images/';
   $resized_bg_image = "$convert -resize $sizing -quality 100 '$path$b' $path" . "$width-$g";
   if(!file_exists($path . "$width-$g")){
      system($resized_bg_image);
   }
    if ( $popup ) {
    $image = '<div style="background: url(images/' . $width . '-' . $g . ') no-repeat;"><a href="javascript:popupWindow(\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $product_info['products_id'] . '&image=' . $im ) . '\\')">' . "\
";
    }

    // alt is added to the img tag even if it is null to prevent browsers from outputting
    // the image filename as default


    $image .= '<img name="' . tep_output_string($name) . '" src="' . DIR_WS_IMAGES . 'pixel_trans.gif" border="0" alt="' . tep_output_string($alt) . '"';

    if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (empty($width) || empty($height)) ) {
      if ($image_size = @getimagesize($src)) {
        if (empty($width) && tep_not_null($height)) {
          $ratio = $height / $image_size[1];
          $width = $image_size[0] * $ratio;
        } elseif (tep_not_null($width) && empty($height)) {
          $ratio = $width / $image_size[0];
          $height = $image_size[1] * $ratio;
        } elseif (empty($width) && empty($height)) {
          $width = $image_size[0];
          $height = $image_size[1];
        }
      } elseif (IMAGE_REQUIRED == 'false') {
        return false;
      }
    }


       if (tep_not_null($alt)) {
      $image .= ' title=" ' . tep_output_string($alt) . ' "';
    }


     if (tep_not_null($width) && tep_not_null($height)) {
      $image .= ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';
    }

//    $blank = "/media/trans_over.gif";
//    $blank .= ' width="' . tep_output_string($width) . '" height"' . tep_output_string($height) . '"';

    if (tep_not_null($parameters)) $image .= ' ' . $parameters;

    $image .= '>' . "\
";

    if ( $popup ) {
      $image .= '<br /><br />' . tep_template_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a></div>' . "\
";
    }

$blank = '"/images/trans_over.gif" border="0"';
//echo($blank);


    // Now for the Javascript loading code
    $image .= '<script type="text/javascript"><!-- ' . "\
";
    //$image .= "document['" . tep_output_string($name) . "'].src = '" . tep_output_string($src) . "'" . "\
";
    //$image .= "document['" . tep_output_string($name) . "'].src = '" . $blank . "'" . "\
";
    $image .= "document['" . tep_output_string($name) . "'].src=\\"/images/trans_over.gif\\";";
    $image .= ' //--></script>' ."\
";

    return $image;
  }

Problem is is that there are lots of images showing already with a transparent overlay just that as of yesterday on adding a new one it’s gone weird in IE.

And on a side note yeah I’m a servant to a small colony as well!!!

Topic		Replies	Views
Image overlay not working in IE HTML & CSS	12	3769	October 8, 2014
Fixes and advice for IE issues HTML & CSS	6	582	October 8, 2014
Background image not working in IE HTML & CSS	6	15553	October 8, 2014
jQuery issue with overlay not showing in IE JavaScript	10	3901	December 14, 2010
Some browsers can't see background images HTML & CSS	12	908	May 7, 2010

Trans overlay on background in IE not working

Related topics