Hello! I got one big problem with my web page viewing in different browsers. As you can see there are big difference How can I fix it? Any tips or tutorials? Please help. Mozilla firefox version: Internet explorer version: Now I can say that Internet explorer sucks
I think you would have to blame your code before you blame IE given IE has been around alot longer. Without seeing the actual HTML/ CSS it is difficult to diagnose the problem
This is true. I took a guess with that code (as that would be the first thing i'd try). But if I had the code to see I could tell you the solution easily.
how about making the padding 0? I think in tables you need to put in spacing="0", haven't used tables in a while so I'm not sure.
will try, Code is: <html> <head> <title>myweb</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- body { background-color: #DBDBDB; } #apDiv1 { position:absolute; width:296px; height:164px; z-index:1; left: 272px; top: 439px; } --> </style> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/index_08.gif','images/index_12.gif','images/index_20.gif','images/index_16.gif','images/index_11.gif')"> <!-- ImageReady Slices (myweb.psd) --> <table width="801" height="601" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> <tr> <td rowspan="9"> <img src="images/index_01.gif" width="21" height="600" alt=""></td> <td colspan="9"> <img src="images/index_02.gif" width="755" height="1" alt=""></td> <td rowspan="9"> <img src="images/index_03.gif" width="23" height="600" alt=""></td> <td> <img src="images/index_04.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="9"> <img src="images/index_05.gif" width="755" height="163" alt=""></td> <td rowspan="8"> <img src="images/index_06.gif" width="1" height="599" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="163" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/index_07.gif" width="350" height="73" alt=""></td> <td colspan="3" rowspan="3"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image44','','images/index_08.gif',1)"><img src="images/myweb_08.gif" name="Image44" width="81" height="84" border="0"></a></td> <td colspan="3" rowspan="2"> <img src="images/index_09.gif" width="324" height="76" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="73" alt=""></td> </tr> <tr> <td rowspan="6"> <img src="images/index_10.gif" width="268" height="363" alt=""></td> <td colspan="2" rowspan="3"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image48','','images/index_11.gif',1)"><img src="images/myweb_11.gif" name="Image48" width="82" height="70" border="0"></a></td> <td> <img src="images/spacer.gif" width="1" height="3" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image45','','images/index_12.gif',1)"><img src="images/myweb_12.gif" name="Image45" width="77" height="72" border="0"></a></td> <td rowspan="5"> <img src="images/index_13.gif" width="247" height="360" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="8" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/index_14.gif" width="81" height="59" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="59" alt=""></td> </tr> <tr> <td> <img src="images/index_15.gif" width="35" height="5" alt=""></td> <td colspan="2" rowspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image47','','images/index_16.gif',1)"><img src="images/myweb_16.gif" name="Image47" width="87" height="89" border="0"></a></td> <td colspan="2"> <img src="images/index_17.gif" width="41" height="5" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="5" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/index_18.gif" width="35" height="288" alt=""></td> <td rowspan="2"> <img src="images/index_19.gif" width="1" height="288" alt=""></td> <td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','images/index_20.gif',1)"><img src="images/myweb_20.gif" name="Image46" width="86" height="84" border="0"></a></td> <td rowspan="2"> <img src="images/index_21.gif" width="31" height="288" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="84" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/index_22.gif" width="87" height="204" alt=""></td> <td colspan="2"> <img src="images/index_23.gif" width="86" height="204" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="204" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="268" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="35" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="47" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="40" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="40" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="46" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="31" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="247" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="23" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html>
You may be able to CSS-style away that mm_image swap thing, if it's supposed to work when the mouse hovers. Tell ya what'd be much much much easier than slicing images and hoping they're pixel-perfect in every browser (admittedly hard to do without position:absolute everywhere): Try the big flower as one giante background image of some div, and inside the div is a list with the 5 or 6 clickie things. Cover the text of the list with the image-replacement technique (which can also change on hover), done. The thing below is then simply another list. Everything could be off by a pixel or two and still look okay, since the 5 or 6 images sitting in the flower would still pretty much be in the flower, and the flower would always be solid.