Divs won't work reliably across Firefox and IE.

[Ferret]

I am the webmaster for SPX.com, which uses the content manager Zope to maintain the site. Most of the pages have straight HTML written into the console for the content.

One problem I've been having is that Divs will not display reliably between Firefox and IE. For instance: if I get the tags working in one, they look strange in the other.

Here is the code for a page I am working on at the moment... just the content HTML, the header and footer are in another file:



<table cellpadding="8px" cellspacing="0px">
<tr>
<td>
<div id="text">
<h3>Welcome to the Career Center</h3>

At SPX, our people are the strongest part of our organization. We strive to find the most talented and driven individuals to fill positions throughout all of our many businesses. The Career Center has the information you need to learn about the opportunities SPX has to offer!

<ul>
<li>View current job listings at <a href="https://spxss.usi.net/psp/P89HSPX_APP_1/APPLICANT/HRMS/c/HRS_HRAM.HRS_CE.GBL">Career Search</a></li>
<li>Examine the SPX <a href="http://www.spx.com/Careers/RewardsandBenefits">Rewards and Benefits</a></li>
<li>Experience our culture with <a href="http://www.spx.com/Careers/Life%20at%20SPX">Life at SPX</a></li>
<li>Learn more about our company at <a href="http://www.spx.com/Careers/Our%20Organization">Our Organization</a></li>
</ul>

<h3>Opportunities At Every Level</h3>

We believe in developing and advancing the careers of both university graduates and experienced professionals. If you are a student, check out our <a href="http://www.spx.com/Careers/College%20Recruiting">College Recruiting Schedule</a> and unique <a href="http://www.spx.com/Careers/College%20Recruiting">Rotational Programs</a>. These aggressive programs are designed for individuals seeking a position upon graduating with careers targeted towards engineering, human resources and accounting or finance.

Candidates interested in applying for a current opportunity with SPX, please visit our Career Search, register to create an account and begin your search.
</div>
</td>
<td>
<img src="img" width="100%">
<br />
<div style="background-color:#eeeedd; padding: 8px;" id="text">
Want a career in accounting or finance? Learn about our <a href="Internal Audit’s Leadership Development Program.
</div>

<div id="text" style="background-color: #FFDB63; padding: 8px;" width="100%">
<font size="2"; color="maroon">
<b>Diversity</b>
</font>
<br />
<br />
<b>Our commitment to diversity</b> is a commitment to individuals and to the team. It’s about creating an environment in which all associates can fulfill their potential without artificial barriers, and in which the team is made stronger by the diverse backgrounds, experiences and perspectives of individuals. It’s about giving all of us – individually and together – the best possible chance to succeed.
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<span style="background-color:#ff9900; padding:8px;" id="text">Questions? Contact Us at <a href="mailto:recruiter@spx.com">recruiter@spx.com</a>.</span>
</td>
</tr>
</table>



Some examples you can see on the site:

http://www.spx.com/Careers/LearningAndDevelopment/LearningAndDevelopment
When I render in IE, the picture and caption box line up... in FF, the caption box extends to the right a bit.

http://www.spx.com/Careers/Life%20atSPX/Lifeatspx
When I render in IE, the boxes line up and are fully displayed.... in FF, they're shorter and the gray box doesn't display all of it's contents.

Unfortunately I was not the original coder of this website, so I don't know the ins and outs of how it was designed... but I do know that the coder I picked the job up from was a lazy coder (he never closed tags. :mad: ) and never checked compatibility across popular browsers.

Any thoughts on how I might fix this? I'm not required to enforce browser compatibility, but because I want to do my job well, I prefer to.

[felgall]

1. Do you have a valid and complete DOCTYPE as the first statement?
2. Have you set a default value for margins and padding to override the different defaults used by different browsers?

[drhowarddrfine]

As mentioned, without a proper doctype, IE will never perform like modern browsers do.

[Ferret]

1. Do you have a valid and complete DOCTYPE as the first statement?
2. Have you set a default value for margins and padding to override the different defaults used by different browsers?


Wow, that's such a basic thing (and is contained in the header files I don't edit very often) that I overlooked it. Thank you so much for pointing out the fact that there is no DocType on the site. The lazy coder who's name I will not mention strikes again!

[Ferret]

Still no good. I added a DOCTYPE, and it changed nothing so far (probably because I was making the site work around IE's shortcomings without a DOCTYPE without realizing it).

Here's some screenshots of the different browsers: First is FF, second is IE.

http://img508.imageshack.us/img508/8798/firefoxdivsq2.png
http://img508.imageshack.us/img508/2795/iedivtb1.png

edit: I'll make sure I've defined margins etc. >_> Forgot to do that.

[Ferret]

Suppose I can't edit my messages after a certain amount of time... sorry for triple posting. :P

I have a much more serious situation with regards to the DOCTYPE needed. It makes no major difference on any page but the homepage.

Here's screenshots of the homepage using the DOCTYPE. Without a DOCTYPE defined, both IE and FF look like the first image.

With IE:

http://img112.imageshack.us/img112/8756/homepagedoctypehk6.png

With FF:

http://img516.imageshack.us/img516/1845/homepagedoctypeffxy9.jpg

I understand that IE is most likely at fault here, forcing whoever designed this site originally to work within the limits of IE's lack of standardization... because of this is there hope for me to get the site to work in both IE and FF in it's current state?

[WebJoel]

There are a number of small errors that could be cleaned up that would contribute to the whole. Immediately I noted:<ul><li>....</li><br>
<li>.....</li><br>
<li>....</li><br>
<li>....</li><br>
(etc.
etc.
etc. link text and more edited out for brevity)
</ul The "<br>"s are not required, as this <ul> will form a vertical listing anyway. Using line-breaks is superfluous and bloat. And upon validation, you will get a missing "<li>" warning, as in an UL, any "</li>" expects ONLY another opening "<li>" OR a closing "</ul>".
Any other tag (including any way you could insert text), will throw a validation error (a "warning" actually, that is a "minor error" that most browsers probably would overlook).

This site is not that complicated and could be easily re-done in updated code that would make it faster, leaner, more x-browser and compliant. :)

[ray326]

The "<br>"s are not required,Not only not required, they're invalid there.
is there hope for me to get the site to work in both IE and FF in it's current state?Looks like a big redo to me.

[Ferret]

Thank you for your input. I'll continue working on the site and see if I can fix it.

This is the first site I've had to work on that I didn't participate in the design of, so it's more difficult for me to try to work the layout in the manner of the site and still try to be standards compliant when it wasn't designed to be that.

Thanks again! I'll continue on.

[Ferret]

Not only not required, they're invalid there.

Which page has the line break tags? The code I wrote doesn't. One of the problems I run into is that whitespace line breaks are enforced in the output by the python parser that reads the HTML (the Zope content manager I mentioned in the first post)... so when I actually post the page into the Zope console I have to remove all of the line breaks that I don't want converted to <br>, which I do do before I update the pages.

And I suppose I have to laugh about closing the <li> tags, as I originally didn't do that, but was instructed to by someone I asked for advice.

There is a planned rebuilding of the site (using Vignette, for those of you who know what that is), so I won't be redoing the site from scratch just to get the site to work in Firefox.... I suppose I'll have to ignore my incompatibility errors if there are no relatively quick fixes.

[WebJoel]

Do you have Firefox? If so, also get "HTML Validator" by TIDY. If there are no bona-fide "errors" but only "warnings", you can use the 'click button' to clean-up the code. This can remove dozens or more 'minor errors'. Often tough, so doing will make the page not do so well in some browser(s). But getting rid of the bad code is the first step towards getting the correct code in there. :)

[Ferret]

Do you have Firefox? If so, also get "HTML Validator" by TIDY. If there are no bona-fide "errors" but only "warnings", you can use the 'click button' to clean-up the code. This can remove dozens or more 'minor errors'. Often tough, so doing will make the page not do so well in some browser(s). But getting rid of the bad code is the first step towards getting the correct code in there. :)

I do use firefox, and I've been using the w3 validation tool linked above. At the moment I get 2 errors which I attribute to the parser misunderstanding the javascript toward the end of the page.

Here's the code for the main page that I've been working on... note that the DOCTYPE has been commented out, as if I don't, then the result is like the image posted above: http://img516.imageshack.us/img516/1845/homepagedoctypeffxy9.jpg

Please forgive the nested tables... I don't like it either.

Also, if you need the stylesheets, you can access them by changing the IP to be 212 or 214, which are the load balancing live boxes, rather than 210, which is my staging box.


<!-- DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" -->

<html>
<head>
<base href="http://167.236.208.210/">

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta http-equiv="refresh" content="600">
<title>SPX Corporation</title>
<LINK REL="StyleSheet" HREF="http://167.236.208.210/Objects/styleSheet" TYPE="text/css">
<LINK REL="StyleSheet" HREF="http://167.236.208.210/Objects/homeStyleSheet" TYPE="text/css">

<LINK REL="StyleSheet" HREF="http://167.236.208.210/Objects/topMenuStyles" TYPE="text/css">
<LINK REL="StyleSheet" HREF="http://167.236.208.210/Objects/newStyleSheet" TYPE="text/css">

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

if(window.event + "" == "undefined") event = null;
function HM_f_PopUp(){return false};
function HM_f_PopDown(){return false};
popUp = HM_f_PopUp;
popDown = HM_f_PopDown;

//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--

HM_PG_MenuWidth = 150;
HM_PG_FontFamily = "Arial,sans-serif";
HM_PG_FontSize = 8;
HM_PG_FontBold = 1;
HM_PG_FontItalic = 0;
HM_PG_FontColor = "#000066";
HM_PG_FontColorOver = "white";
HM_PG_BGColor = "#DDDDDD";
HM_PG_BGColorOver = "#FFCCCC";
HM_PG_ItemPadding = 3;

HM_PG_BorderWidth = 1;
HM_PG_BorderColor = "#000066";
HM_PG_BorderStyle = "solid";
HM_PG_SeparatorSize = 1;
HM_PG_SeparatorColor = "#d0ff00";

HM_PG_ImageSrc = "/images/arrow.gif";
HM_PG_ImageSrcLeft = "HM_More_black_left.gif";
HM_PG_ImageSrcOver = "/images/arrow2.gif";
HM_PG_ImageSrcLeftOver = "HM_More_white_left.gif";

HM_PG_ImageSize = 7;
HM_PG_ImageHorizSpace = 0;
HM_PG_ImageVertSpace = 2;

HM_PG_KeepHilite = true;
HM_PG_ClickStart = 0;
HM_PG_ClickKill = false;
HM_PG_ChildOverlap = 20;
HM_PG_ChildOffset = 10;
HM_PG_ChildPerCentOver = null;
HM_PG_TopSecondsVisible = .5;
HM_PG_StatusDisplayBuild =0;
HM_PG_StatusDisplayLink = 0;
HM_PG_UponDisplay = null;
HM_PG_UponHide = null;
HM_PG_RightToLeft = 1;

HM_PG_CreateTopOnly = 0;
HM_PG_ShowLinkCursor = 1;
HM_PG_NSFontOver = true;

//HM_a_TreesToBuild = []

//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2"
SRC="/Objects/Javascript/HM_Loader.js"
TYPE='text/javascript'>
</SCRIPT>


<script language="JavaScript" type="text/javascript">
<!--
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_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


//-->

</script>

<script language="JavaScript" src="http://167.236.208.210/Objects/Javascript/Newsfeed/irxmlfuncs_js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
var PageTitle = "Stock Quote";
var irXML = "Function=StockQuote&Version=2&Ticker=SPW,INRG";
document.write('<' + 'script language="JavaScript" src="http://apps.shareholder.com/irxml/irxml.aspx?CompanyID=SPW&Function=StockQuote&PIN=0101684d59253d3e96fbf8fcb1ce06a8&output=js&Ticker=SPW,INRG" type="text/javascript"><' + '/script>');
</script>
<script language="JavaScript" type="text/javascript">
var PageTitle = "News Releases";
var irXML = "Function=NewsReleases";
document.write('<' + 'script language="JavaScript" src="http://apps.shareholder.com/irxml/irxml.aspx?CompanyID=SPW&PIN=54d69859c2ba5cb8884ab9b567364107&FUNCTION=NewsReleases&NumberPerPage=5&output=js" type="text/javascript"><' + '/script>');
</script>
<script language="JavaScript" type="text/javascript">
function popup(display)
{
var childwindow;
childwindow = window.open(display,'tips',"height=550,width=360,locationbar=no,scrollbars=1");
childwindow.window.moveTo(400,80);
}
</script>

<script language="JavaScript" type="text/javascript">
<!--
function VideoPopUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=342,height=362,left = 25,top = 50');");
}
//-->
</script>

</head>
<body>

<div id="all-div"><!--MAIN DIV-->
<table id="header-table-home" cellspacing="0" cellpadding="0">
<tr>
<td id="logo-td">
<a href="http://167.236.208.210"><img src="/Images/spxbanner1" id="logo-img" border="0" alt="SPX Corporation"></a>
</td>
<td id="search-td">
<form action="http://167.236.208.210/Search/searchResults" method="post">
<span class="searchLbl">Search:&nbsp;</span>

<input class="searchbox" name="search" value="" />
<input class="searchbtn" type="SUBMIT" name="SUBMIT" value="Go" />
</form>
<a class="contactLbl" href="/contact_us">&nbsp;»Contact Us&nbsp;</a>&nbsp;
<a class="sitemapLbl" href="/SiteMap">»Site Map</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>
<tr>

<td colspan="3" height="27px" id="topnav-td">
<div class="topMenu">
<div class="topMenu1">
<A href="/About_SPX" onMouseOut="popDown('HM_Menu1');" onMouseOver="popUp('HM_Menu1',event);" style="text-decoration: none; text-transform: none; color:#797979; padding-left:10px">About SPX</a>
</div>
<div class="topMenu2">
<A href="/Business_Segments" onMouseOut="popDown('HM_Menu2');" onMouseOver="popUp('HM_Menu2',event);" style="text-decoration: none; text-transform: none; color:#797979; padding-left:10px">Business Segments</a>
</div>

<div class="topMenu3">
<A href="/Investor_Relations" onMouseOut="popDown('HM_Menu3');" onMouseOver="popUp('HM_Menu3',event);" style="text-decoration: none; text-transform: none; color:#797979; padding-left:10px">Investor Relations</a>
</div>
<div class="topMenu4">
<A href="/Newsroom" onMouseOut="popDown('HM_Menu4');" onMouseOver="popUp('HM_Menu4',event);" style="text-decoration: none; text-transform: none; color:#797979; padding-left:10px">Newsroom</a>
</div>
<div class="topMenu5">
<A href="/Careers" onMouseOut="popDown('HM_Menu5');" onMouseOver="popUp('HM_Menu5',event);" style="text-decoration: none; text-transform: none; color:#797979; padding-left:10px">Careers</a>

</div>
</div>
</td>
</tr>
</table>



<table id="home-main-table" cellspacing="0" cellpadding="0" border="0">
<tr>
<td rowspan="2">

<table id="home-main-middle-bu-links-table" cellspacing="0" cellpadding="0">

<tr>
<td valign="top">
<img border="0" src="Images/platform.jpg" usemap="#segments" alt="Business Segments">
<map name="segments">
<area shape="rect" coords="40,48,140,70" href="/Business_Segments/Flow%20Technology" alt="Flow Technology">
<area shape="rect" coords="70,90,196,112" href="/Business_Segments/Test%20and%20Measurement" alt="Test and Mesurement">

<area shape="rect" coords="100,129,146,150" href="/Business_Segments/Thermal%20Equipment%20and%20Services" alt="Thermal Equipment and Services">
<area shape="rect" coords="65,165,120,185" href="/Business_Segments/Industrial%20Products" alt="Industrial Products">

</map>
</td>
</tr>
<tr>
<td id="home-main-left-content-td">

<<<<<<<<<continued in next post>>>>>>>>

[Ferret]

<<<<<<continued due to 10000 character limit on posts. :P>>>>>>>>>



<table id="home-main-left-content-table" cellspacing="0" cellpadding="0">
<tr>

<td valign="top"><a href="Newsroom/World_Of_SPX"><img border="0" vspace ="5" src="Images/home-world-title.jpg" alt="Elevating Air Quality"></a></td>
</tr>

<tr>
<td id="home-main-left-content-text">During the summer vacation season, our products help filter the air, reduce pollution and cool critical environments.<a href="Newsroom/World_Of_SPX"> go></a></td>
</tr>
<tr>
<td>
<a href="Newsroom/World_Of_SPX"><img border="0" vspace="20" src="Images/home-world-image.jpg" alt="World of SPX"></a>
</td>

</tr>
</table>

</td>
</tr>
</table>
</td>
<td colspan="2" valign="top" align="right">
<a href="/About_SPX/Customers"><img border="0" src="Images/home-main.jpg" alt="Our Customers"></a>
</td>

</tr>
<tr>
<td>

<table id="home-main-middle-ad-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<A HREF="javascript:VideoPopUp('http://www.exin.tv/mini/cplayer1.html?1,6%20Jun%2007,a,b%20c,U11900-6,0')"><img border="0" src="Images/home-middle-news-title.jpg" alt="SPX CEO appears on CNBC's Street Signs"></a>
</td>

<td id="home-main-middle-ad-image" rowspan="2">

<A HREF="javascript:VideoPopUp('http://www.exin.tv/mini/cplayer1.html?1,6%20Jun%2007,a,b%20c,U11900-6,0')"><img border="0" src="Images/home-middle-news-image.jpg" alt="News Releases"></a>
</td>
</tr>
<tr>
<td id="home-main-middle-ad-text">
Erin Burnett of CNBC's "Street Signs" interviewed SPX Chairman, President and CEO Chris Kearney about SPX, our growth drivers and our end-market business outlook.
<A HREF="javascript:VideoPopUp('http://www.exin.tv/mini/cplayer1.html?1,6%20Jun%2007,a,b%20c,U11900-6,0')">go></A>

</td>

</tr>

</table>


<table id="home-main-middle-news-table" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="Newsroom/Feature_Story" class="home-news-link"><img border="0" src="Images/home-middle-feature-title.jpg" alt="Sourcing Strategy Lowers Spend, Increases Supplier Solutions"></a>
</td>

<td id="home-main-middle-news-image" rowspan="2">
<a href="Newsroom/Feature_Story" class="home-news-link"><img border="0" src="Images/home-middle-feature-image.jpg" alt="Newsroom Feature Story"></a>
</td>

</tr>
<tr>
<td id="home-main-middle-news-text">
Spend less? Sure. But supply chain management is also about how to create more value throughout the process.
<a href="Newsroom/Feature_Story" class="home-news-link">go&gt;</a>

</td>
</tr>
</table>

</td>
<td id="home-main-right-td">

<table id="home-main-right-releases-table" border="0">
<tr>
<td id="home-main-right-stock-title"><img border="0" src="http://shareholder.com/common/tickers/spx_ticker.gif" style="border: 0px; margin-left:15px; vertical-align: bottom;" alt="SPX Stock Ticker, Symbol 'SPW'">

<hr>
</td>
</tr>
<tr>
<td id="home-main-right-releases">
<div id="home-main-right-releases-content">
<script language="JavaScript" type="text/javascript">
<!--
document.write("<b>SPX News:</b><br>");
for(j=1;j<=5;j++){
RelID = eval("RELEASEID"+j);
document.write('<a href="http://investors.spx.com/releaseDetail.cfm?ReleaseID='+RelID+'\">');
RelDate = GetDate(eval("RELEASEDATE"+ j),"mm/dd/yyyy");
document.write(RelDate);
document.write('</a> - ');
document.write(eval("TITLE" + j) );
document.write('<br><br>');
}
//-->
</script>
</div>

</td>
</tr>
</table>

<!--Note that there is 1 each of /td, /tr and /table tags the footer file, in that order-->

</td>
</tr>
</table>

<div id="sitefooter">
&nbsp;&nbsp;&nbsp; <a class="footer" href="/site_disclaimer">Site Access and Use Policy</a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;<a class="footer" href="/Data_Privacy/index_html">Data Privacy</a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;<a class="footer" href="/site_disclaimer">Copyright © 2007 SPX Corporation</a>

</div>
</div><!-- END OF MAIN DIV -->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-1677290-1";
urchinTracker();
</script>

</body>
</html>

[ray326]

Which page has the line break tags?I don't know. I was just looking at what Joel highlighted.

[Ferret]

I don't know. I was just looking at what Joel highlighted.

Heh, I was responding to both of you, I was just confused is all. ^^

I still don't know why adding a DOCTYPE throws Firefox for a loop... and only on my index page: I added a DOCTYPE to the standard header of the rest of the site without any trouble at all.