/    Sign up×
Community /Pin to ProfileBookmark

Firefox incongruity

I have recently created a webpage for a school project (coded in microsoft frontpage), and much to my dismay, it does not display correctly in the firefox browser.

How it displays in firefox:
[URL=http://img292.imageshack.us/my.php?image=ffjw6.jpg][IMG]http://img292.imageshack.us/img292/5200/ffjw6.th.jpg[/IMG][/URL]

How it displays in internet explorer (the way it should look):
[URL=http://img292.imageshack.us/my.php?image=iexe4.jpg][IMG]http://img292.imageshack.us/img292/8373/iexe4.th.jpg[/IMG][/URL]

Any help would be excellent

Source code:

[code]
<html>
<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″><title>Team
236</title>
<script type=”text/javascript” src=”styleswitcher.js”></script>
<link rel=”stylesheet” type=”text/css” href=”stylesheet-blue.css” title=”blue”/>
<link rel=”alternate stylesheet” type=”text/css” href=”stylesheet-green.css” title=”green” />
<link rel=”alternate stylesheet” type=”text/css” href=”stylesheet-red.css” title=”red” />

<script language=”JavaScript”>
<!–
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// –>
</script>

</head>

<body onload=”FP_preloadImgs(/*url*/’images/background-blue.jpg’,/*url*/’images/background-green.jpg’,/*url*/’images/background-red.jpg’)”>

<!–Stylesheet change links–>
<div style=”position: absolute; top: 5; right: 5″>
<a href=”#” onclick=”setActiveStyleSheet(‘blue’); return false;”>Blue</a>
<a href=”#” onclick=”setActiveStyleSheet(‘green’); return false;”>Green</a>
<a href=”#” onclick=”setActiveStyleSheet(‘red’); return false;”>Red</a>
</div>

<!–Home Button–>
<div id=”button 1″ style=”position: absolute; top: 250; left: 125″>
<p><a href=”index.htm”>
<img border=”0″ id=”img1″ src=”images/button1-home.gif” height=”30″ width=”95″ alt=”Home” onmouseover=”FP_swapImg(1,0,/*id*/’img1′,/*url*/’images/button1-home-over.gif’)” onmouseout=”FP_swapImg(0,0,/*id*/’img1′,/*url*/’images/button1-home.gif’)” onmousedown=”FP_swapImg(1,0,/*id*/’img1′,/*url*/’images/button1-home-over.gif’)” onmouseup=”FP_swapImg(0,0,/*id*/’img1′,/*url*/’images/button1-home.gif’)”></a></p>
</div>

<!–Team Info Button–>
<div id=”button 2″ style=”position: absolute; top: 250; left: 225;”><p>
<a href=”team_info.htm”>
<img id=”img2″ src=”images/button1-info.gif” border=”0″ height=”30″ width=”95″ alt=”Team Info” onmouseover=”FP_swapImg(1,0,/*id*/’img2′,/*url*/’images/button1-info-over.gif’)” onmouseout=”FP_swapImg(0,0,/*id*/’img2′,/*url*/’images/button1-info.gif’)” onmousedown=”FP_swapImg(1,0,/*id*/’img2′,/*url*/’images/button1-info-over.gif’)” onmouseup=”FP_swapImg(0,0,/*id*/’img2′,/*url*/’images/button1-info.gif’)”></p>
</a>
</div>

<!–Roster Button–>
<div id=”button 3″ style=”position: absolute; top: 250; left: 325;”><p>
<a href=”roster.htm”>

<img border=”0″ id=”img3″ src=”images/button1-roster.gif” height=”30″ width=”95″ alt=”Roster” onmouseover=”FP_swapImg(1,0,/*id*/’img3′,/*url*/’images/button1-roster-over.gif’)” onmouseout=”FP_swapImg(0,0,/*id*/’img3′,/*url*/’images/button1-roster.gif’)” onmousedown=”FP_swapImg(1,0,/*id*/’img3′,/*url*/’images/button1-roster-over.gif’)” onmouseup=”FP_swapImg(0,0,/*id*/’img3′,/*url*/’images/button1-roster.gif’)”></p>
</a>
</div>

<!–First Info Button–>
<div id=”button 4″ style=”position: absolute; top: 250; left: 425;”><p>
<a href=”first_info.htm”>
<img border=”0″ id=”img4″ src=”images/button1-firstinfo.gif” height=”30″ width=”95″ alt=”First Info” onmouseover=”FP_swapImg(1,0,/*id*/’img4′,/*url*/’images/button1-firstinfo-over.gif’)” onmouseout=”FP_swapImg(0,0,/*id*/’img4′,/*url*/’images/button1-firstinfo.gif’)” onmousedown=”FP_swapImg(1,0,/*id*/’img4′,/*url*/’images/button1-firstinfo-over.gif’)” onmouseup=”FP_swapImg(0,0,/*id*/’img4′,/*url*/’images/button1-firstinfo.gif’)”></p>
</a>
</div>

<font face=”Trebuchet MS” color=”#333333″ size=”1″>
<!–Upcoming Events Box–>
<div style=”position: absolute; top: 290px; left: 125px; height:140px”>
<p>
<img border=”0″ src=”Images/upcomingevents-blue.jpg” width=”259″ height=”140″></p>
</div>

<!–Upcoming Events List–>
<div style=”position: absolute; top: 330; left: 125″ id=”navcontainer”>
<ul id=”eventlist”>
<li id=”active”>2/4/07 Lion&#39;s Club Breakfast</a></li>
<li id=”active”>2/4/07 Lion&#39;s Club Breakfast</a></li>
</ul>
</div>

<!–Recent News Box–>
<div style=”position: absolute; top: 290; left: 390″>

<p><img border=”0″ src=”Images/recentnews-green.jpg” width=”259″ height=”140″></p>
</div>

<!–Recent News List–>
<div style=”position: absolute; top: 330; left: 390″ id=”navcontainer”>
<ul id=”eventlist”>
<font face=”Trebuchet MS” color=”#333333″ size=”1″>
<li id=”active”>1/28/07 Team 236 website goes live</a></li>
</font>
</ul>
</div>

<!–Team Progress Box–>
<div style=”position: absolute; top: 290; left: 655″>
<p><img border=”0″ src=”Images/teamprogress-red.jpg” width=”259″ height=”140″></p>
</div>

<!–Team Progress List–>
<div style=”position: absolute; top: 330; left: 655″ id=”navcontainer”>
<ul id=”eventlist”>
<font face=”Trebuchet MS” color=”#333333″ size=”1″>
<li id=”active”>1/28/07 We have done nothing</a></li>
<li></a></li>
<li><font size=”1″></a></font></li>
<li><font size=”1″></a></font></li>
<li><font size=”1″><font face=”Arial” color=”#000000″></a></li>
</font>
</ul>

</div>

<div style=”position: absolute; top: 445px; left: 125px; width: 450;”>
<h2>1/28/07: Website goes public!</h2>

<h1>
&nbsp;&nbsp;&nbsp; After much dismay and turmoil, the Lyme Old Lyme Team 236
website goes online. Stephen Burke and Jonny Abraham uploaded the main page
at approximately 1:30. More updates on the website to come in later days.&nbsp;
On a similar note, the content for the website is almost completely compiled
(by Evan Anway) , and will soon be uploaded by.</h1>
</div>

<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>
_uacct = “UA-1260518-2”;
urchinTracker();
</script>

</body>

</html>
[/code]

to post a comment
HTML

8 Comments(s)

Copy linkTweet thisAlerts:
@agrestikJan 31.2007 — Hi madcappp,

First, the links for your images are http://img292.imageshack.us/img292/5200/ffjw6.jpg & http://img292.imageshack.us/img292/8373/iexe4.jpg ?

Can you post some of the source code of your page?
Copy linkTweet thisAlerts:
@madcapppauthorJan 31.2007 — <i>
</i>&lt;html&gt;

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&gt;
&lt;title&gt;Team 236&lt;/title&gt;
&lt;script type="text/javascript" src="styleswitcher.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="stylesheet-blue.css" title="blue"/&gt;
&lt;link rel="alternate stylesheet" type="text/css" href="stylesheet-green.css" title="green" /&gt;
&lt;link rel="alternate stylesheet" type="text/css" href="stylesheet-red.css" title="red" /&gt;


&lt;script language="JavaScript"&gt;
&lt;!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i&lt;a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n&lt;args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n&lt;c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n&lt;f.length; n++) { els=f[n].elements;
for(m=0; m&lt;els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// --&gt;
&lt;/script&gt;




&lt;/head&gt;


&lt;body onload="FP_preloadImgs(/*url*/'images/background-blue.jpg',/*url*/'images/background-green.jpg',/*url*/'images/background-red.jpg')"&gt;


&lt;!--Stylesheet change links--&gt;
&lt;div style="position: absolute; top: 5; right: 5"&gt;
&lt;a href="#" onclick="setActiveStyleSheet('blue'); return false;"&gt;Blue&lt;/a&gt;
&lt;a href="#" onclick="setActiveStyleSheet('green'); return false;"&gt;Green&lt;/a&gt;
&lt;a href="#" onclick="setActiveStyleSheet('red'); return false;"&gt;Red&lt;/a&gt;
&lt;/div&gt;

&lt;!--Home Button--&gt;
&lt;div id="button 1" style="position: absolute; top: 250; left: 125"&gt;
&lt;p&gt;&lt;a href="index.htm"&gt;
&lt;img border="0" id="img1" src="images/button1-home.gif" height="30" width="95" alt="Home" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/button1-home-over.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/button1-home.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/button1-home-over.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/button1-home.gif')" fp-style="fp-btn: Border Bottom 1" fp-title="Home"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;!--Team Info Button--&gt;
&lt;div id="button 2" style="position: absolute; top: 250; left: 225;"&gt;&lt;p&gt;
&lt;a href="team_info.htm"&gt;
&lt;img id="img2" src="images/button1-info.gif" height="30" width="95" alt="Team Info" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'images/button1-info-over.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'images/button1-info.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'images/button1-info-over.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'images/button1-info.gif')" fp-style="fp-btn: Border Bottom 1" fp-title="Team Info"&gt;&lt;/p&gt;
&lt;/a&gt;
&lt;/div&gt;

&lt;!--Roster Button--&gt;
&lt;div id="button 3" style="position: absolute; top: 250; left: 325;"&gt;&lt;p&gt;
&lt;a href="roster.htm"&gt;

&lt;img border="0" id="img3" src="images/button1-roster.gif" height="30" width="95" alt="Roster" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button1-roster-over.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button1-roster.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'images/button1-roster-over.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'images/button1-roster.gif')" fp-style="fp-btn: Border Bottom 1" fp-title="Roster"&gt;&lt;/p&gt;
&lt;/a&gt;
&lt;/div&gt;

&lt;!--First Info Button--&gt;
&lt;div id="button 4" style="position: absolute; top: 250; left: 425;"&gt;&lt;p&gt;
&lt;a href="first_info.htm"&gt;
&lt;img border="0" id="img4" src="images/button1-firstinfo.gif" height="30" width="95" alt="First Info" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'images/button1-firstinfo-over.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'images/button1-firstinfo.gif')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'images/button1-firstinfo-over.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'images/button1-firstinfo.gif')" fp-style="fp-btn: Border Bottom 1" fp-title="First Info"&gt;&lt;/p&gt;
&lt;/a&gt;
&lt;/div&gt;


&lt;!--Upcoming Events Box--&gt;
&lt;div style="position: absolute; top: 290px; left: 125px; height:140px"&gt;
&lt;p&gt;
&lt;img border="0" src="Images/upcomingevents-blue.jpg" width="259" height="140"&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;!--Upcoming Events List--&gt;
&lt;div style="position: absolute; top: 330; left: 125" id="navcontainer"&gt;
&lt;ul id="eventlist"&gt;
&lt;font face="Trebuchet MS" color="#333333" size="1"&gt;
&lt;li id="active"&gt;2/4/07 Lion's Club Breakfast&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;font face="Arial" color="#000000"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/font&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;!--Recent News Box--&gt;
&lt;div style="position: absolute; top: 290; left: 390"&gt;

&lt;p&gt;&lt;img border="0" src="Images/recentnews-green.jpg" width="259" height="140"&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;!--Recent News List--&gt;
&lt;div style="position: absolute; top: 330; left: 390" id="navcontainer"&gt;
&lt;ul id="eventlist"&gt;
&lt;font face="Trebuchet MS" color="#333333" size="1"&gt;
&lt;li id="active"&gt;1/28/07 Team 236 website goes live&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;font face="Arial" color="#000000"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/font&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;!--Team Progress Box--&gt;
&lt;div style="position: absolute; top: 290; left: 655"&gt;
&lt;p&gt;&lt;img border="0" src="Images/teamprogress-red.jpg" width="259" height="140"&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;!--Team Progress List--&gt;
&lt;div style="position: absolute; top: 330; left: 655" id="navcontainer"&gt;
&lt;ul id="eventlist"&gt;
&lt;font face="Trebuchet MS" color="#333333" size="1"&gt;
&lt;li id="active"&gt;1/28/07 We have done nothing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
&lt;li&gt;&lt;font size="1"&gt;&lt;font face="Arial" color="#000000"&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/font&gt;
&lt;/ul&gt;

&lt;/div&gt;

&lt;div style="position: absolute; top: 445px; left: 125px; width: 450;"&gt;
&lt;h2&gt;1/28/07: Website goes public!&lt;/h2&gt;

&lt;h1&gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp; After much dismay and turmoil, the Lyme Old Lyme Team 236 website goes online.
Stephen Burke and Jonny Abraham uploaded the main page at approximately
1:30. More updates on the website to come in later days.&amp;nbsp; On a similar
note, the content for the website is almost completely compiled (by Evan
Anway) , and will
soon be uploaded by.&lt;/h1&gt;
&lt;/div&gt;













































&lt;script src="http://www.google-analytics.com/urchin.js" type="text/javascript"&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
_uacct = "UA-1260518-2";
urchinTracker();
&lt;/script&gt;



&lt;/body&gt;










&lt;/html&gt;


I've tried quite a few things, and none have proven to be progressive. I am really hoping you or some else can help me. ?
Copy linkTweet thisAlerts:
@felgallJan 31.2007 — The first step in getting Internet Explorer to display pages more correctly is to add a DOCTYPE to the top of the page before the <html> tag. Once you have that there the appearance of the page in different browsers will be more consistent. Without it IE does things in a totally non-standard way.

Once the page looks the same in all browsers then fixing anything that isn't working right will be easier.
Copy linkTweet thisAlerts:
@madcapppauthorJan 31.2007 — I tried adding various doctypes, that just aligned the page very strangely (ie: moving everything to the top left), once I do that am i going to need to re-write the code for my website?
Copy linkTweet thisAlerts:
@ray326Jan 31.2007 — Yes, you'll have to fix it because IE will be working more like a real browser. Also you need to validate the page so you know your HTML and CSS are correct. Oh, and the "incongruity" is with IE, not Firefox.
Copy linkTweet thisAlerts:
@WebJoelJan 31.2007 — Although this will most likely have not corrective effect on your page, writing "comments" without a 'whitespace' throws a validation warning, and in some cases, causes strange behaviour in Firefox (due to the syntax not being correct)

[B]<!--Stylesheet change links--> [/B]

should be

<!-- Stylesheet change links -->

(notice the whitespaces after & before the double-hyphen marks).

This too:

[B]<link rel="stylesheet" type="text/css" href="stylesheet-blue.css" title="blue"/>[/B]

should be as:

[B]<link rel="stylesheet" type="text/css" href="stylesheet-blue.css" title="blue" />[/B]

(Notice the whitespace before the closing slashmark).

The 'whitespace' here as I understand it, causes older browsers to not misinterpret the "/" as a 'shell comman'd although it is unlikely that, this being used in the <head> section, would suffice that instance. When used in the <body>, I have seen the "absence of whitespace/" cause rather unexpected results in what is supposed to occur (if in a 'script, the script might not function at all, or intermittantly at best).

Probably the biggest, most profound change as Ray noted, is to add a valid !doctype complete with URL. It might completely change your page's layout, -but this biggest enemy is also your biggest ally, as it is the first step towards a semantic multi-browser page.
Copy linkTweet thisAlerts:
@drhowarddrfineJan 31.2007 — The first thing that goes on a web page is the doctype. You always code to the doctype and never try and fit the doctype to the code. You should also alway the strict version. See my link below.

FrontPage is one of the worst code generators around.

Never, ever use IE as your initial test browser. Always use a modern browser, such as FF or Opera. Then adjust for IEs quirks and bugs. Your problems are almost always created by IE and not Firefox.

Sorry if I repeated some of the info above.
Copy linkTweet thisAlerts:
@WebJoelJan 31.2007 — :o -I always cringe [I]a little bit[/I] when dr sez to '...never, ever use IE as your initial text browser' because that is exactly what I do... my html-editor uses IE6-mode, -but I DO check with Firefox (my [I]default browser[/I]) before offering my code for peer-review and/or public consumption... ?
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...