Forum Moderators: open
It looks like the problem lies here, but I may be wrong.
<div id=HeaderSubMenu9 width=250 style='LEFT: 526px; POSITION: absolute; TOP: 111px; VISIBILITY: hidden;' noWrap onmouseover="holdMenu('HeaderSubMenu9','HeaderMenu9')" onmouseout="releaseMenu('HeaderSubMenu9','HeaderMenu9')"><table border='0' bgcolor='#c6920c' width='206' cellSpacing='0' cellPadding='0' border='0' valign='top' align='center'><tr><td><table cellSpacing='0' cellPadding='0' width='200' height='98%' border='0' align='center' valign='top' bgcolor='#ffffff'><tr><td height='4' colspan='2'></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?DeptID=ALL'><font class='menu3'><b>[FAQs Main Page]</b></font></a></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?DeptID[equal grin]eptID10'><font class='menu3'>Automotive FAQs</font></a></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?DeptID[equal grin]eptID03'><font class='menu3'>Building & Zoning FAQs</font></a></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?DeptID[equal grin]eptID12'><font class='menu3'>City Attorney FAQs</font></a></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?DeptID[equal grin]eptID13'><font class='menu3'>City Clerk FAQs</font></a></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?deptid=deptid14'><font class='menu3'>City Manager FAQs</font></a></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?DeptID[equal grin]eptID21'><font class='menu3'>Coral Gables Museum FAQs</font></a></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?DeptID[equal grin]eptID09'><font class='menu3'>Development FAQs</font></a></td></tr>
<tr><td width='10'><font color='#c6920c'> · </font></td>
Thanks again,
Derek
[edited by: DrDoc at 7:06 am (utc) on June 20, 2007]
[edit reason] No URLs. See posting guidelines [WebmasterWorld.com]. [/edit]
<div id=HeaderSubMenu9 width=250 style='LEFT: 526px; POSITION: absolute; TOP: 111px;...'
My bold
tip: give the div a temporary background color so you can see what effect it has..
that width on the div is not being recognized by either FF or IE (in either rendering mode), however both handle it differently with FF giving it width to right edge of page, and IE giving it no width, and just using the position as a place holder
FF is then centering the menu table in the div per your "align="center" rule on the table, IE has nothing to center in because of the '0' width.
solution is to add the width into the style rule and also give it units so the browser doesn't have to guess!
<div id='HeaderSubMenu9' style='width:250px; LEFT: 526px; POSITION: absolute; TOP: 111px; .....'
This is my DOCTYPE. Thanks again for the help.
For some good reading while we help you sort this out:
[webmasterworld.com...]
[developer.mozilla.org...]
[msdn2.microsoft.com...]
You should consider switching to one of the full doctypes from the list linked to in my previous post. However, that will likely change other things for you as well. But, it is also the best place to start -- with a non-quirks mode rendering in all browsers.
The entire site needs redesigning. Tables shouldn't really be used for site presentation unless you're an artist/esthetics obsessed person and MUST have some thing centered vertically (that's the one thing tables can do that I can think of, that other methods cannot).
It adds bloat to the code, increasing it's size, and making it harder to manage/understand.
The other thing is that it's forcing the user to have javascript enabled, for something that looks like (at a quick glance)it can be done without it.
Lastly, there seems to be no use of CSS stylesheets/rules. This has a few effects, one: it can create unnecessary length in code by putting in redundant information; two: it gives the pages less uniformity/standardization look; three: it's harder to make simple changes of positioning and sizing (ESPECIALLY with tables) for multiple pages. There are other reasons too, but some may not be as significant, or may somewhat fall in to one of the mentioned reasons.
Take a huge look at a bunch of tutorials on CSS, and see if you can convince your superiors that CSS is great investment. The harder convincing will be to pull them away from tables. There are some terrific reasons why, and if you google it, you can find many articles and presentations on why ables should be avoided for presentational layout.
I did not make this site or have anything to do with the creation of this website. I know how out dated and poorly done this is, and I have told them to work on it, but everyone seems too busy to care. I know how to implement CSS and how to replace tables with divs. I plan on staying as an intern for the rest of the Summer, and I wouldn't have enough time to correct all of their errors. So I wont.
Thanks again for your help and input.
-Intern
have told them to work on it, but everyone seems too busy to care
This is relatively common in practical, real world situations. In fact, websites can be based on a table layout and still have very lean and valid code -- pages that render quite well cross-browser. And Search Engines as well as browsers do a decent job even with error recovery in the case of truly error-filled code.
So I can appreciate the trade-off that ogranizations make. It's a business decision based on available resources and potential return. That is what matter more than "purity of code".
And I'm with DrDoc - What was the problem? Was it easily corrected with a full doctype and standards mode rendering?
<tr><td width='10'><font color='#c6920c'> · </font></td><td ><a href='/CGWeb/dep_faq.aspx?DeptID[equal grin]eptID12'><font class='menu3'>City Attorney FAQs</font></a></td></tr>
.
You can simplify it with:
<tr><td width='10'> ·</td><td><a href='/CGWeb/dep_faq.aspx?DeptID[equal grin]eptID12'>City Attorney FAQs</a></td></tr>
.
Apply a class name to the outer table and then style the text using:
table.menu3 tr td { the style }
and style the links using:
table.menu3 tr td a { the style }
.
In a few more steps you can even eliminate the table, as long as each current "row" of the table is enclosed in a paragraph tag, or list tag, or div tag, or some sort of block element.
