Firefox Design To IE, need help for a quick fix.

@ChoixJan 26.2006

Well I designed my site in Firefox and just asumed it would look the same in IE but alas it does not here is the section that is wrong:

~~[img]~~http://img54.imageshack.us/img54/9493/untitled29ey.jpg[/img]

The code for this section is as follows:

[code] <div align=”center” STYLE=”position:absolute; top:136px; left:0px;”> <img src=”images/nav_top.gif” width=”160″ height=”202″></div> <div align=”center” STYLE=”position:absolute; top:288px; left:0px; bottom:0px;”> <img src=”images/nav_bottom.gif” width=”160″ style=”height:100%;”></div> <div align=”center” STYLE=”position:absolute; top:0px; left:0px;”> <a href=”index.htm”><img src=”images/title.gif” width=”326″ height=”136″ border=”0″></a></div> <div align=”center” STYLE=”position:absolute; top:236px; left:16px;”> <a href=”index.htm” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘home’,”,’images/home_on.gif’,1)”><img src=”images/home_off.gif” name=”home” width=”113″ height=”45″ border=”0″></a></div> <div align=”center” STYLE=”position:absolute; top:275px; left:16px;”> <a href=”news.htm” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘News’,”,’images/news_on.gif’,1)”><img src=”images/news_off.gif” alt=”News” name=”News” width=”128″ height=”39″ border=”0″></a> </div> <div align=”center” STYLE=”position:absolute; top:314px; left:16px;”> <a href=”#” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘database’,”,’images/database_on.gif’,1)”><img src=”images/database_off.gif” name=”database” width=”128″ height=”39″ border=”0″></a></div> <div align=”center” STYLE=”position:absolute; top:353px; left:16px;”> <a href=”forum.htm” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘Forum’,”,’images/forum_on.gif’,1)”><img src=”images/forum_off.gif” alt=”Forum” name=”Forum” width=”128″ height=”39″ border=”0″></a></div> <div align=”center” STYLE=”position:absolute; top:392px; left:16px;”> <a href=”trade.htm” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘Trade’,”,’images/trade_on.gif’,1)”><img src=”images/trade_off.gif” alt=”Trade” name=”Trade” width=”128″ height=”39″ border=”0″></a></div> <div align=”center” STYLE=”position:absolute; top:431px; left:16px;”> <a href=”media.htm” onMouseOut=”MM_swapImgRestore()” onMouseOver=”MM_swapImage(‘Media’,”,’images/media_on.gif’,1)”><img src=”images/media_off.gif” alt=”Media” name=”Media” width=”128″ height=”39″ border=”0″></a></div> <div align=”center” STYLE=”position:absolute; bottom:0px; right:20px;”><a href=”http://127.0.0.1/index.php”><img src=”images/forum_up.gif” width=”19″ height=”18″ border=”0″></a></div>

<div align=”justify” STYLE=”position:absolute; bottom:35px; left:0px;”> <a href=”http://www.imc.co.kr/” target=”_blank”><img src=”images/imc_games_logo.gif” width=”160″ height=”25″ border=”0″ align=”absbottom”></a> </div> <div> <a href=”http://www.hanbitsoft.co.kr/eng/company/company.asp” target=”_blank”><img src=”images/hanbit_soft_logo.gif” width=”160″ height=”35″ border=”0″ align=”justify” style=”position:absolute; bottom:0px; left:0px;”></a> </div> [/code]

Can anyone help? Also can anyone tell me why people even bother with IE when it does crap like this just to annoy the hell out of designers. -_-!

But seriously any help on this would be great, thanks.

to post a comment

HTML

10 Comments(s) _↴

@FangJan 26.2006 — #A link would be more useful.

@drhowarddrfineJan 26.2006 — #why people even bother with IE when it does crap like this just to annoy the hell out of designers.[/QUOTE] Because most users use what is given to them and not what is best for them.

@David_HarrisonJan 26.2006 — #Because most users use what is given to them and not what is best for them.[/QUOTE]Like school dinners, but all the rebel's bring packed lunches. ?

@knowjJan 27.2006 — #
Can anyone help? Also can anyone tell me why people even bother with IE when it does crap like this just to annoy the hell out of designers. -_-!
[/QUOTE]

try validating the code to html 4.01 strict and if the problem persists ill try to help more

people use IE as it comes with windows and i must admit i click on IE on the quicklaunch sometimes rather than firefox as it loads a bit quicker if i just want to run a quick search.

does the page have a doctype as well as IE sometimes messes up if you dont include this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

@drhowarddrfineJan 27.2006 — #I relate working with IE to trying to adjust rabbit ear antennas on a TV.

@ChoixauthorJan 27.2006 — #Thanks, yes I have tried the code:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;

There where no changes at all to the site in IE.

I cannot provide a link because its on my localhost right now however:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Grando Espada Aldea! - Community Forums&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;&lt;style type="text/css"&gt;
 &lt;!--
 body {
 background-color: #EBDCCC;
 }
 --&gt;
 &lt;/style&gt;
 &lt;script language="JavaScript" type="text/JavaScript"&gt;
 &lt;!--
 function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&amp;&amp;i&lt;a.length&amp;&amp;(x=a[i])&amp;&amp;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&lt;a.length; i++)
 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
 }
 
 function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))&gt;0&amp;&amp;parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&amp;&amp;d.all) x=d.all[n]; for (i=0;!x&amp;&amp;i&lt;d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&amp;&amp;d.layers&amp;&amp;i&lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x &amp;&amp; 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&lt;(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
 }
 //--&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body style="height:100%; " onLoad="MM_preloadImages('images/home_on.gif','images/forum_on.gif','images/database_on.gif','images/news_on.gif','images/trade_on.gif','images/media_on.gif')"&gt;
 
 <i>	</i>&lt;div align="center" style="position:absolute; top:0px; left:159px; right:0px; height:99.5%;"&gt;&lt;iframe src="http://127.0.0.1" style="width:100%; bottom:0px; height:99.5%;"&gt;&lt;/iframe&gt;&lt;/div&gt;
 
 <i>    </i>&lt;div align="center" STYLE="position:absolute; top:0px; left:326px;"&gt; &lt;img src="images/banner_spacer.gif" width="400" height="136"&gt;&lt;/div&gt;
 <i>    </i>&lt;div align="center" STYLE="position:absolute; top:0px; left:342px;"&gt; &lt;img src="images/banner.gif" width="684" height="136" align="right"&gt;&lt;/div&gt;
 
 &lt;div align="center" STYLE="position:absolute; top:136px; left:158px;"&gt; &lt;img src="images/nav_arch.gif" width="157" height="202"&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:136px; left:0px;"&gt; &lt;img src="images/nav_top.gif" width="160" height="202"&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:288px; left:0px; bottom:0px;"&gt; &lt;img src="images/nav_bottom.gif" width="160" style="height:100%;"&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:0px; left:0px;"&gt; &lt;a href="index.htm"&gt;&lt;img src="images/title.gif" width="326" height="136" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:236px; left:16px;"&gt; &lt;a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','images/home_on.gif',1)"&gt;&lt;img src="images/home_off.gif" name="home" width="113" height="45" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:275px; left:16px;"&gt; &lt;a href="news.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('News','','images/news_on.gif',1)"&gt;&lt;img src="images/news_off.gif" alt="News" name="News" width="128" height="39" border="0"&gt;&lt;/a&gt; &lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:314px; left:16px;"&gt; &lt;a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('database','','images/database_on.gif',1)"&gt;&lt;img src="images/database_off.gif" name="database" width="128" height="39" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:353px; left:16px;"&gt; &lt;a href="forum.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Forum','','images/forum_on.gif',1)"&gt;&lt;img src="images/forum_off.gif" alt="Forum" name="Forum" width="128" height="39" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:392px; left:16px;"&gt; &lt;a href="trade.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Trade','','images/trade_on.gif',1)"&gt;&lt;img src="images/trade_off.gif" alt="Trade" name="Trade" width="128" height="39" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; top:431px; left:16px;"&gt; &lt;a href="media.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Media','','images/media_on.gif',1)"&gt;&lt;img src="images/media_off.gif" alt="Media" name="Media" width="128" height="39" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 &lt;div align="center" STYLE="position:absolute; bottom:0px; right:20px;"&gt;&lt;a href="http://127.0.0.1/index.php"&gt;&lt;img src="images/forum_up.gif" width="19" height="18" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
 
 &lt;div align="justify" STYLE="position:absolute; bottom:35px; left:0px;"&gt; &lt;a href="http://www.imc.co.kr/" target="_blank"&gt;&lt;img src="images/imc_games_logo.gif" width="160" height="25" border="0" align="absbottom"&gt;&lt;/a&gt; &lt;/div&gt;
 &lt;div&gt; &lt;a href="http://www.hanbitsoft.co.kr/eng/company/company.asp" target="_blank"&gt;&lt;img src="images/hanbit_soft_logo.gif" width="160" height="35" border="0" align="justify" style="position:absolute; bottom:0px; left:0px;"&gt;&lt;/a&gt; &lt;/div&gt;
 
 
 &lt;/body&gt;
 &lt;/html&gt;

This is the entire page code I didn't think you would need to see it all for a possible solution.

Thanks in advance if anyone has a clue how to fix this.

@ChoixauthorJan 28.2006 — #Up!

Sorry if this is considered spam but I guess its better than posting it again after a week of no replies.

@David_HarrisonJan 28.2006 — #Upload a .zip that includes everything, including images, I'll remake the menu.

@ChoixauthorJan 28.2006 — #If you really can then that would be great, to tell you truth im lost on it. I barely know enough to design it let alone work around stupid IE bugs ? .

By the way nice to see you live in Manchester I used to live there, well stockport but you know close enough.

Thanks for the help.

[upl-file uuid=8b069bfc-279d-4ab4-85ea-61b674375389 size=98kB]images1.zip[/upl-file]

[upl-file uuid=8985c545-ec0d-43dc-9850-e319706d82da size=98kB]images2.zip[/upl-file]

[upl-file uuid=9a97310d-25d2-40bb-97a2-86230a55c071 size=10kB]GEAldea.zip[/upl-file]

@oldmanJan 29.2006 — # I barely know enough to design it let alone work around stupid IE bugs ? .

[/QUOTE]

Thats 99% of your problem. Working out the differences between IE and FF will greatly help you along the way to cross browser compatablity.. IE is'nt all that bad. My pages display the same in all the browsers I test in, However tweaking is needed. One attribute may meaningless to one browser where another will require it to display as desired.

Also in #HTML _↴

How to display an Image or Animation when the Page is Loading on the Browser Calling a javascript from HTML-embedded email Extracting data from existing web pages

Success!

Help @Choix spread the word by sharing this article on Twitter...

Tweet This

Firefox Design To IE, need help for a quick fix.

10 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Firefox Design To IE, need help for a quick fix.

10 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #HTML _↴