Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 831
  • Last Modified:

Hidden visible -position of div in firefox and explorer

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
Panos
Asked:
Panos
  • 6
  • 6
1 Solution
 
Mark StegglesWeb DeveloperCommented:
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
 
PanosAuthor Commented:
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
 
Mark StegglesWeb DeveloperCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Mark StegglesWeb DeveloperCommented:
Also, make sure your page has a strict doctype
0
 
PanosAuthor Commented:
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
 
Mark StegglesWeb DeveloperCommented:
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
 
PanosAuthor Commented:
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
 
Mark StegglesWeb DeveloperCommented:
"is the page online?"

if so.. try putting it through the html validator and fix any errors http://validator.w3.org/
0
 
PanosAuthor Commented:
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
 
Mark StegglesWeb DeveloperCommented:
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
 
PanosAuthor Commented:
Thank you
0
 
PanosAuthor Commented:
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now