Border / Place holder for image in IE7 but not FF

Discussion in 'HTML & Website Design' started by mynetincome.com, May 17, 2009.

0
  1. #1
    I added a border around a my portfolio image slider in my joomla based website. A image place holder appears around it in IE but not FF. The site is local and not on a server yet but i took a snap-shot of it to show you what i'm talking about. included is my associated css. Maybe someone can tell me what i'm doing wrong and why that image place holder is showing up in my header as well as how to make it go away. Thanks for any help. the tag for the image is "slideframe".

    [​IMG]

    CSS:

    /* HEADER
    --------------------------------------------------------- */
    #ja-headerwrap {
    background: #000000;
    color: #CCCCCC;
    line-height: normal;
    height: 390px;
    }

    #ja-header {
    position: relative;
    height: 86px;
    }


    #ja-headslider {
    width: 630px;
    display: block;
    height: 320px;
    position: absolute;
    top: 35px;
    left: 638px;
    z-index: 1;
    }

    img.sliderframe {
    width: 696px;
    display: block;
    background: url(../images/sliderframe2.png) no-repeat;
    height: 386px;
    position: absolute;
    border: none;
    left: -33px;
    top: -33px;
    z-index: -1;

    }


    #ja-header a {
    color: #CCCCCC;
    }

    h1.logo, h1.logo-text {
    margin: 0 0 0 5px;
    top: 175px;
    padding: 0;
    font-size: 180%;
    text-transform: uppercase;
    }

    h1.logo a {
    width: 548px;
    display: block;
    background: url(../images/logo2.png) no-repeat;
    height: 281px;
    position: absolute;
    left: 32px;
    top: 60px;
    z-index: 1;
    }

    h1.logo a span {
    position: absolute;
    top: -1000px;
    }

    h1.logo-text a {
    color: #CCCCCC !important;
    text-decoration: none;
    outline: none;
    position: absolute;
    bottom: 40px;
    left: 5px;
    }

    p.site-slogan {
    margin: 0;
    padding: 0;
    padding: 2px 5px;
    color: #FFFFFF;
    background: #444444;
    font-size: 92%;
    position: absolute;
    bottom: 20px;
    left: 0;
    }

    /* Search */
    #ja-search {
    padding-left: 20px;
    background: url(../images/icon-search.gif) no-repeat center left;
    position: absolute;
    bottom: 15px;
    right: 0;
    }

    #ja-search .inputbox {
    width: 120px;
    border: 1px solid #333333;
    padding: 3px 5px;
    color: #999999;
    background: #444444;
    font-size: 92%;
     
    mynetincome.com, May 17, 2009 IP
  2. lifesgood

    lifesgood Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you copy and paste the source of the html ? You're making it really hard for people to help with a html/css problem when you only give half of the puzzle.
     
    lifesgood, May 17, 2009 IP
  3. mynetincome.com

    mynetincome.com Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    here is my html source
    <?php
    /**
    * @copyright Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved.
    * @license GNU/GPL, see LICENSE.php
    * Joomla! is free software. This version may have been modified pursuant
    * to the GNU General Public License, and as distributed it includes or
    * is derivative of works licensed under the GNU General Public License or
    * other free or open source software licenses.
    * See COPYRIGHT.php for copyright notices and details.
    */

    // no direct access
    defined( '_JEXEC' ) or die( 'Restricted access' );

    include_once (dirname(__FILE__).DS.'/ja_vars.php');

    ?>

    <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">

    <head>
    <jdoc:include type="head" />
    <?php JHTML::_('behavior.mootools'); ?>

    <link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

    <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.script.js"></script>

    <?php if ($tmpTools->getParam('rightCollapsible')): ?>
    <script language="javascript" type="text/javascript">
    var rightCollapseDefault='<?php echo $tmpTools->getParam('rightCollapseDefault'); ?>';
    var excludeModules='<?php echo $tmpTools->getParam('excludeModules'); ?>';
    </script>
    <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.rightcol.js"></script>
    <?php endif; ?>

    <?php if($this->direction == 'rtl') : ?>
    <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template_rtl.css" type="text/css" />
    <?php else : ?>
    <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/menu.css" type="text/css" />
    <?php endif; ?>

    <?php if ($this->countModules('hornav')): ?>
    <?php if ($tmpTools->getParam('horNavType') == 'css'): ?>
    <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
    <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.cssmenu.js"></script>
    <?php else: ?>
    <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja-sosdmenu.css" type="text/css" />
    <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ja.moomenu.js"></script>
    <?php endif; ?>
    <?php endif; ?>

    <?php if ($tmpTools->getParam('theme_header') && $tmpTools->getParam('theme_header')!='-1') : ?>
    <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/styles/header/<?php echo $tmpTools->getParam('theme_header'); ?>/style.css" type="text/css" />
    <?php endif; ?>
    <?php if ($tmpTools->getParam('theme_background') && $tmpTools->getParam('theme_background')!='-1') : ?>
    <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/styles/background/<?php echo $tmpTools->getParam('theme_background'); ?>/style.css" type="text/css" />
    <?php endif; ?>
    <?php if ($tmpTools->getParam('theme_elements') && $tmpTools->getParam('theme_elements')!='-1') : ?>
    <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/styles/elements/<?php echo $tmpTools->getParam('theme_elements'); ?>/style.css" type="text/css" />
    <?php endif; ?>

    <!--[if gte IE 7.0]>
    <style type="text/css">
    .clearfix {display: inline-block;}
    </style>
    <![endif]-->
    <?php if ($tmpTools->isIE6()): ?>
    <!--[if lte IE 6]>
    <script type="text/javascript">
    var siteurl = '<?php echo $tmpTools->baseurl();?>';

    window.addEvent ('load', makeTransBG);
    function makeTransBG() {
    fixIEPNG($E('.ja-headermask'), '', '', 1);
    fixIEPNG($E('h1.logo a'));
    fixIEPNG($$('img'));
    fixIEPNG ($$('#ja-mainnav ul.menu li ul'), '', 'scale', 0, 2);
    }
    </script>

    <style type="text/css">
    .ja-headermask, h1.logo a, #ja-cssmenu li ul { background-position: -1000px; }
    #ja-cssmenu li ul li, #ja-cssmenu li a { background:transparent url(<?php echo $tmpTools->templateurl(); ?>/images/blank.png) no-repeat right;}
    .clearfix {height: 1%;}
    </style>
    <![endif]-->
    <?php endif; ?>

    <style type="text/css">
    #ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
    #ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
    </style>
    </head>

    <body id="bd" class="fs<?php echo $tmpTools->getParam(JA_TOOL_FONT);?> <?php echo $tmpTools->browser();?>" >
    <a name="Top" id="Top"></a>
    <ul class="accessibility">
    <li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
    <li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
    <li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
    <li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
    </ul>

    <div id="ja-wrapper">

    <!-- BEGIN: HEADER -->

    <div id="ja-headerwrap">
    <div id="ja-headslider">
    <img class="sliderframe">
    <jdoc:include type="modules" name="headslider" />
    </div>

    <?php
    $siteName = $tmpTools->sitename();
    if ($tmpTools->getParam('logoType')=='image'): ?>
    <h1 class="logo">

    <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $siteName; ?></span></a>
    </h1>
    <?php else:
    $logoText = (trim($tmpTools->getParam('logoText'))=='') ? $config->sitename : $tmpTools->getParam('logoText');
    $sloganText = (trim($tmpTools->getParam('sloganText'))=='') ? JText::_('SITE SLOGAN') : $tmpTools->getParam('sloganText'); ?>
    <h1 class="logo-text">
    <a href="index.php" title="<?php echo $siteName; ?>"><span><?php echo $logoText; ?></span></a>
    </h1>
    <p class="site-slogan"><?php echo $sloganText;?></p>
    <?php endif; ?>

    <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>

    <?php if($this->countModules('user4')) : ?>
    <div id="ja-search">
    <jdoc:include type="modules" name="user4" />
    </div>
    <?php endif; ?>


    </div>
    <!-- END: HEADER -->

    <!-- BEGIN: MAIN NAVIGATION -->
    <?php if ($this->countModules('hornav')): ?>
    <div id="ja-mainnavwrap">
    <div id="ja-mainnav" class="clearfix">
    <jdoc:include type="modules" name="hornav" />
    </div>
    </div>
    <?php endif; ?>
    <!-- END: MAIN NAVIGATION -->

    <div id="ja-containerwrap<?php echo $divid; ?>">
    <div id="ja-containerwrap2">
    <div id="ja-container">
    <div id="ja-container2" class="clearfix">

    <div id="ja-mainbody<?php echo $divid; ?>" class="clearfix">

    <!-- BEGIN: CONTENT -->
    <div id="ja-contentwrap">
    <div id="ja-content">

    <jdoc:include type="message" />

    <?php if(!$tmpTools->isFrontPage()) : ?>
    <div id="ja-pathway">
    <jdoc:include type="module" name="breadcrumbs" />
    </div>
    <?php endif ; ?>

    <jdoc:include type="component" />

    <?php if($this->countModules('banner')) : ?>
    <div id="ja-banner">
    <jdoc:include type="modules" name="banner" />
    </div>
    <?php endif; ?>

    </div>
    </div>
    <!-- END: CONTENT -->

    <?php if ($this->countModules('left')): ?>
    <!-- BEGIN: LEFT COLUMN -->
    <div id="ja-col1">
    <jdoc:include type="modules" name="left" style="xhtml" />
    </div><br />
    <!-- END: LEFT COLUMN -->
    <?php endif; ?>

    </div>

    <?php if ($this->countModules('right')): ?>
    <!-- BEGIN: RIGHT COLUMN -->
    <div id="ja-col2">
    <jdoc:include type="modules" name="right" style="jarounded" />
    </div><br />
    <!-- END: RIGHT COLUMN -->
    <?php endif; ?>

    </div>
    </div>
    </div>
    </div>

    <?php
    $spotlight = array ('user1','user2','top','user5');
    $botsl = $tmpTools->calSpotlight ($spotlight,99,22);
    if( $botsl ) :
    ?>
    <!-- BEGIN: BOTTOM SPOTLIGHT -->
    <div id="ja-botslwrap">
    <div id="ja-botsl" class="clearfix">

    <?php if( $this->countModules('user1') ): ?>
    <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
    <jdoc:include type="modules" name="user1" style="xhtml" />
    </div>
    <?php endif; ?>

    <?php if( $this->countModules('user2') ): ?>
    <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
    <jdoc:include type="modules" name="user2" style="xhtml" />
    </div>
    <?php endif; ?>

    <?php if( $this->countModules('top') ): ?>
    <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
    <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
    <?php endif; ?>

    <?php if( $this->countModules('user5') ): ?>
    <div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
    <jdoc:include type="modules" name="user5" style="xhtml" />
    </div>
    <?php endif; ?>

    </div>
    </div>
    <!-- END: BOTTOM SPOTLIGHT -->
    <?php endif; ?>

    <!-- BEGIN: FOOTER -->
    <div id="ja-footerwrap">
    <div id="ja-footer" class="clearfix">

    <div id="ja-footnav">
    <jdoc:include type="modules" name="user3" />
    </div>

    <div class="copyright">
    <jdoc:include type="modules" name="footer" />
    </div>

    <div class="ja-cert">
    <jdoc:include type="modules" name="syndicate" />
    <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
    <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
    </a>
    <a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
    <img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
    </a>
    </div>

    <br />
    </div>
    </div>
    <!-- END: FOOTER -->

    </div>

    <jdoc:include type="modules" name="debug" />

    </body>

    </html>
     
    mynetincome.com, May 17, 2009 IP
  4. DinamoXP

    DinamoXP Peon

    Messages:
    5
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    make your website available online. if you are using router open port 80 so I can access your website via your ip addess.

    It would take hours to fix it by just reading and testing the code and I promise you nobody is going to waste their time by doing that..
    We dont have images to view how everything looks like when testing the code.

    Post your ip address and make sure port 80 is open.
     
    DinamoXP, May 17, 2009 IP
  5. mynetincome.com

    mynetincome.com Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    i appreciate your help, but i'm in iraq right now and that would be an even bigger hassle for everyone else because my connection is very slow. thanks again though for your time.
     
    mynetincome.com, May 17, 2009 IP