Improve company productivity with a Business Account.Sign Up

x
?
Solved

Hidden visible -position of div in firefox and explorer

Posted on 2008-06-22
12
Medium Priority
?
841 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: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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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 …

584 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