Strange Firefox Behaviour

tistaharahap · October 30, 2006

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">



<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>© 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.

wildteen88 · October 30, 2006

Not sure what the problem is as I can see the Add banner image fine in FF2

tistaharahap · October 31, 2006

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...

Sign In

Strange Firefox Behaviour

Recommended Posts

tistaharahap

Link to comment

Share on other sites

wildteen88

Link to comment

Share on other sites

tistaharahap

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information