Solved

Hidden visible -position of div in firefox and explorer

Posted on 2008-06-22
12
818 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

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…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now