Making my website compatible with IE, It works for Firefox, but not IE. |
Making my website compatible with IE, It works for Firefox, but not IE. |
agertler |
Dec 10 2007, 03:02 PM
Post
#1
|
Group: Members Posts: 8 Joined: 10-December 07 Member No.: 4,514 |
Hi, I recently designed a website that looks perfect when viewed in Firefox, but when viewed in Internet Explorer, it looks terrible, with tons of white space and over sized tables.. The URL for the website its http://www.outloudmanagement.com
I also copied the code below. If anyone can fix my problem, please let me know! CODE <html> <head> <title>outloud</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> <!-- 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[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("?"))>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[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } 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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('../images/homerollover.jpg','../images/newsrollover.jpg','../images/artistsrollover.jpg','../images/inforollover.jpg','../images/contactrollover.jpg','../images/joinrollover.jpg')"> <!-- ImageReady Slices (outloud.psd) --> <table id="Table_01" width="1263" height="666" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="../images/outloud_01.jpg" width="322" height="641" alt=""></td> <td colspan="13"> <img src="../images/outloud_02.jpg" width="615" height="208" alt=""></td> <td rowspan="4"> <img src="../images/outloud_03.jpg" width="326" height="641" alt=""></td> </tr> <tr> <td> <img src="../images/outloud_04.jpg" width="29" height="40" alt=""></td> <td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','../images/homerollover.jpg',1)"><img src="../images/outloud_05.jpg" name="Image21" width="90" height="40" border="0"></a></td> <td> <img src="../images/outloud_06.jpg" width="7" height="40" alt=""></td> <td><a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','../images/newsrollover.jpg',1)"><img src="../images/outloud_07.jpg" name="Image22" width="79" height="40" border="0"></a></td> <td> <img src="../images/outloud_08.jpg" width="10" height="40" alt=""></td> <td><a href="artists.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image23','','../images/artistsrollover.jpg',1)"><img src="../images/outloud_09.jpg" name="Image23" width="94" height="40" border="0"></a></td> <td> <img src="../images/outloud_10.jpg" width="8" height="40" alt=""></td> <td><a href="info.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image24','','../images/inforollover.jpg',1)"><img src="../images/outloud_11.jpg" name="Image24" width="69" height="40" border="0"></a></td> <td> <img src="../images/outloud_12.jpg" width="10" height="40" alt=""></td> <td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','../images/contactrollover.jpg',1)"><img src="../images/outloud_13.jpg" name="Image25" width="110" height="40" border="0"></a></td> <td> <img src="../images/outloud_14.jpg" width="11" height="40" alt=""></td> <td><a href="join.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','../images/joinrollover.jpg',1)"><img src="../images/outloud_15.jpg" name="Image26" width="67" height="40" border="0"></a></td> <td> <img src="../images/outloud_16.jpg" width="31" height="40" alt=""></td> </tr> <tr> <td colspan="13"> <img src="../images/outloud_17.jpg" width="615" height="17" alt=""></td> </tr> <tr> <td height="0", td colspan="13"> <p align="center"><img src="../../../Pictures/comingsoon.jpg" width="519" height="96"></p> <p align="center"><strong>Contact Us</strong>:</p> <p align="center"><a href="#">info@outloudmanagement.com</a></p> <p align="center"> </p> <p align="center"> </p> <p align="center"><span class="content" style="width: 302; height: 638"> <img src="../../../Pictures/wayfrologo.jpg" alt="" width="270" height="112"></span> <img src="../../../Pictures/outloudlogo.jpg" alt="" width="260" height="110"></div> </td> <tr> <td colspan="15"> <img src="../images/outloud_19.jpg" width="1263" height="25" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> |
pandy |
Dec 10 2007, 03:15 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Fact is the page forces a horizontal scrollbar in both IE and FF.
You should use a doctype that puts browsers in standards mode. http://hsivonen.iki.fi/doctype/ Then you should validate. http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes That will take care of most of the problems, not the horizontal scrollbar though. |
agertler |
Dec 10 2007, 03:39 PM
Post
#3
|
Group: Members Posts: 8 Joined: 10-December 07 Member No.: 4,514 |
Fact is the page forces a horizontal scrollbar in both IE and FF. You should use a doctype that puts browsers in standards mode. http://hsivonen.iki.fi/doctype/ Then you should validate. http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes That will take care of most of the problems, not the horizontal scrollbar though. I tried the doctype solution, which solves the internet explorer problem, but then causes another problem with whitespace in firefox. Is there anything I can do to change IE without the code messing up the way the firefox version is displayed? |
Darin McGrew |
Dec 10 2007, 03:55 PM
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Please see the FAQ entry How do I eliminate the space around/between my images?
|
agertler |
Dec 10 2007, 04:27 PM
Post
#5
|
Group: Members Posts: 8 Joined: 10-December 07 Member No.: 4,514 |
I've tried all of the proposed solutions but I'm still getting this annoying whitespace between the content of my website, and the image on the very bottom that contains the copyright info. This also opens up space at the very top of the page too. If anyone could show me with the code pasted below here what to change, I'd really appreciate it so much!
CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>outloud</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> <!-- 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[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("?"))>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[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } 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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('../images/homerollover.jpg','../images/newsrollover.jpg','../images/artistsrollover.jpg','../images/inforollover.jpg','../images/contactrollover.jpg','../images/joinrollover.jpg')"> <!-- ImageReady Slices (outloud.psd) --> <table id="Table_01" width="1263" height="666" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="../images/outloud_01.jpg" width="322" height="641" alt=""></td> <td colspan="13"> <img src="../images/outloud_02.jpg" width="615" height="208" alt=""></td> <td rowspan="4"> <img src="../images/outloud_03.jpg" width="326" height="641" alt=""></td> </tr> <tr> <td> <img src="../images/outloud_04.jpg" width="29" height="40" alt=""></td> <td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image21','','../images/homerollover.jpg',1)"><img src="../images/outloud_05.jpg" name="Image21" width="90" height="40" border="0"></a></td> <td> <img src="../images/outloud_06.jpg" width="7" height="40" alt=""></td> <td><a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','../images/newsrollover.jpg',1)"><img src="../images/outloud_07.jpg" name="Image22" width="79" height="40" border="0"></a></td> <td> <img src="../images/outloud_08.jpg" width="10" height="40" alt=""></td> <td><a href="artists.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image23','','../images/artistsrollover.jpg',1)"><img src="../images/outloud_09.jpg" name="Image23" width="94" height="40" border="0"></a></td> <td> <img src="../images/outloud_10.jpg" width="8" height="40" alt=""></td> <td><a href="info.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image24','','../images/inforollover.jpg',1)"><img src="../images/outloud_11.jpg" name="Image24" width="69" height="40" border="0"></a></td> <td> <img src="../images/outloud_12.jpg" width="10" height="40" alt=""></td> <td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image25','','../images/contactrollover.jpg',1)"><img src="../images/outloud_13.jpg" name="Image25" width="110" height="40" border="0"></a></td> <td> <img src="../images/outloud_14.jpg" width="11" height="40" alt=""></td> <td><a href="join.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','../images/joinrollover.jpg',1)"><img src="../images/outloud_15.jpg" name="Image26" width="67" height="40" border="0"></a></td> <td> <img src="../images/outloud_16.jpg" width="31" height="40" alt=""></td> </tr> <tr> <td colspan="13"> <img src="../images/outloud_17.jpg" width="615" height="17" alt=""></td> </tr> <tr> <td height="0", td colspan="13"> <p align="center"><img src="../../../Pictures/comingsoon.jpg" width="519" height="96"></p> <p align="center"><strong>Contact Us</strong>:</p> <p align="center"><a href="#">info@outloudmanagement.com</a></p> <p align="center"> </p> <p align="center"><span class="content" style="width: 302; height: 638"> <img src="../../../Pictures/wayfrologo.jpg" alt="" width="270" height="112"></span> <img src="../../../Pictures/outloudlogo.jpg" alt="" width="260" height="110"></div> </td> <tr> <td colspan="15"> <img src="../images/outloud_19.jpg" width="1263" height="25" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </body> </html> |
pandy |
Dec 10 2007, 04:53 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
There's a whitespace problem both in IE and FF. You must fix
what's broken before you start to fiddle with details. Did you fix the errors the validator reports? Some things the validator can't detect. The table looks broken to me. For instance, you have a single cell row with colspan="13". Directly under it you have another single cell row with colspan="15". I didn't count cells to see if there actually is a row with 15 cells anywhere. Anyway, it doesn't add up. Turn table borders on and you can see it looks kinda funny. I'd remove a lot of the width and height attributes you have in TD tags too. |
Darin McGrew |
Dec 10 2007, 05:00 PM
Post
#7
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
In which browser(s) do you still get extra whitespace? The solution is different, depending on the cause. And different browsers display extra whitespace for different reasons: MSIE because it ignores the specs, FF because it follows the specs.
|
agertler |
Dec 10 2007, 05:24 PM
Post
#8
|
Group: Members Posts: 8 Joined: 10-December 07 Member No.: 4,514 |
When I didn't have the doctype originally I got a ton of extra white space on IE. Then I added the doctype and IE seems to work almost perfectly, but the FF gets a bit of whitespace between some of the cells.
|
Darin McGrew |
Dec 10 2007, 05:51 PM
Post
#9
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
That sounds like the issue mentioned in the last paragraph of the FAQ entry, just before the "see also" links that detail the issue further.
|
agertler |
Dec 10 2007, 08:25 PM
Post
#10
|
Group: Members Posts: 8 Joined: 10-December 07 Member No.: 4,514 |
Yes that is why it does that, but if I don't use the standards mode, then it works fine in firefox, but IE gets messed up. It's like I have to choose one or the other, and I need to know how to program it properly for both.
|
pandy |
Dec 10 2007, 08:30 PM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Well, fixing the errors and mending the table is a starting point. Have you done that?
|
Darin McGrew |
Dec 10 2007, 09:10 PM
Post
#12
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Then, the linked documents explain how to eliminate the space in FF while using standards mode. Here's a corrected link for the first one:
Images, Tables, and Mysterious Gaps |
agertler |
Dec 10 2007, 11:17 PM
Post
#13
|
Group: Members Posts: 8 Joined: 10-December 07 Member No.: 4,514 |
I've literally tried everything listed above, with no success. I might just start from the beginning with my table and website, and try to reconstruct everything and hope it works. But any other suggestions?
|
Darin McGrew |
Dec 10 2007, 11:33 PM
Post
#14
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Can you post the URL (address) of a document that shows a gap in Firefox?
|
agertler |
Dec 11 2007, 09:27 AM
Post
#15
|
Group: Members Posts: 8 Joined: 10-December 07 Member No.: 4,514 |
Here's the site URL that has problems in FF, but looks fairly nice in Internet Explorer.
http://www.outloudmanagement.com/ |
Brian Chandler |
Dec 11 2007, 12:08 PM
Post
#16
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Here's the site URL that has problems in FF, but looks fairly nice in Internet Explorer. http://www.outloudmanagement.com/ Hmm, you are using jpeg images for slabs of uniform colour. This is a pretty bad idea. Instead of fixed width blocks, you should simply make the central part (with the content) sit between areas which you can fill with a background colour, and centre it. Then the unnecessary horizontal scroll bar will just go away. |
pandy |
Dec 11 2007, 01:26 PM
Post
#17
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Here's the site URL that has problems in FF, but looks fairly nice in Internet Explorer. http://www.outloudmanagement.com/ That page still has all the errors. We wanted to see the improved page. |
agertler |
Dec 11 2007, 04:43 PM
Post
#18
|
Group: Members Posts: 8 Joined: 10-December 07 Member No.: 4,514 |
Thanks for the suggestion Brian, I think I'll try that. And pandy, I changed everything back after I fixed it all, because after taking all of the steps to attempt to fix it, it just looked even worse.
Also, how do I add a background to the site, and still keep the area with content white? This post has been edited by agertler: Dec 11 2007, 05:01 PM |
Darin McGrew |
Dec 11 2007, 05:16 PM
Post
#19
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
I changed everything back after I fixed it all, because after taking all of the steps to attempt to fix it, it just looked even worse. It's hard for us to help if we can't see the problem.Also, how do I add a background to the site, and still keep the area with content white? The basic idea is to specify a background image for a parent element, a white background for a child element, and appropriate padding/margins to allow the background image to show around the edges of the white content area. |
Lo-Fi Version | Time is now: 19th April 2024 - 10:19 PM |