We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 14779
    • 256 Posts
    I have set the height and width params, as well as the other items you mentioned. The url to the site is fisherpublishinghouse.com
    I would appreciate it if you would take a look and compare it to the template below:
    I have highlighted the image tags


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <!-- DW6 -->
    <head>
    <!-- Copyright 2006 Fisher Publishing House. All rights reserved. -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <LINK REV="made" href="mailto:[email protected]">
    <META NAME="keywords" CONTENT="Rare books, out-of-print books, out of print books, book publisher, christian books family, classic books, classic reprints.">
    <META NAME="description" CONTENT="A publisher of rare and out-of-print books. Specializing in works by Christian writers.">
    <META NAME="author" CONTENT="Joshua Fisher">
    <META NAME="ROBOTS" CONTENT="ALL">
    <title>[(site_name)] - [*pagetitle*]</title>
    <style type="text/css">
    <!--
    body{
    font-family: Arial,sans-serif;
    color: #000000;
    line-height: 1.166;
    margin: 0px;
    padding: 0px;
    width: 84%;
    background-image: url(assets/images/background.png)
    }

    a:link, a:visited, a:hover {
    color: #1c5235;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }
    /* overrides decoration from previous rule for hovered links */

    h1, h2, h3, h4, h5, h6 {
    font-family: Arial,sans-serif;
    margin: 0px;
    padding: 0px;
    }

    h1{
    font-family: Verdana,Arial,sans-serif;
    font-size: 120%;
    color: #334d55;
    }

    h2{
    font-size: 114%;
    color: #006699;
    }

    h3{
    font-size: 100%;
    color: #334d55;
    }

    h4{
    font-size: 100%;
    font-weight: normal;
    color: #333333;
    }

    h5{
    font-size: 100%;
    color: #334d55;
    }

    ul{
    list-style-type: square;
    }

    ul ul{
    list-style-type: disc;
    }

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

    label{
    font: bold 100% Arial,sans-serif;
    color: #334d55;
    }


    /***********************************************/
    /* Layout Divs */
    /***********************************************/

    #masthead{
    margin: 0;
    padding: 10px 0px;
    border-bottom: 1px solid #cccccc;
    width: 100%;
    align: center;
    }


    #content{
    float:right;
    width: 90%;
    margin: 0;
    padding: 0 3% 0 0;
    }


    /***********************************************/
    /*Component Divs */
    /***********************************************/

    #siteName{
    margin: 0px;
    padding: 0px 0px 10px 10px;
    }


    /*************** #pageName styles **************/

    #pageName{
    padding: 0px 0px 10px 10px;
    }


    /************* #globalNav styles **************/

    #globalNav{
    color: #cccccc;
    padding: 0px 0px 0px 10px;
    white-space: nowrap;
    }
    /* ’nowrap’ prevents links from line-wrapping if there are too many to fit in one line
    this will force a horizontal scrollbar if there isn’t enough room for all links
    remove rule or change value to ’normal’ if you want the links to line-wrap */

    #globalNav img{
    display: block;
    }

    #globalNav a {
    font-size: 90%;
    padding: 0px 4px 0px 0px;
    }


    /************* #breadCrumb styles *************/

    #breadCrumb{
    font-size: 80%;
    padding: 5px 0px 5px 10px;
    }


    /************** .feature styles ***************/

    .feature{
    padding: 0px 0px 10px 10px;
    font-size: 80%;
    }

    .feature h3{
    padding: 30px 0px 5px 0px;
    text-align: center;
    }

    .feature img{
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0 5px 5px 0;
    }
    /* adjust margins to change separation between the feature image and text flowing around it */


    /************** .story styles *****************/

    .story{
    clear: both;
    padding: 10px 0px 0px 10px;
    font-size: 80%;
    }

    .story p{
    padding: 0px 0px 10px 0px;
    }


    /************* #siteInfo styles ***************/

    #siteInfo{
    clear: both;
    border: 1px solid #cccccc;
    font-size: 75%;
    color: #cccccc;
    padding: 10px 10px 10px 10px;
    margin-top: 0px;
    }
    /* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
    the bottom border of the navBar in cases where they "touch" */

    #siteInfo img{
    padding: 4px 4px 4px 0px;
    vertical-align: middle;
    }


    /************* #search styles ***************/

    #search{
    padding: 5px 0px 5px 10px;
    border-bottom: 1px solid #cccccc;
    font-size: 90%;
    }

    #search form{
    margin: 0px;
    padding: 0px;
    }

    #search label{
    display: block;
    margin: 0px;
    padding: 0px;
    }


    /*********** #navBar link styles ***********/

    #navBar ul a:link, #navBar ul a:visited {display: block;}
    #navBar ul {list-style: none; margin: 0; padding: 0;}

    /* hack to fix IE/Win’s broken rendering of block-level anchors in lists */
    #navBar li {border-bottom: 1px solid #EEE;}

    /* fix for browsers that don’t need the hack */
    html>body #navBar li {border-bottom: none;}


    /*********** #sectionLinks styles ***********/

    #sectionLinks{
    position: relative;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #cccccc;
    font-size: 90%;
    }

    #sectionLinks h3{
    padding: 10px 0px 2px 10px;
    }

    #sectionLinks a:link{
    padding: 2px 0px 2px 10px;
    border-top: 1px solid #cccccc;
    width: 100%;
    voice-family: "\"}\"";
    voice-family:inherit;
    width: auto;
    }

    #sectionLinks a:visited{
    border-top: 1px solid #cccccc;
    padding: 2px 0px 2px 10px;
    }

    #sectionLinks a:hover{
    border-top: 1px solid #cccccc;
    background-color: #dddddd;
    padding: 2px 0px 2px 10px;
    }



    /*********** .relatedLinks styles ***********/

    .relatedLinks{
    margin: 0px;
    padding: 0px 0px 10px 10px;
    font-size: 90%;
    }

    .relatedLinks h3{
    padding: 10px 0px 2px 0px;
    }


    /************** #advert styles **************/

    #advert{
    padding: 10px 0px 0px 10px;
    font-size: 80%;
    border-top: 1px solid #cccccc;
    }

    #advert img{
    display: block;
    }


    /************** #headlines styles **************/

    #headlines{
    margin: 0px;
    padding: 10px 0px 20px 10px;
    font-size: 80%;
    }

    #headlines p{
    padding: 5px 0px 5px 0px;
    }
    #Header {
    position:absolute;
    width:982px;
    height:192px;
    z-index:3;
    left: 0;
    top: 0;
    }
    #TopNavlink {
    position:absolute;
    width:356px;
    height:41px;
    z-index:5;
    left: 207px;
    top: 128px;
    }
    #Footer {
    position:absolute;
    width:982px;
    height:190px;
    z-index:4;
    left: 0;
    top: 504px;
    }
    #Layer4 {
    position:absolute;
    width:345px;
    height:24px;
    z-index:7;
    left: 564px;
    top: 595px;
    }
    #Layer5 {
    position:absolute;
    width:230px;
    height:21px;
    z-index:6;
    left: 698px;
    top: 633px;
    }
    #Layer6 {
    position:absolute;
    width:204px;
    height:18px;
    z-index:5;
    left: 699px;
    top: 651px;
    }
    #Content {
    position:absolute;
    width:664px;
    height:251px;
    z-index:1;
    left: 181px;
    top: 253px;
    overflow: auto;
    visibility: inherit;
    }
    .style3 {font-size: x-small}
    .style4 {font-size: 14px}
    #leftsidebar {
    position:absolute;
    width:182px;
    height:255px;
    z-index:2;
    top: 246px;
    left: 0;
    }
    #Layer1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:5;
    }



    -->
    </style></head>

    <body><table width="99%" height="625" border="0">
    <tr>
    <th height="247" colspan="3" scope="col"><img src="[(base_url)]assets/images/FPH Banner+Border.png" width="613" height="245" border="0" align="left" usemap="#Map2"></th>
    </tr>
    <tr>
    <td width="16%" height="150">&nbsp;</td>
    <td width="74%">[*content*]</td>
    <td width="10%">&nbsp;</td>
    </tr>
    <tr>
    <td height="220" colspan="3"><img src="[(base_url)]assets/images/FPH Corner 126.png" width="425" height="218" border="0" align="right" usemap="#Map"></td>
    </tr>
    </table>

    <map name="Map"><area shape="rect" coords="3,112,67,128" href="#"><area shape="rect" coords="83,113,141,128" href="#"><area shape="rect" coords="153,110,253,126" href="#"><area shape="rect" coords="263,111,341,127" href="[~6~]"><area shape="rect" coords="202,164,339,173" href="http://www.modxcms.com">
    </map>
    <!-- This Map is for the TOP Banner Graphic
    The First listing is For the Home page Link -->
    <map name="Map2"><area shape="rect" coords="193,130,236,142" href="[~1~]">
    <area shape="rect" coords="244,127,277,141" href="[~40~]">
    <area shape="rect" coords="290,128,322,142" href="[~46~]">
    <area shape="rect" coords="330,129,368,140" href="#"><area shape="rect" coords="375,128,463,140" href="#"><area shape="rect" coords="476,129,553,139" href="http://www.a-free-guestbook.com/guestbook.php?username=fph">
    </map>
    <h1 align="center" id="siteName">&nbsp;</h1>
    <!-- end masthead -->
    </body>
    </html>
      PM me to find out how you can get a FREE ipad 2!
      • 7455
      • 2,204 Posts
      You use the png in css
      css files if not a document in mod is not parsed by the parser so the plugin will have no effect on the png listed in the css file.

      FPH Corner 126.png should work
        follow me on twitter: @dimmy01
        • 14779
        • 256 Posts
        Please forgive my ignorance, but what do you mean ’cdd’
        Do I have to make the CSS file a seperate ’chunk’, and then include that tag in my template?
          PM me to find out how you can get a FREE ipad 2!
          • 7455
          • 2,204 Posts
          sorry my bad was css

          what I did for my llatest projext is that I took all the png parts out of the external css and put that in a chunk that I place in the head of the template that way the pngfiles get parsed I also noticed that backrouns on tables/cels that are directly in the source are not parsed by the plugin so you schould give the tr a class or id and style it in css and then put that also in the chunk.

          take a look here www.1-vision.nl
          I used some external stylesheets and 1 chunk to put the png part of the css in the head of the template

          hope this helps

          Dimmy
            follow me on twitter: @dimmy01
            • 4273
            • 356 Posts
            Am I understanding this correctly

            1. the png format needs to be png-24 in order for the plug in to work how about png-8 ?

            2. also it sounds like if the png images are called via the CSS then the plugin will not work with this ?

            they need to get busy in making all things work with the stylesheet, having images in the page itself is so primitive and what they did 100’s of years ago he he
              SMF Bookmark Mod - check it out
              http://mods.simplemachines.org/index.php?mod=350
              • 17883
              • 1,039 Posts
              1. the png format needs to be png-24 in order for the plug in to work how about png-8 ?

              Of course, PNG-8 has no alpha transparency.

              2. also it sounds like if the png images are called via the CSS then the plugin will not work with this ?

              Yes, because the Stylesheet isn´t parsed by the plugin.

              they need to get busy in making all things work with the stylesheet, having images in the page itself is so primitive and what they did 100’s of years ago he he

              Tell that Mr. Gates wink
              • Wouldn’t the plugin work if you’re using a document as a css file?
                  Studying MODX in the desert - http://sottwell.com
                  Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                  Join the Slack Community - http://modx.org
                  • 7455
                  • 2,204 Posts
                  Quote from: sottwell at Apr 28, 2006, 05:54 PM

                  Wouldn’t the plugin work if you’re using a document as a css file?

                  it does but not all ie versions realy like this...
                    follow me on twitter: @dimmy01
                    • 33372
                    • 1,611 Posts
                    The best way that I’ve found to use transparent PNGs in CSS is to run the M$ Alpha filter in the stylesheet, like so:
                    body{
                       font-family: Arial,sans-serif;
                       color: #000000;
                       line-height: 1.166;   
                       margin: 0px;
                       padding: 0px;
                        width: 84%;
                       background-image: url(assets/images/background.png);
                       /* ieWin only code */
                       _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/images/background.png');
                       _background-image:none;
                       }
                    

                    However you can’t always get links to work overtop of PNG images with that filter applied unless you get even more tricky (see http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217 for examples). If you have problems with links not functioning then you need to use nested DIVs to work around it (I can send you an example if you like). Only IE-Windows pays attention to CSS declarations with a _ at the beginning, so other browsers are not affected.

                    You can also a PHP-scripted CSS file to only add those lines to IE 5.5/6, which would be worth doing in my opinion because those filters are SLOW to load.

                    Note that (for no good reason) the path to your PNG in the filter is from the root of your site (or wherever the page is located) and NOT from the directory that contains the CSS file (so the paths to the PNG may differ in the two places it’s declared if your CSS file is in the assets directory).

                    Also: Do you really need a transparent PNG for the BODY background? Seems like you could use a GIF for that. I mostly use transparent PNGs when they will be overtop of other things and I don’t know in advance what those are).

                    The most reliable way that I’ve found to use transparent PNGs within the page code myself is here: http://homepage.ntlworld.com/bobosola/index.htm. You can just add the link to the external JavaScript file to your header and then use PNGs as you would any other image from then on. Note that there’s a separate hack for image maps, however (which I haven’t personally tested).
                      "Things are not what they appear to be; nor are they otherwise." - Buddha

                      "Well, gee, Buddha - that wasn&#39;t very helpful..." - ZAP

                      Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options
                      • 33372
                      • 1,611 Posts
                      Quote from: sottwell at Apr 28, 2006, 05:54 PM

                      Wouldn’t the plugin work if you’re using a document as a css file?
                      The Dean Edwards code seems to both replace PNG background images with the M$ filter code and also dynamically add the filter code to PNG image tags in your HTML. But the background replacement code will only work if the external CSS file is in the same directory as your index file. If it’s not then the path to the image will not be written correctly if you use relative paths (so use full paths or put your CSS file in the root to make it work).
                        "Things are not what they appear to be; nor are they otherwise." - Buddha

                        "Well, gee, Buddha - that wasn&#39;t very helpful..." - ZAP

                        Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options