0
Welcome Guest! Login
0 items Join Now

adding the ie png behavior fix to rockettheme templates?

Last Post
Search Topic

  • adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • I posted a similar post in the vortex forum because that's the template I am on at the moment trying to do this to, however, I did realize that this pertains to all of the templates of rockettheme, so it's probably better suited for here. There is a fix for the ie png transparency problem by way of adding a line of code into the header area of your index page. However, since the coding of normal html pages and those of a rockettheme/joomla template can differ quite a bit, I cannot quite figure out where the code needs to be added. This is the page where the fix is found: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html and in there they say to implement this, you need to:

      The usage is really simple. All you need to do is to add the png behavior to the image element.
      <style type="text/css">
 
img {
&nbsp;  behavior: url("pngbehavior.htc");
}
 
</style>

      However, on template files, the style type isn't really setup like that. It looks more like this:
      <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/slimbox/slimbox.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/<?php echo $tstyle; ?>.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

      So, how does that translate? Where in this code would I add what needs to be added in order to fix the png transparency issue?

      Thank you for any help you can offer,
      David Henderson
    #46803
    • GollumX's Avatar
    • GollumX
    • Elite Rocketeer
    • Posts: 2817
    • Thanks: 0

    Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • I would stick the following at the top of your template_ie6.css file :
      img {
&nbsp;  behavior: url("pngbehavior.htc");
}
    • Say no to Internet Explorer 6.
      twitter.com/mark_up
    #46808

  • Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • Well I made my template_ie6.css file this:
      /** IE6 is a hunk of crap!!! don't ask me why this is needed **/
 
img {
&nbsp;  behavior: url("pngbehavior.htc");
}
 
#mainbody,
#header,
#footer-mods {
     float: left;
}
 
div.moduletable,
div.moduletable-hilite1,
div.moduletable-hilite2,
div.moduletable-hilite3,
div.moduletable-hilite4,
div.bodyhead {
     height:1%;
}
 
div.moduletable ul{
     margin-left: 0px;
}

      and I added the blank.gif and the pngbehavior.htc files to the templates/templatename/css folder so that it would be in the same directory liek the page said, but it did nothing, page still looks the same in ie6 with the grey boxes where it should be transparent. I also added those 2 files into the templates/template name directory jsut incase, but that didn't help either. Thanks for the suggestion though:)

      I'm steadily plugining away at this while checking back here for replies, so hopifully a solution will come about from one end or the other:)

      Thanks,
      David Henderson

      Update: Ok, so I tried adding those 2 fiels into the root directory of my site, and that made a slight difference. Now the transparent png's work in the content. So basically, now I am where I was when I was using the ultimate png fix mambot. However, the images that are in my template and are not assigned in the content still have the problem. Anyone know what special thing I have to do to get to them?
    • Last Edit: 18 years 1 month ago by William E Dooley.
    #46811

  • Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • OK, so I could have also added the whole line:
      <style type="text/css">
 
img {
&nbsp;  behavior: url("pngbehavior.htc");
}
 
</style>

      anywhere in the index.php file before the </head> line and that works also. However, all of these only seem to fix the png transparency problems in the content. None of them fix it for the images that are in the template. The only reason this is a big problem for me is because on ie6 or below, I am missing 2 vital parts because of this problem. There is no my account button and there is no shopping cart!LOL So I am back to hack away at this and see what I can do to get it to work for them template images. If anyone has any suggestions on how to get this to effect those also, please speak freely:) I will try anything:)

      Thanks,
      David Henderson
    #46817

  • Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • HOLD THE PHONE!:) Ok, I misstated the problem. It is not the images in my template that are not being fixed. It is images in my modules! I have a customized search button in my product search module that uses png transparency, and that is not effected by this fix. Also the login button I made with roudned edges is not effected, but that is the rt login module. And the cart module not showing up and the my accoutn button not showing up, those are all modules also! So I need to figure out how to get this to effect modules. Going to go and try adding this line into my module code!LOL If you have any suggestions, lay them on me:)

      Thanks,
      David Henderson
    #46819

  • Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • So nobody here knows how to get the ie png transparency fix to effect the modules also? What do you all do? I am considering just making those images as a gif now I suppose, if there is no way to fix the problem when it is a png:( If anyone has gotten any of the different png transparency in ie fixes to work on their modules, please let me know how:)

      Thanks,
      David Henderson
    #47525
    • GollumX's Avatar
    • GollumX
    • Elite Rocketeer
    • Posts: 2817
    • Thanks: 0

    Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • doesn't sound like a modules problem. your custom buttons probably have "custom names" as well :)

      what are the id's of those custom buttons?

      perhaps something like this will fix the problem:
      img,
.button img,
#productsearchbutton img,
#shoppingcartbutton img,
#accountloginbutton img {
&nbsp;  behavior: url("pngbehavior.htc");
}

      Am i not making sense? I've not slept in 18hrs.
    • Say no to Internet Explorer 6.
      twitter.com/mark_up
    #47529

  • Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • I just made an image of a little green bubble like guy and some text that says "My Account" next to it. Then I clicked new module, and down in the editor inserted the image and then linked it to the my accounts page. That's all I did to make the module. As for the other ones, one is a customized virtuemart cart module and the other is a slightly modified virtuemart search module.

      On top of my problem with the png transparency in IE, now I also have a problem with the positioning of the 2 modules that are in my top module position, the my accounts and the cart modules. The are not showing up on the page in IE and I think it somehow has something to do with FF and IE seeing positioning differently. In IE 7 the cart image shows up, but the empty cart text does not, and the my account sdoesn't show up at all. Now for the cart module, I gave the cart module a module suffix and gave the cart a div class so that I could position it seperately. The my accounts module and the cart module are both positioned default, then I had to give the cart a -5px in the top field to get it wher eI Wanted it. Now in IE only the cart shows up, so it seems like perhaps the modules themselves are too low and are below the top module field of view, but since the cart image has a negative value in the top spot it shows up. That make any sense? This is all just a theory at the moment.

      Thanks,
      David Henderson

      P.S. I'll try and make sense of what you suggested gollum and give it a try. Thanks for the advice:)
    #47601
    • GollumX's Avatar
    • GollumX
    • Elite Rocketeer
    • Posts: 2817
    • Thanks: 0

    Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago 
    • img,
.button img,
#modulesuffixhere img {
&nbsp;  behavior: url("pngbehavior.htc");
}

      Have you tried using the DOM inspector in IE7?... they have an OK web developer toolbar.. not as good as the FF one, but the DOM inspector helps alot. If only there was a DOM inspector for IE6 as well web design would be much easier.
    • Say no to Internet Explorer 6.
      twitter.com/mark_up
    #47712

  • Re: adding the ie png behavior fix to rockettheme templates?

    Posted 18 years 1 month ago
    • Are the images quite intense?
      lots of gradients and colors?
      If they're not too intense:
      Any chance that you can export them as 8bit png. with index transparency you wont need this extra script at all.....Internet exploder6 will display them properly......

      Got a url to look at it or is it on your test box?
    • Do not go where the path may lead, go instead where there is no path and leave a trail.
    #47714

Time to create page: 0.075 seconds