[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Hidden visible -position of div in firefox and explorer

Posted on 2008-06-22
12
Medium Priority
?
827 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 30

Expert Comment

by:Mark Steggles
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:Mark Steggles
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 30

Expert Comment

by:Mark Steggles
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:Mark Steggles
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:Mark Steggles
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:
Mark Steggles earned 2000 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

656 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