TechSpot

Web page not displaying correctly in firefox

By c_mcbrutal
Feb 12, 2007
  1. Hi all,

    I am having a problem with our website displaying correctly in firefox. The hidden menu on services appears way down the page from where it should. Can anyone suggest anything?

    css source
    ========
    body {
    margin-bottom: 0px;
    font-family: Verdana;
    font-size: 10px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #878EAA;
    }

    td, textarea, input, select {
    font-family: Verdana;
    font-size: 10px;
    color: #A3C350;
    font-weight: normal;
    }
    .tableDetail {
    font-size: 10px;
    font-family: Verdana;
    color: #878EAA;
    }
    .text1 {
    font-family: Verdana;
    font-size: 11px;
    color: #898989;
    }
    .text2 {
    font-family: Verdana;
    font-size: 10px;
    font-weight: normal;
    color: #141414;
    }
    .text3 {
    font-family: Verdana;
    font-size: 10px;
    font-weight: normal;
    color: #28a8c5;
    }
    .frame {
    font-family: Verdana;
    font-size: 10px;
    color: #FFFFFF;
    border: 1px solid #990000;
    }
    .txt {
    font-family: Verdana;
    font-size: 11px;
    color: #63803B;
    line-height:15px;
    }
    .txt a{
    font-family: Verdana;
    font-size: 11px;
    color: #63803B;
    line-height:15px;
    text-decoration:none;
    }
    .txt a:hover{
    font-family: Verdana;
    font-size: 11px;
    color: #555555;
    line-height:15px;
    text-decoration:underline;
    }
    .blacktext{
    font-family: verdana;
    font-size: 11px;
    color: #585858;
    line-height:15px;
    }
    .blacktext a{
    font-family: verdana;
    font-size: 11px;
    color: #585858;
    line-height:15px;
    text-decoration:none
    }

    .blacktext a:hover{
    font-family: verdana;
    font-size: 11px;
    color: #f9631f;
    line-height:15px;
    text-decoration:underline;
    }
    .whitetext{
    font-family: arial;
    font-size: 11px;
    color: #FFF;
    line-height:15px;
    }
    .whitetext a{
    font-family: arial;
    font-size: 11px;
    color: #FFF;
    line-height:15px;
    }
    .whitetext a:hover{
    font-family: arial;
    font-size: 11px;
    color: #000;
    line-height:15px;
    }
    .blacktext1{
    font-family: verdana;
    font-size: 12px;
    color: #000000;
    line-height:15px;
    }
     
  2. c_mcbrutal

    c_mcbrutal TS Rookie Topic Starter

    index page source
    =============
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head></meta></html>
    <META NAME="keywords" CONTENT="Business Development Initiative, BDI, business management consultancy, executive business consultancy">
    <title>Your Strategic Business Partner</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #666666;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    }
    .SubMenuBox1 {
    position:absolute;
    width:150px;
    border:1px solid #000;
    background:#F5FBE6;
    visibility:hidden;
    left: 225px;
    top: 195px;
    background-color: #F4F4F4;
    }

    </style>
    <script language="javascript">
    function getRealLeft(el){
    xPos = document.getElementById(el).offsetLeft;
    tempEl = document.getElementById(el).offsetParent;
    while (tempEl != null) {
    xPos += tempEl.offsetLeft;
    tempEl = tempEl.offsetParent;
    }
    return xPos;
    }

    function getRealTop(el){
    yPos = document.getElementById(el).offsetTop;
    tempEl = document.getElementById(el).offsetParent;
    while (tempEl != null) {
    yPos += tempEl.offsetTop;
    tempEl = tempEl.offsetParent;
    }
    return yPos;
    }
    function ShowMenu( num ) {
    if( document.getElementById( "Box"+num ).style.visibility != "visible" ) {
    document.getElementById( "Box"+num ).style.top = getRealTop( "MenuBox"+num )+10;
    document.getElementById( "Box"+num ).style.left = getRealLeft( "MenuBox"+num )+83;
    document.getElementById( "Box"+num ).style.visibility = "visible";
    }

    }

    function HideMenu( num ) {
    document.getElementById( "Box" + num ).style.visibility = 'hidden';
    }
    </script>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

    .style1 {color: #A3C350}
    .style2 {color: #999999}
    -->
    </style>
    </head>
    </meta>
    <body>
    <table width="767" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border:1px solid #e6e6e6">
    <tr>
    <td width="173" height="639" valign="top" bgcolor="#a3c350"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top"><div align="center"><img src="images/bdi logo white txt.gif" width="58" height="66" /></div></td>
    </tr>
    <tr>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#a3c350">
    <tr>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td><img src="images/menu1.gif" width="123" height="23" border="0" usemap="#Map" /></td>
    </tr>
    <tr>
    <td><img src="images/mnu2.gif" width="123" height="23" border="0" usemap="#Map2" /></td>
    </tr>
    <tr>
    <td><div id="MenuBox2"><img src="images/menu3.gif" width="123" height="23" border="0" usemap="#Map3" /></div></td>
    </tr>
    <tr>
    <td><img src="images/menu4.gif" width="123" height="23" border="0" usemap="#Map4" /></td>
    </tr>
    <tr>
    <td><img src="images/menu5.gif" width="123" height="23" border="0" usemap="#Map5" /></td>
    </tr>
    <tr>
    <td><img src="images/menu6.gif" width="123" height="23" border="0" usemap="#Map6" /></td>
    </tr>
    <tr>
    <td><img src="images/menu7.gif" width="123" height="23" border="0" usemap="#Map7" /></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td bgcolor="#A3C350"><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td valign="top" bgcolor="#63803B" class="whitetext" style="padding:12px"><strong>BDI Business Development Initiative Limited,<br />
    Unit 6 Brechin Business Centre, <br />
    10 Southesk Street, Brechin DD9 6DY <br />
    <br />
    Tel.: 01356 626608 <br />
    Fax: 01356 629377 <br />
    <br />
    E-Mail : <a href="mailto:info@bdinitiative.co.uk">info@bdinitiative.co.uk</a><a href="mailto:info@bdilimited.com"></a></strong></td>
    </tr>
    </table></td>
    <td width="594" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top"><img src="images/img.gif" width="127" height="269" /><img src="images/img1.gif" width="117" height="269" /><img src="images/img2.gif" width="115" height="269" /><img src="images/img3.gif" width="97" height="269" /><img src="images/img4.gif" width="102" height="269" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td valign="top" background="../BDI web files/images/bg.gif"><img src="../BDI web files/images/bg.gif" width="16" height="31" /><img src="images/wel_txt.gif" width="450" height="30" /></td>
    </tr>
    <tr>
    <td valign="top"><table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="42%" rowspan="2" align="center" valign="top"><img src="images/wel_img.gif" width="217" height="116" /></td>
    <td width="58%">&nbsp;</td>
    </tr>
    <tr>
    <td style="padding-right:5px; padding-left:5px"><p class="blacktext" align="justify">We offer business solutions to the Dundee and Angus Business Community.<br />
    <span class="txt style1">BDI Business Development Initiative Limited </span> is constantly striving to maintain and improve the service we provide to all of our Clients Businesses and Customers.<br />
    </p> <div align="right"><a href="about.html">More</a></div></td>
    </tr>
    <tr>
    <td colspan="2" align="center" valign="top" background="../BDI web files/images/bg_bar.gif"><img src="../BDI web files/images/bg_bar.gif" width="3" height="7" /></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td valign="top"><br />
    <table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="64%"><img src="images/servic_txt.gif" width="113" height="36" /></td>
    <td width="36%" rowspan="2"><img src="images/cat_img.gif" width="180" height="131" /></td>
    </tr>
    <tr>
    <td class="blacktext"><ul>
    <li><strong><a href="sales.html">Sales representation</a><br />
    </strong></li>
    <li><strong><a href="market.html">Market Research and Database Profiling</a> <br />
    </strong></li>
    <li><strong><a href="business.html">Business Consultancy</a> </strong></li>
    <li><strong><a href="project.html">Project Consultancy </a><br />
    </strong></li>
    <li><strong><a href="retainer.html">Retainer Consultancy</a> </strong></li>
    </ul></td>
    </tr>
    </table>
    <p align="right" class="style2">&copy; BDI Business Development Initiative Limited 2007 </p></td>
    </tr>
    <tr>
    <td valign="top">&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>

    <map name="Map" id="Map"><area shape="rect" coords="20,2,69,19" href="index.html" />
    </map>
    <map name="Map2" id="Map2"><area shape="rect" coords="22,1,92,23" href="about.html" />
    </map>
    <map name="Map3" id="Map3">
    <area shape="rect" coords="19,4,88,23" href="services.html" onmouseover="javascript:ShowMenu( 2 );" onmouseout="javascript:HideMenu( 2 );"/>
    </map>
    <map name="Map4" id="Map4"><area shape="rect" coords="22,1,120,23" href="testimonial.html" />
    </map>
    <map name="Map5" id="Map5"><area shape="rect" coords="22,4,105,25" href="future.html" />
    </map>
    <map name="Map6" id="Map6">
    <area shape="rect" coords="23,3,110,24" href="links.html" />
    </map>
    <map name="Map7" id="Map7"><area shape="rect" coords="23,1,99,34" href="contact.html" />
    </map>
    <div align="left" id = "Box2" class="SubMenuBox1" onmouseover="javascript:ShowMenu( 2 );" onmouseout="javascript:HideMenu( 2 );">
    <table width="100%" border="0" cellpadding="3" cellspacing="0" class="txt">
    <tr>
    <td class="txt" style="border-bottom:1px solid #666666; padding-left:12px"><a href="../BDI web files/sales.html">Sales Representation</a></td>
    </tr>
    <tr>
    <td class="txt" style="border-bottom:1px solid #666666; padding-left:12px"><a href="../BDI web files/market.html">Market R & D Profiling</a></td>
    </tr>
    <tr>
    <td class="txt" style="border-bottom:1px solid #666666; padding-left:12px"><a href="../BDI web files/business.html">Business Consultancy </a></td>
    </tr>
    <tr>
    <td class="txt" style="border-bottom:1px solid #666666; padding-left:12px"><a href="../BDI web files/project.html">Project Consultancy</a></td>
    </tr>
    <tr>
    <td class="txt" style="padding-left:12px" ><a href="../BDI web files/retainer.html" >Retainer Consultancy</a></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    website address is http://www.bdinitiative.co.uk
     
  3. RealBlackStuff

    RealBlackStuff TS Rookie Posts: 6,503

    The 'MenuBox2' entry is missing in your stylesheet.
    Should look like:
    #MenuBox2{LEFT: 155px; WIDTH:180px; POSITION: absolute; TOP: 131px}
    You need to figure out the correct coordinates, the above is just a sample.
     
  4. Samstoned

    Samstoned TechSpot Paladin Posts: 1,018

    looks like coordinates are wrong
    pix is good for IE % sometimes works better
    java scripting can be a pain
    check other pages looks like diff logo that works with those existing numbers
    you may want to try a flash pull down menu
    if your site can handle the code
     
  5. c_mcbrutal

    c_mcbrutal TS Rookie Topic Starter

    Thanks guys, I will go have a look at it
     
  6. RealBlackStuff

    RealBlackStuff TS Rookie Posts: 6,503

    FYI: next time you have a problem, please don't bother posting all the source text, anybody can see that in his/her browser by clicking 'View/Page Source'.
     
  7. c_mcbrutal

    c_mcbrutal TS Rookie Topic Starter

    no probs, won't do it again
     
  8. Tedster

    Tedster Techspot old timer..... Posts: 6,000   +15

    close out or minimize toolbars. Bear in mind not all web-pages are universally compliant. Some may force you to use IE7 to display correctly.
     
Topic Status:
Not open for further replies.

Similar Topics

Add New Comment

You need to be a member to leave a comment. Join thousands of tech enthusiasts and participate.
TechSpot Account You may also...