The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Making my website compatible with IE, It works for Firefox, but not IE.
agertler
post 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">&nbsp;</p>
<p align="center">&nbsp;</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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
agertler
post Dec 10 2007, 03:39 PM
Post #3





Group: Members
Posts: 8
Joined: 10-December 07
Member No.: 4,514
QUOTE(pandy @ Dec 10 2007, 03:15 PM) *

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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
agertler
post 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">&nbsp;</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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
agertler
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
agertler
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
agertler
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
agertler
post 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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Dec 11 2007, 12:08 PM
Post #16


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43
QUOTE(agertler @ Dec 11 2007, 11:27 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 11 2007, 01:26 PM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(agertler @ Dec 11 2007, 03:27 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
agertler
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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
QUOTE(agertler @ Dec 11 2007, 01:43 PM) *
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.

QUOTE(agertler @ Dec 11 2007, 01:43 PM) *
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 12:42 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC