Jump to content

Archived

This topic is now archived and is closed to further replies.

tistaharahap

Strange Firefox Behaviour

Recommended Posts

Hi guys,

I've been working on a website and I stumbled to a strange Firefox behaviour. The URL is http://children.eleora.com/ and http://www.eleora.com/chr_indo/css/screen.css for the css file. The part where it's wrapped with <div id="image"> won't show images coded with <img> tags. But strangely this only happens in Firefox. With other browsers (IE and Safari), the image shows. That part of the design is supposed to be where the banner for the advertisers are places so you can imagine my stress right now lol. After doing some survey, almost 50% of the website's viewers are using Firefox so it's very important I get this fixed.

Here's the index.php.
[code]
<?php

require_once 'components/template.php';

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<!--
____________________________________________________________
|                                                            |
|    DESIGN + Pat Heard { http://fullahead.org }            |
|      DATE + 2005.11.30                                    |
| COPYRIGHT + Free use if this notice is left in place      |
|____________________________________________________________|

-->

<head>


  <title>{ Children Indonesia } Online FREE Magazine!</title>

  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
  <meta name="author" content="fullahead.org" />
  <meta name="keywords" content="Children Indonesia, Magazine, Children Indonesia Magazine" />
  <meta name="description" content="Versi Online Majalah Children Indonesia" />
  <meta name="robots" content="index, follow, noarchive" />
  <meta name="googlebot" content="noarchive" />

  <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen, print" />
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

</head>


<body>

  <div id="header">

    <div id="menu">

      <ul>
        <li><a href="<?php echo $_SERVER['PHP_SELF'] . "?which=1" ?>" title="Halaman depan" <?php
if($_GET['which'] == NULL || $_GET['which'] == 1)
echo 'class="active"';
?>>HOME</a></li>
        <li><a href="<?php echo $_SERVER['PHP_SELF'] . "?which=2" ?>" title="Anak-anak" <?php
if($_GET['which'] == 2)
echo 'class="active"';
?>>KIDS</a></li>
        <li><a href="<?php echo $_SERVER['PHP_SELF'] . "?which=3" ?>" title="Orangtua" style="width: 8.7em;" <?php
if($_GET['which'] == 3)
echo 'class="active"';
?>>PARENTS</a></li>
        <li><a href="<?php echo $_SERVER['PHP_SELF'] . "?which=4" ?>" title="Aktivitas kami" <?php
if($_GET['which'] == 4)
echo 'class="active"';
?>>ACTIVITIES</a></li>
        <li><a href="<?php echo $_SERVER['PHP_SELF'] . "?which=5" ?>" title="Kontak kami" style="width: 7em;" <?php
if($_GET['which'] == 5)
echo 'class="active"';
?>>CONTACT</a></li>
      </ul>

      <div id="title">
        <h1>super kids creator </h1>
      </div>

    </div>

  </div>

  <div id="content">

    <div id="text">

      <?php 
  $which = $_GET['which'];
if ($which == NULL)
content(1);
else
content($which);
  ?>

    </div>

    <div id="image"><br /><center><?php include "http://www.eleora.com/chr_indo/mad/include.php"; ?></center></script></div>

    <div id="sideBar">

  <p align="center"><img src="images/logo-children.jpg" alt="" width="140" height="46" /></p>
      <h1><span>LINKS</span></h1>

      <div class="sideMenu">
  <?php linksMenu(); ?>
  </div>

      <h1><span>Login</span></h1>

      <form action="./admin/index.php" name="loginForm" method="post"><p>
        <input type="text" name="loginUsername" onfocus="javascript:this.value='';" value="nama"/>
        <input type="password" name="loginPassword" onfocus="javascript:this.value='';"/>
        <input type="submit" value="LOGIN" class="button" />
      </p></form>

      <h1><span>Cari Artikel</span></h1>

      <form action="./pdig/search.php" name="searchForm" method="post"><p>
        <input type="text" name="query_string" value="Cari artikel.." onfocus="javascript:this.value='';"/>
        <input type="submit" name="search" value="Cari!" class="button" />
      </p></form>


    </div>

    <div id="footer">
      <a href="http://eleora.com" title="eleora.com - The Lord's Blueish Light" class="fullAhead"></a>
      <p>&copy; Children-Indonesia.com 2006.<br />
      <a href="mailto:redaksi@children-indonesia.com">redaksi@children-indonesia.com</a></p>
    </div>

  </div>

</body>

</html>
[/code]

Here's the css file.

[code]
/***************************************************
    AUTHOR: Pat Heard ( FullAhead.org )
  TEMPLATE: Greenery
      DATE: 2005.11.30
  COPYRIGHT: none
***************************************************/


/***************************************************
  HTML Element Styles
***************************************************/

body {
  margin: 0; 
  text-align: center;
  font: 0.62em verdana, arial, sans-serif; 
  line-height: 170%;
  color: #282828;
  background: #585858 url(../images/bg_body.jpg) repeat-y top center;
}

p {
  padding-top: 10px !important;
  padding-top: 3px;
  padding-bottom: 10px !important;
  padding-bottom: 3px;
}


a {
  color: #e28fa2;
}

a:visited {
  color: #e28fa2;
}

a:hover {
  color: #ff9d63;
}

#content #editor {
width: 90%;
float: left;
  padding: 10px 5px 20px 20px !important;
  padding: 20px 5px 20px 20px;
}


acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}

input {
/* width: 70%;*/
}

textarea {
  width: 98%;
  /*
    IE specific to eliminate scroll bar when not needed.
    Uncomment if wanted, but it is not valid CSS
   
  scrollbar-3dlight-color : #777;
  scrollbar-arrow-color : #EEE;
  scrollbar-darkshadow-color : #777;
  scrollbar-face-color : #777;
  scrollbar-highlight-color : #777;
  scrollbar-shadow-color : #777;
  scrollbar-track-color : #777;   
  */
}

input,
textarea {
  padding: 1px 3px;
  margin: 5px 0;
  font: 1em verdana, arial, sans-serif;
  color: #EEE;
  background-color: #ff9d63;
  border: 0.5px solid #fff;
}

select {
padding: 1px 3px;
margin: 5px 0;
font: 1em verdana, arial, sans-serif;
color: #EEE;
background-color: #ff9d63;
border: 0.5px solid #fff;
}

/*input:hover,
input:focus,
textarea:hover,
textarea:focus {
  color: #FFF;
  background-color: #999;
  border: 1px solid #EEE;
}*/

h1 {
  clear: both;
  margin: 10px 0;
  font: 700 1em verdana, sans-serif;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #ff9d63 url(../images/rounded_tr.gif) no-repeat top right;
}

h1 span {
  display: block;
  padding: 2px;
  background: url(../images/rounded_br.gif) no-repeat bottom right;
}

#sideBar h1 {
  text-align: right;
  background: #ff9d63 url(../images/rounded_tl.gif) no-repeat top left;
}

#sideBar h1 span {
  display: block;
  padding: 2px;
  background: url(../images/rounded_bl.gif) no-repeat bottom left;
}


#content ol li {
  color: #9BE4FF;
}

#content ol li span {
  color: #EEE;
}

#content ul {
  padding-bottom: 10px;
}

#content ul li {
  list-style-image: url(../images/li_bullet.gif);
}

blockquote { 
  margin: 0;
  background: #686868 url(../images/rounded_tr.gif) no-repeat top right;
}

blockquote span {
  display: block;
  padding: 5px;
  background: url(../images/rounded_br.gif) no-repeat bottom right;
}

/***************************************************
  Layout Element Styles
***************************************************/


#header { 
  width: 100%;
  height: 3em;
  background: #585858 url(../images/bg_header.jpg) repeat-y top center; 
}

/***************************************************
  Header Menu
***************************************************/

#menu {
  width: 767px;
  margin: 0 auto;
  text-align: left; 
}

#menu ul {
  margin: 0;
  padding: 0;
  line-height: normal; 
}

#menu ul li {
  width: 8em;
  display: inline;
  float: left;
  padding-top: 0.8em; 
  list-style: none;
  text-align: center;
}

#menu ul li a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  padding-bottom: 1.0em;
  color: #222;
}

#menu ul li a:hover,
#menu ul li a.active {
  font-weight: bold;
  color: #111;
  background: url(../images/menu_tab.gif) no-repeat bottom center;
}


/***************************************************
  Site Title
***************************************************/

#title {
  padding: 0.6em 55px 0.6em 0;
  margin-right: 0.5em;
  float: right;

}

#title h1 {
  display: inline;
  color:  #222;
  background-color: #ff9d63;
  background-image: none;
}


/***************************************************
Page Content
---------------------------------------------------
1. Left side text
2. Dropdown image
3. Right side bar
***************************************************/


#content { 
  clear: both;
  width: 767px;
  margin: 0 auto;
  text-align: left;
}

#text {
  float: left;
  width: 410px !important;
  width: 437px;
  padding: 10px 5px 20px 20px !important;
  padding: 20px 5px 20px 20px;
}

#image {
  float: left;
  width: 125px; 
  height: 520px;
  vertical-align: top;
  /*background-image:url(../images/plants.jpg);*/
  z-index: 8;
  visibility: visible;
}

#sideBar {
  float: right;
  width: 145px !important;
  width: 160px;
  padding: 10px 15px 20px 0 !important;
  padding: 20px 15px 20px 0;
}


/***************************************************
Sidemenu Styles
***************************************************/

.sideMenu {
  padding: 10px 0;
}

.sideMenu a {
  display: block;
  text-align: right;
  text-decoration: none;
  margin-bottom: 1px; 
}

.sideMenu a span {
  display: block;
  padding: 1px;
}


/***************************************************
Comment Styles
***************************************************/

#comments p {
  padding: 0 5px;
  margin-bottom: 0;
  background: #686868 url(../images/rounded_tl.gif) no-repeat top left;
}

#comments p span.author {
  display: block;
  margin-top: 5px;
  text-align: right;
  font-weight: 700;
}

#comments img {
  margin-top: -1px;
}

#comments a {
  color: #7BD32C;
}

#comments a:visited {
  color: #AAA;
}

#comments a:hover {
  color: #FFF;
}

/***************************************************
Footer
***************************************************/

#footer {
  clear: both;
  float: left;
  width: 500px;
  padding: 10px 20px;
  color: #888;
}

#footer p {
  padding-top: 0 !important;
  padding-top: 10px;
}

a.fullAhead {
  float: left;
  width: 30px;
  height: 34px; 
  margin-right: 10px;
  background: url(../images/logo_fullahead.gif) no-repeat 0 0;
}

a:hover.fullAhead  {
  background-position: -30px 0;
}


/***************************************************
Generic Display Classes
***************************************************/

.center {
  text-align: center;
}

.noPad {
  padding: 0;
  margin: 0;
}

.left {
  float: left;
}

.right {
  float: right;
}

img.left {
  padding: 5px 5px 5px 0;
}

img.right {
  padding: 5px 0 5px 5px;
}

.button {
  width: auto;
  cursor: pointer;
}

.date {
  display: block;
  font-weight: 700;
}
#advertisement{
padding:20px;
}
[/code]

The original code included a background image that I've removed and I added the last 2 statements figuring that it'll show the image which obviously is futile. I hope I can get help for this problem. Thanks in advance.

Share this post


Link to post
Share on other sites
Not sure what the problem is as I can see the Add banner image fine in FF2

Share this post


Link to post
Share on other sites
Hi thanks for the reply...

I tried to open the page in an another computer n another internet connection...it showed the banner...but still with my ibook and my pc, it won't show anything in firefox 1.5.0.7 and 2.0...i'm just afraid that this problem i'm having can occur with someone else's computer...

if you have any idea what i'm experiencing, i would greatly appreciate an input or two...thanks in advance...

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.