Solved

Hidden visible -position of div in firefox and explorer

Posted on 2008-06-22
12
820 Views
Last Modified: 2011-10-19
Hello experts.
I have a table with three thumbs and the big image in the center.
with a script i change the big image when rollover(mouseover) the thumbs.
I use div tag for the big image.
I have noticed that the images appear in different postion in firefox and explorer.
How can i solve the problem so that the images will be shown in the same place in all the browsers
here is the code
<script type="text/javascript">
function changeImage(obj){
                
                document.getElementById("imageField5").src = obj.value;
                
        }
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
</script>
<style type="text/css">
<!--
#apDiv1 {
        position:absolute;
        width:298px;
        height:223px;
        z-index:1;
        visibility: visible;
        left: 566px;
        top:220px;
}
#apDiv2 {
        position:absolute;
        width:298px;
        height:223px;
        z-index:2;
        visibility: hidden;
        left: 566px;
        top:220px;
}
#apDiv3 {
        position:absolute;
        width:298px;
        height:223px;
        z-index:3;
        visibility: hidden;
        left: 566px;
        top:220px;;
}
-->
</style>
<table cellpadding="0" cellspacing="0" class="EmailTable">
                            <tr>
                              <td width="55"><input name="imageField"type="image" id="imageField" onmouseover="MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','hide')"  value="images/thumbs/Photo1"src="images/thumbs/Photo1" width="66" height="50" />
                              </td>
                              <td rowspan="4">
                              <div id="apDiv1">
                              <input name="imageField5" type="image"  id="imageField5" src="images/Photo1"  width="298" height="223" /></div>
                                 
                              <div id="apDiv2">  
                              <input name="imageField5" type="image"  id="imageField5" src="images/Photo2>"  width="298" height="223" /> </div>
                              
                              
                               
                               
                                <div id="apDiv3">
                              <input name="imageField5" type="image" id="imageField5" src="images/Photo3"  width="298" height="223" /></div>  </td>
                  </tr>
                            <tr>
                              <td><input name="imageField2"type="image" id="imageField2" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide')"  value="images/thumbs/Photo2"src="images/thumbs/Photo2"  width="66" height="50" />
                              </td>
                            </tr>
                            <tr>
                              <td><input name="imageField3"type="image"  id="imageField3" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','hide','apDiv3','','show')"  value="images/thumbs/Photo3"src="images/thumbs/Photo3"  width="66" height="50" />
                             </td>
                            </tr>
                            <tr>
                              <td><form id="form1" name="form1" method="post" action="">
                                <input name="imageField4" type="image" class="imagefieldPhotoDetail" id="imageField4" src="img/car1.gif"  width="66" height="50" />
                              </form>                              </td>
                            </tr>
                          </table>

Open in new window

0
Comment
Question by:Panos
  • 6
  • 6
12 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 21840247
Hello,

there is an error here: see the > in the src

<input name="imageField5" type="image"  id="imageField5" src="images/Photo2>"  width="298" height="223" /> </div>

----

the position problem might be fixed by adding

* {
margin:0;padding:0;
}

to your styles

Cheers
Steggs
0
 
LVL 2

Author Comment

by:Panos
ID: 21840950
Hi Steggs.
Here is the new CSS:
<style type="text/css">
<!--
#apDiv1 {
      position:absolute;
      width:298px;
      height:223px;
      z-index:1;
      visibility: visible;
      left: 584px;
      top:220px;
    margin:0;padding:0;

}
#apDiv2 {
      position:absolute;
      width:298px;
      height:223px;
      z-index:2;
      visibility: hidden;
      left: 584px;
      top:220px;
      margin:0;padding:0;
}
#apDiv3 {
      position:absolute;
      width:298px;
      height:223px;
      z-index:3;
      visibility: hidden;
      left: 584px;
      top:220px;
      margin:0;padding:0;
}
-->
</style>
but the problem is still there.
Can i have in my css text the possibility for IE to use another style?
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21840976
no.. the css should be like this:

<style type="text/css">
<!--

* {
padding:0;margin;
}

#apDiv1 {
      position:absolute;
      width:298px;
      height:223px;
      z-index:1;
      visibility: visible;
      left: 584px;
      top:220px;
    margin:0;padding:0;

}
#apDiv2 {
      position:absolute;
      width:298px;
      height:223px;
      z-index:2;
      visibility: hidden;
      left: 584px;
      top:220px;
      margin:0;padding:0;
}
#apDiv3 {
      position:absolute;
      width:298px;
      height:223px;
      z-index:3;
      visibility: hidden;
      left: 584px;
      top:220px;
      margin:0;padding:0;
}
-->
</style>
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 30

Expert Comment

by:Steggs
ID: 21840978
Also, make sure your page has a strict doctype
0
 
LVL 2

Author Comment

by:Panos
ID: 21841019
Hi  Steggs.
Here is the type:
<!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">
I have tried the new css and the result is he same.
To have the same result in explorer i must change the css to:
left: 570px;
top:225px; for each #apdiv
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21841478
is the page online?

try a strict doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0
 
LVL 2

Author Comment

by:Panos
ID: 21841895
Hi Steggs.
here i'm back.
The result is the same.
I have create another test page and i have the same problem.
Look at the two screenshots
firefoxandexplorer.gif
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21841964
"is the page online?"

if so.. try putting it through the html validator and fix any errors http://validator.w3.org/
0
 
LVL 2

Author Comment

by:Panos
ID: 21845238
Hi Steggs.
(the page is not online)
I tried the validator.org and it shows me that i have no doctype.
The problem was that i had the doctype not in the beginning of the page but after all cfinclude files,cfparam ,and queries right before the head.
Now i did change this and i did solve anothe problem but not this.I also change the position of the page to the left as you told me
* {
padding:0;margin;
}
I would be happy if you could help me more.
If not i will accept the last answer
0
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 21845866
try this
<!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>
<title>Vimark Solutions</title>
<script type="text/javascript">
function changeImage(obj){
                
                document.getElementById("imageField5").src = obj.value;
                
        }
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'block':(v=='hide')?'none':v; }
    obj.display=v; }
}
</script>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
#form1 {
border:1px solid #345;
margin:0px auto;
width:380px;
}
#thumbnails {
border:1px solid #345;
float:left;
width:70px;
}
#apDiv1,
#apDiv2,
#apDiv3 {
border:1px solid #345;
	float:left;
	width:298px;
        height:223px;
}
#apDiv2 {
       display: none;
}
#apDiv3 {
        display: none;
}
-->
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
	<div id="thumbnails">
		<input name="imageField" type="image" id="imageField" onmouseover="MM_showHideLayers('apDiv1','','show','apDiv2','','hide','apDiv3','','hide')"  value="images/thumbs/Photo1" src="images/thumbs/Photo1" width="66" height="50" />
		<input name="imageField2" type="image" id="imageField2" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','show','apDiv3','','hide')"  value="images/thumbs/Photo2" src="images/thumbs/Photo2"  width="66" height="50" />
		<input name="imageField3" type="image" id="imageField3" onmouseover="MM_showHideLayers('apDiv1','','hide','apDiv2','','hide','apDiv3','','show')"  value="images/thumbs/Photo3" src="images/thumbs/Photo3"  width="66" height="50" />
	</div>
	<div id="apDiv1">
		<input name="imageField5" type="image"  id="imageField5" src="images/Photo1"  width="298" height="223" />
	</div>
	<div id="apDiv2">  
		<input name="imageField5" type="image"  id="imageField5" src="images/Photo2>"  width="298" height="223" />
	</div>
	<div id="apDiv3">
		<input name="imageField5" type="image" id="imageField5" src="images/Photo3"  width="298" height="223" />
	</div>
	<input name="imageField4" type="image" class="imagefieldPhotoDetail" id="imageField4" src="img/car1.gif"  width="66" height="50" />
</form>
</body>
</html>

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 21846322
Thank you
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 31469511
Thank you Steggs.
This form did solve my problems.
Can you please take at a look on my question here?
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23506928.html
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question