[SOLVED] Image disappears when FF browser is refreshed

Voodoo Jai · April 24, 2008

I am tinkering about with CSS and try to create a tabbed effect nav display.

Basically I have 3 tabs that show a div layer when clicked, within one of these tabs I want to display some thumbnails. I have got it working in IE as I want but when I try it in FF and refresh the browser the first thumbnail disappears. I think I have read somewhere about this problem but I can not find the info again. Here is the full code.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/JavaScript">
//here you place the ids of every element you want.
var ids=new Array('pictures','video','text','misc');

function switchid(id){	
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
	hidediv(ids[i]);
}		  
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
	document.getElementById(id).style.display = 'none';
}
else {
	if (document.layers) { // Netscape 4
		document.id.display = 'none';
	}
	else { // IE 4
		document.all.id.style.display = 'none';
	}
}
}

function showdiv(id) {
//safe function to show an element with a specified id
	  
if (document.getElementById) { // DOM3 = IE5, NS6
	document.getElementById(id).style.display = 'block';
}
else {
	if (document.layers) { // Netscape 4
		document.id.display = 'block';
	}
	else { // IE 4
		document.all.id.style.display = 'block';
	}
}
}
</script>

<style type="text/css">
<!--
.tabs {
background-image: url(images/footer-1.png);
height: 25px;
width: 100px;
background-repeat: no-repeat;
}
-->
</style>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}	
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 2px;
}
</style>
</head>

<body>
<p>Try these: <a href="javascript:switchid('pictures');">View pictures</a>
<a href="javascript:switchid('video');">View videos</a>
<a href="javascript:switchid('text');">View blog</a>
<a href="javascript:switchid('misc');">Misc</a></p>
<div class="tabs"><a href="javascript:switchid('pictures');">View pictures</a></div>
<p> </p>
<hr/>

<div id='pictures' style="display:block; width: 600px; background-color: #FFFF99; height: 400px;">
	<h2>Sample text:</h2>
	<p><b>Jean-Paul Sartre, (1905-1980)</b> born in Paris in 1905, studied at the Ecole 
	Normale Superieure from 1924 to 1929 and became Professor of Philosophy at Le Havre
	in 1931. With the help of a stipend from the Institut Francais he studied in Berlin
	(1932) the philosophies of Edmund Husserl and Martin Heidegger. After further teaching
	at Le Havre, and then in Laon, he taught at the Lycee Pasteur in Paris from 1937 to 1939.
	Since the end of the Second World War, Sartre has been living as an independent writer. </p>
	  <div class="galleryimages">
<div class="img">
<a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
          </div>
</div>

<div id='video' style="display:none; width: 600px; background-color: #FFFF99;">
	<h3>More on JPS</h3>
	<p>The conclusions a writer must draw from this position were set forth in 
	" Qu'est-ce que la litterature?" (What Is Literature?), 1948: literature is
	no longer an activity for itself, nor primarily descriptive of characters 
	and situations, but is concerned with human freedom and its (and the author's)
	commitment. Literature is committed; artistic creation is a moral activity. Jean-Paul Sartre, (1905-1980) born in Paris in 1905, studied at the Ecole 
	Normale Superieure from 1924 to 1929 and became Professor of Philosophy at Le Havre
	in 1931. With the help of a stipend from the Institut Francais he studied in Berlin
	(1932) the philosophies of Edmund Husserl and Martin Heidegger. After further teaching
	at Le Havre, and then in Laon, he taught at the Lycee Pasteur in Paris from 1937 to 1939.
	Since the end of the Second World War, Sartre has been living as an independent writer.</p>
</div>

<div id='text' style="display:none; width: 600px; background-color: #FFFF99;">
	<p>Yet more content. This can be anything in here, html, pictures.. flash ...
	Jean-Paul Sartre, (1905-1980) born in Paris in 1905, studied at the Ecole 
	Normale Superieure from 1924 to 1929 and became Professor of Philosophy at Le Havre
	in 1931. With the help of a stipend from the Institut Francais he studied in Berlin
	(1932) the philosophies of Edmund Husserl and Martin Heidegger. After further teaching
	at Le Havre, and then in Laon, he taught at the Lycee Pasteur in Paris from 1937 to 1939.
	Since the end of the Second World War, Sartre has been living as an independent writer.</p>
</div>

<div id='misc' style="display:none; width: 600px; background-color: #FFFF99;">
	<h3>This content is in a div with id "thicanbeanything"</h3>	
		<p>Sartre is one of those writers for whom a determined philosophical position is the 
		centre of their artistic being. Although drawn from many sources, for example, 
		Husserl's idea of a free, fully intentional consciousness and Heidegger's existentialism,
		the existentialism Sartre formulated and popularized is profoundly original. 
		Its popularity and that of its author reached a climax in the forties, and Sartre's 
		theoretical writings as well as his novels and plays constitute one of the main inspirational
		sources of modern literature. In his philosophical view atheism is taken for granted; the
		"loss of God& is not mourned. Man is condemned to freedom, a freedom from all authority,
		which he may seek to evade, distort, and deny but which he will have to face if he is to
		become a moral being. The meaning of man's life is not established before his existence.
		Once the terrible freedom is acknowledged, man has to make this meaning himself, has to 
		commit himself to a role in this world, has to commit his freedom. And this attempt to
		make oneself is futile without the &solidarity& of others.</p>
</div>
</body>
</html>

the image that disappears is the first one of this piece of code

<div class="galleryimages">
<div class="img">
<a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="#"><img src="images/sample.jpg" alt="Sample" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
          </div>
</div>

what is the solution to this problem in FF

Many thanks

VoodooJai

Voodoo Jai · April 24, 2008

I forgot to say that the image disappears and the alt tag takes the form of the link.

Strange

haku · April 24, 2008

Without a link to a live page, its almost impossible to say.

As a side note, you should always code in a standards-compliant browser (FF, Safari, Opera) then after you get it working, adjust it for IE, as it's a non-standards compliant browser.

Voodoo Jai · April 24, 2008

I am coding in fire fox but can not get it to display correctly within the div tag if I place it outside the tag it works and refreshes as intended. Where do I find details about compliant browser codeing.

haku · April 24, 2008

There are lots of books out there on CSS, most of them are probably pretty good. Check out some reviews on amazon.com to see what people say.

Your problem: as I said before, without a link to a live site, it's hard to say. But, I would say there is a good chance your code isn't valid. You can check your code's validity here: http://validator.w3.org/

Fix any validation errors that come up, and then come back here.

Voodoo Jai · April 24, 2008

I have validated the page using the link and only a few probs showed up I fixed them but the main problem still persists.

I think it may be to do with the CSS classes because of the nesting of the div tags, not sure.

haku · April 24, 2008

Could be. Without a live link its hard to say.

Voodoo Jai · April 24, 2008

Do you mean a link for you to go to on the web or because the img only links to the same page via #

haku · April 24, 2008

A link for us to go to.

Voodoo Jai · April 24, 2008

Here is a live link and the problem shows when you refresh it in Firefox.

http://76.163.15.45/Untitled-7a.html

Hope you can help me.

haku · April 24, 2008

I checked out the page, but it seems fine to me. I tried refreshing, clicking on the links and hard refreshing, but the image was always there.

Voodoo Jai · April 25, 2008

Its not working for my browser (Firefox/2.0.0.14) even on the remote server its the same. I tried it from a different PC but still using FF and it was the same. What version of FF did you try.

Thanks for your patience

haku · April 25, 2008

I just tried it on my work PC (I tried it at home earlier) and again I couldn't see the problem.

I'm using Firefox/2.0.0.14 on WIN XP now. I don't know which firefox I am using at home, but I suspect its the same.

Maybe I'm not understanding the problem? Which image exactly is it that isn't showing up?

Voodoo Jai · April 25, 2008

Hi again thanks again for your time this problem is annoying.

I have put some details on the page explaining the effect and added another row of images to show how the top row of images should look.

http://76.163.15.45/Untitled-7a.html

Voodoo Jai · April 25, 2008

Hi again thanks again for your time this problem is annoying.

I have put some details on the page explaining the effect and added another row of images to show how the top row of images should look.

http://76.163.15.45/Untitled-7a.html

After some more investigation I find that the first image used is not visible but if I right click and view image it shows it. I think the problem may be a bug in FF.

I placed the thumbnail gallery at the start of the page and again the image fails to show.

haku · April 25, 2008

I still see it even when the page is refreshed! (back at home now).

Someone else want to check it out and see if they can replicate the problem?

Voodoo Jai · April 25, 2008

I have found out the solution to my problem, at last.

It appears to be the FireFox plugin (RealPlayer Browser Plugin 1.0)

It seems to be stopping the first image from being viewed using javascript in my code, if you have the same problem then try this.

VoodooJai

Voodoo Jai · April 25, 2008

THANK YOU all for your help, much appreciated

VoodooJai

haku · April 25, 2008

Glad you got it solved! I guess that explains why I wasn't able to replicate it - I don't use that plugin.

Sign In

[SOLVED] Image disappears when FF browser is refreshed

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information