asked on

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

Mark Steggles

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

Panos

ASKER

Hi Steggs.
Here is the new CSS:
<style type="text/css">

</style>
but the problem is still there.
Can i have in my css text the possibility for IE to use another style?

Mark Steggles

no.. the css should be like this:

<style type="text/css">

</style>

Mark Steggles

Also, make sure your page has a strict doctype

Panos

ASKER

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

Mark Steggles

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">

Panos

ASKER

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

Mark Steggles

"is the page online?"

if so.. try putting it through the html validator and fix any errors http://validator.w3.org/

Panos

ASKER

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

ASKER CERTIFIED SOLUTION

Mark Steggles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

Thank you

Panos

ASKER

Thank you Steggs.
This form did solve my problems.
Can you please take at a look on my question here?
https://www.experts-exchange.com/questions/23506928/css-errors-check.html