Solved

Hidden visible -position of div in firefox and explorer

Posted on 2008-06-22
12
819 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

895 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

11 Experts available now in Live!

Get 1:1 Help Now