Solved

Issues with CSS and Javascript drop-down menu

Posted on 2013-12-02
18
354 Views
Last Modified: 2013-12-22
I have an issue with CSS interfering with my JavaScript drop-down menus.  The JavaScript menu text link colors are different than the hyperlink text colors on the web page.  When the drop-down menu is used, it assumes the CSS color scheme and not the JavaScript.  

For example, on IE 9, if the drop-down menu is used, the drop-down contains a red background and white text. When scrolling the menu, a bright red bar "hovers" above each link. When clicked, the text clicked now becomes a dark blue (#011E4E). When in reality, no colors on the drop-down should be changed.

Below is the part of the CSS with regards to hyperlinks.  

a:link { color: #011E4E; text-decoration: none }
a:visited { color:#011E4E; text-decoration: none}
a:hover { color:#CC0000; text-decoration: underline; cursor: hand}
a:active { color:#011E4E; text-decoration: none}

Open in new window



The web page has a white background, thus the use of the CSS for hyperlink texts.

On newer web browsers, the issue I described does not appear to occur.  But on older web browsers, it does.  I want to prevent this issue from occurring on any web browser version.

How do I apply the CSS to text and not affect my drop-down menu?

Thank you for your suggestions and assistance.
0
Comment
Question by:arendt73
  • 9
  • 4
  • 2
  • +1
18 Comments
 
LVL 7

Expert Comment

by:dimmergeek
ID: 39691030
Do you have a link to the live site, or complete code including full page and javascript?  This does not give us much to work with...
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 39691432
I have to presume your javascript menu is using "a href".  if so, you could define a classname for your css links that way they would only affect the links you want.
0
 

Author Comment

by:arendt73
ID: 39691478
Vincent, Yes, my JavaScript menu uses a "href". Can you give me a quick example of how to define a classname for my CSS links?
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 39691507
<a href="...." class="myClass">........

and in your css file:


a.myClass:link {
   ......whatever
}
a.myClass:hover {
......


that should allow the browser to differentiate between the menu & other links.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39694348
Remember that order is important and depending on what order you apply your css from your original question and the suggested class, you may get unexpected results.
To force a certain style, add !important e.g.
a.class {
  color:#011E4E !important;
}
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39694391
0
 

Author Comment

by:arendt73
ID: 39706865
I should have included the page code to allow a better understanding of the issues I am encountering.  Attached is a test page along with the JavaScript drop-down menu and CSS.

Any assistance addressing my issues or suggestions in improving my page is greatly appreciated.  Thank you.

experts.htm

experts.js

experts.css
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39707381
Can I ask why you are using document.write(...) for your html and css?? this makes no sense to me and will be where a lot of your issues lie
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:arendt73
ID: 39707388
tagit, can you show me how to clean up or make correct?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39707391
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39707401
all I've done is clean it up and fix the javascript errors (some spaces between function calls and some lines missing ;)

html:
<!DOCTYPE html>
<html>
  <head>
    <title>Home | Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="experts.css" rel="stylesheet" type="text/css">
  </head>
  
  <body bgcolor="#F5F5F5">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr> 
        <td height="125" bgcolor="#333333"> 
          <div align="center"> </div></td>
      </tr>
      <tr> 
        <td height="40" align="center" bgcolor="#660000"> 
          <table width="978" height="40" border="0" cellpadding="0" cellspacing="0">
            <tr> 
              <td align="center" valign="top"> <div align="center"> 
                <SCRIPT SRC="experts.js"></SCRIPT>
                </div></td>
            </tr>
          </table></td>
      </tr>
      <tr> 
        <td height="4" colspan="1" bgcolor="#948B00"></td>
      </tr>
      <tr> 
        <td height="8" colspan="1"></td>
      </tr>
      <tr> 
        <td><div align="center"> 
          <table width="980" align="center" border="0" cellpadding="0" cellspacing="0" class="text-medium">
            <tr> 
              <td width="180" valign="top"><table width="180" border="0" cellpadding="0" cellspacing="0" class="text-medium">
                <tr> 
                  <td valign="top"><table width="180" border="0" cellpadding="0" cellspacing="0" class="text-medium">
                    <tr> 
                      <td height="30" colspan="1" bgcolor="#000066"> 
                        <table width="180" height="30" border="0" cellpadding="0" cellspacing="0" class="text-times-small">
                          <tr> 
                            <td width="10">&nbsp;</td>
                            <td valign="middle"><font color="#FFFFFF" class="text-times-small"><strong>NEWS</strong></font></td>
                          </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td align="center" valign="top"><table width="178" border="0" cellpadding="0" cellspacing="0" class="text-medium-bold">
                        <tr> 
                          <td width="10" height="30"></td>
                          <td align="left"><a href="http://www.cnn.com">CNN</a></td>
                        </tr>
                        <tr> 
                          <td height="30">&nbsp;</td>
                          <td align="left"><a href="http://www.foxnews.com">Fox 
                            News</a></td>
                        </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td height="1" colspan="1" bgcolor="#DDDDDD"></td>
                    </tr>
                    </table></td>
                </tr>
                <tr> 
                  <td height="8" colspan="1"></td>
                </tr>
                <tr> 
                  <td valign="top"><table width="180" border="0" cellpadding="0" cellspacing="0" class="text-medium-bold">
                    <tr> 
                      <td height="30" colspan="1" bgcolor="#000066"> 
                        <table width="180" height="30" border="0" cellpadding="0" cellspacing="0" class="text-times-small">
                          <tr> 
                            <td width="10">&nbsp;</td>
                            <td valign="middle"><font color="#FFFFFF" class="text-times-small"><strong>SEARCH 
                              ENGINE </strong></font></td>
                          </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td align="center" valign="top"><table width="178" border="0" cellpadding="0" cellspacing="0" class="text-medium-bold">
                        <tr> 
                          <td width="10" height="30"></td>
                          <td align="left"><a href="http://www.google.com">Google</a></td>
                        </tr>
                        <tr> 
                          <td height="30">&nbsp;</td>
                          <td align="left"><a href="http://www.yahoo.com">Yahoo</a></td>
                        </tr>
                        <tr> 
                          <td height="30">&nbsp;</td>
                          <td align="left"><a href="http://www.bing.com" target="_blank">Bing</a></td>
                        </tr>
                        <tr> 
                          <td height="30">&nbsp;</td>
                          <td align="left"><a href="http://www.lycos.com">Lycos</a></td>
                        </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td height="1" colspan="1" bgcolor="#DDDDDD"></td>
                    </tr>
                    </table></td>
                </tr>
                <tr> 
                  <td height="10" colspan="1"></td>
                </tr>
                </table></td>
              <td width="15">&nbsp;</td>
              <td width="590" valign="top"><table width="590" border="0" cellpadding="0" cellspacing="0" class="text-medium">
                <tr> 
                  <td width="590" valign="top"><table width="590" border="0" cellpadding="0" cellspacing="0">
                    <tr> 
                      <td height="10" colspan="1" valign="top"> <table width="590" border="0" cellpadding="0" cellspacing="0" class="text-medium">
                        <tr> 
                          <td height="30" bgcolor="#003399"> 
                            <table width="590" height="30" border="0" cellpadding="0" cellspacing="0" class="text-times-small">
                              <tr> 
                                <td width="10">&nbsp;</td>
                                <td><font color="#FFFFFF"><strong>WORLD NEWS</strong></font></td>
                              </tr>
                            </table></td>
                        </tr>
                        <tr> 
                          <td valign="top"> 
                            <table width="590" border="0" cellpadding="0" cellspacing="0" class="text-medium">
                              <tr> 
                                <td height="5" width="10" colspan="1"></td>
                                <td height="5" colspan="1"></td>
                              </tr>
                              <tr> 
                                <td>&nbsp;</td>
                                <td valign="top"><table width="580" border="0" cellpadding="0" cellspacing="0" class="text-times-announcements">
                                  <tr> 
                                    <td width="575" valign="top">Cristiano 
                                      Ronaldo, Lionel Messi and Franck Ribery 
                                      will battle it out for the FIFA Ballon 
                                      d'Or, football's most prestigious 
                                      individual accolade. 
                                      <p>Global governing body FIFA whittled 
                                        down the initial 23-man list to 
                                        a final shortlist of three players, 
                                        with the winner set to be announced 
                                        during the annual Ballon d'Or gala 
                                        in Zurich on January 13.</p>
                                      <p>Barcelona and Argentina No. 10 
                                        Messi is hoping to be crowned the 
                                        world's leading player for a record 
                                        fifth year in a row, but he faces 
                                        stiff competition from Real Madrid's 
                                        Ronaldo.</p>
                                      <p>Portugal captain Ronaldo is the 
                                        favorite to clinch the award for 
                                        the second time in his career, having 
                                        previously won it as a Manchester 
                                        United player in 2008, after a year 
                                        which has seen him outscore Messi 
                                        while also firing his country to 
                                        next year's World Cup in Brazil.</p>
                                      <p>&nbsp;</p></td>
                                    <td width="5">&nbsp;</td>
                                  </tr>
                                  <tr> 
                                    <td class="text-small">&nbsp;</td>
                                    <td>&nbsp;</td>
                                  </tr>
                                  </table></td>
                              </tr>
                            </table></td>
                        </tr>
                        <tr> 
                          <td height="1" colspan="1"></td>
                        </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td height="5" colspan="1"></td>
                    </tr>
                    </table></td>
                </tr>
                </table></td>
              <td width="15" valign="top">&nbsp;</td>
              <td width="180" valign="top"><table width="180" border="0" cellpadding="0" cellspacing="0" class="text-medium">
                <tr> 
                  <td valign="top"><table width="180" border="0" cellpadding="0" cellspacing="0" class="text-medium">
                    <tr> 
                      <td height="30" colspan="1" bgcolor="#000066"> 
                        <table width="180" height="30" border="0" cellpadding="0" cellspacing="0" class="text-times-small">
                          <tr> 
                            <td width="10">&nbsp;</td>
                            <td valign="middle"><font color="#FFFFFF"><strong>SPORTS</strong></font></td>
                          </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td align="center" valign="top"><table width="178" border="0" cellpadding="0" cellspacing="0" class="text-medium-bold">
                        <tr> 
                          <td width="10" height="30"></td>
                          <td align="left"><a href="http://www.espn.com" target="_blank">ESPN</a></td>
                        </tr>
                        <tr> 
                          <td height="30">&nbsp;</td>
                          <td align="left"><a href="http://www.foxsports.com" target="_blank">Fox 
                            Sports </a></td>
                        </tr>
                        <tr> 
                          <td height="30">&nbsp;</td>
                          <td align="left"><a href="http://www.cnnsi.com" target="_blank">CNNSI</a></td>
                        </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td height="1" colspan="1" bgcolor="#DDDDDD"></td>
                    </tr>
                    </table></td>
                </tr>
                <tr> 
                  <td height="8" colspan="1"></td>
                </tr>
                <tr> 
                  <td valign="top"><table width="180" border="0" cellpadding="0" cellspacing="0" class="text-medium">
                    <tr> 
                      <td height="30" colspan="1" bgcolor="#000066"> 
                        <table width="180" height="30" border="0" cellpadding="0" cellspacing="0" class="text-times-small">
                          <tr> 
                            <td width="10">&nbsp;</td>
                            <td valign="middle"><font color="#FFFFFF" class="text-times-small">COMEDY</font></td>
                          </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td align="center" valign="top"><table width="178" border="0" cellpadding="0" cellspacing="0" class="text-medium-bold">
                        <tr> 
                          <td width="10" height="30"></td>
                          <td align="left"><a href="http://www.comedycentral.com" target="_blank">Comedy 
                            Central </a></td>
                        </tr>
                        <tr> 
                          <td height="30">&nbsp;</td>
                          <td align="left"><a href="http://www.eonline.com" target="_blank">E 
                            Entertainment </a></td>
                        </tr>
                        </table></td>
                    </tr>
                    <tr> 
                      <td height="1" colspan="1" bgcolor="#DDDDDD"></td>
                    </tr>
                    </table></td>
                </tr>
                <tr> 
                  <td height="10" colspan="1"></td>
                </tr>
                </table></td>
            </tr>
          </table>
          </div></td>
      </tr>
      <tr> 
        <td height="25" valign="bottom"> 
          <div align="center"></div></td>
      </tr>
      <tr>
        <td height="40"> 
          <div align="center"></div></td>
      </tr>
    </table>
    <table width=489 cellspacing=0 border=0 cellpadding=0>
      <tr><td align=left valign=top>
        <span id="menuspan842">
          <table width=489 id="menutable842" cellspacing=0 cellpadding=4 >
            <tr>
              <td class="topcell842" align="LEFT" width=163 height=30 bgcolor=#660000 onMouseOver="openmenu842(\'submenu842_0\')" onMouseOut="timermenu842();">')
                <a href="http://www.experts-exchange.com" target="_blank" title="" class="topitem842">TEST ONE</a>
              </td>
              <td class="topcell842" align="LEFT" width=163 height=30 bgcolor=#660000 onMouseOver="openmenu842(\'submenu842_1\')" onMouseOut="timermenu842();">')
                <a href="http://www.apple.com" target="_self" title="" class="topitem842">TEST TWO</a>
              </td>
              <td class="topcell842" align="LEFT" width=163 height=30 bgcolor=#660000 onMouseOver="openmenu842(\'submenu842_2\')" onMouseOut="timermenu842();">')
                <a href="http://www.microsoft.com" target="_blank" title="" class="topitem842">TEST THREE</a>
              </td>
            </tr>
          </table><p>
          <div id="submenu842_0">
            <table id="submenutable842" width=166 cellspacing=0>
              <tr>
                <td align="LEFT" class="menucell842" height=26 id="s842_0_0" onMouseOver="hilite842(\'s842_0_0\')" onMouseOut="unhilite842(\'s842_0_0\')">
                  <a href="http://www.google.com" target="_blank" title="" class="subitem842" >Google</a>')
                  ;</td>
              </tr>
              <tr>
                <td align="LEFT" class="menucell842" height=26 id="s842_0_1" onMouseOver="hilite842(\'s842_0_1\')" onMouseOut="unhilite842(\'s842_0_1\')">
                  <a href="http://www.yahoo.com" target="_blank" title="" class="subitem842" >Yahoo</a>')
                  ;</td>
              </tr>
              <tr>
                <td align="LEFT" class="menucell842" height=26 id="s842_0_2" onMouseOver="hilite842(\'s842_0_2\')" onMouseOut="unhilite842(\'s842_0_2\')">
                  <a href="http://www.lycos.com" target="_blank" title="" class="subitem842" >Lycos</a>')
                  ;</td>
              </tr>
            </table></div>
          <div id="submenu842_1">
            <table id="submenutable842" width=160 cellspacing=0>
              <tr>
                <td align="LEFT" class="menucell842" height=26 id="s842_1_0" onMouseOver="hilite842(\'s842_1_0\')" onMouseOut="unhilite842(\'s842_1_0\')">
                  <a href="http://www.wbal.com" target="_blank" title="" class="subitem842" >Baltimore</a>')
                  ;</td>
              </tr>
              <tr>
                <td align="LEFT" class="menucell842" height=26 id="s842_1_1" onMouseOver="hilite842(\'s842_1_1\')" onMouseOut="unhilite842(\'s842_1_1\')">
                  <a href="http://www.nydailynews.com/" target="_blank" title="" class="subitem842" >New York</a>')
                  ;</td>
              </tr>
              <tr>
                <td align="LEFT" class="menucell842" height=26 id="s842_1_2" onMouseOver="hilite842(\'s842_1_2\')" onMouseOut="unhilite842(\'s842_1_2\')">
                  <a href="http://www.mercurynews.com/" target="_blank" title="" class="subitem842" >San Jose</a>')
                  ;</td>
              </tr>
            </table></div>
          <div id="submenu842_2">
            <table id="submenutable842" width=159 cellspacing=0>
              <tr>
                <td align="LEFT" class="menucell842" height=26 id="s842_2_0" onMouseOver="hilite842(\'s842_2_0\')" onMouseOut="unhilite842(\'s842_2_0\')">
                  <a href="http://www.cnn.com" target="_blank" title="" class="subitem842" >CNN</a>')
                  ;</td>
              </tr>
              <tr>
                <td align="LEFT" class="menucell842" height=26 id="s842_2_1" onMouseOver="hilite842(\'s842_2_1\')" onMouseOut="unhilite842(\'s842_2_1\')">
                  <a href="http://www.foxnews.com" target="_blank" title="" class="subitem842" >Fox News</a>')
                  ;</td>
              </tr>
            </table></div>
        </span></td></tr></table>');
  </body>
</html>

Open in new window

css:
html, body{
  margin: 0;
  padding: 0;
}

form {
  display:inline;
}
.text-small {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  
}
.text-medium {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
}

.text-medium-bold {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  color: #011E4E;
}

.text-medium-footer {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  color: #011E4E;
}

.text-large {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

.text-xlarge {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
}

.text-times-medium {
  font-family: Times New Roman;
  font-size: 10pt;
}

.text-times-small {
  font-family: Times New Roman;
  font-size: 9pt;
}

.text-times-announcements {
  font-family: Times New Roman;
  font-size: 11pt;
}

.text-times-footer {
  font-family: Times New Roman;
  font-size: 12pt;
}

.searchbox {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #001855;
}

a:link { 
  color: #011E4E; 
  text-decoration: none 
}
a:visited { 
  color:#011E4E; 
  text-decoration: none
}
a:hover { 
  color:#CC0000; 
  
  text-decoration: underline; 
  cursor: hand
}
a:active { 
  color:#011E4E; 
  
  text-decoration: none
    
}

/* Below is converted from JS */
#menuspan842 { 
  position:absolute; 
  width:489px; 
  
}
#menutable842 { 
  border-width: 0px; 
  border-color: #000000; 
  border-style:solid
}
td.menucell842 { 
  padding:2px; 
  padding-left:4px; 
  padding-right:4px; 
  background:#700A0A; 
  border:0px solid #660000; 
  text-align:LEFT; 
  
}
#submenutable842 { 
  background: #660000; 
  border-width: 2px; 
  border-color: #948B00; 
  border-style:solid
}
td.topcell842 {
  text-decoration:none; 
  color:#FFFFFF; 
  font-weight: 700; 
  font-family: Times New Roman; 
  font-size: 13px; 
  font-style:normal; 
  text-align:LEFT; 
  
}
a.topitem842 {
  text-decoration:none; 
  color:#FFFFFF; 
  font-weight: 700; 
  font-family: Times New Roman; 
  font-size: 13px; 
  font-style:normal; 
  
} 
a.topitem842:hover {
  text-decoration:none; 
  color:#FFFFFF; 
  font-weight: 700; 
  font-family: Times New Roman; 
  font-size: 13px; 
  font-style:normal;
}
a.subitem842 {
  text-decoration:none; 
  color:#FFFFFF; 
  font-weight: 700; 
  font-family: Arial; 
  font-size: 12px; 
  font-style:normal; 
  
} 
a.subitem842:hover {
  text-decoration:none; 
  color:#FFFFFF; 
  font-weight: 700; 
  font-family: Arial; 
  font-size: 12px; 
  font-style:normal; 
  
}
P.MN842 {
  margin:0px; 
  color:#FFFFFF; 
  font-weight: 700; 
  font-family: Times New Roman; 
  font-size:13px; 
  font-style:normal; 
}
P.SMN842 {
  text-decoration:none; 
  color:#FFFFFF; 
  font-weight: 700; 
  font-family: Arial; 
  font-size:12px; 
  font-style:normal; 
  margin:0px; 
  
}
#submenu842_0 { 
  position:absolute; 
  left:0px; 
  top:42px; 
  visibility:hidden; 
  
}
#submenu842_1 { 
  position:absolute; 
  left:168px; 
  top:42px; 
  visibility:hidden; 
  
}
#submenu842_2 { 
  position:absolute; 
  left:329px; 
  top:42px; 
  visibility:hidden; 
  
}

Open in new window

javascript:
var thisbrowser842;
var hidetimer842 = null;
if(document.layers){ thisbrowser842='NN4'; }
if(document.all){ thisbrowser842='IE'; }
if(!document.all && document.getElementById){ thisbrowser842='NN6'; }
function showmenu842(menuname)
{
  if(thisbrowser842=='NN4') document.layers[menuname].visibility = 'visible';
  if(thisbrowser842=='IE') document.all[menuname].style.visibility = 'visible';
  if(thisbrowser842=='NN6') document.getElementById(menuname).style.visibility = 'visible';
  if(hidetimer842) clearTimeout(hidetimer842);}
function timermenu842()
{
  if(hidetimer842) clearTimeout(hidetimer842);
  hidetimer842 = setTimeout(hideall842,1000);
}
function hidemenu842(menuname)
{
  if(thisbrowser842=='NN4') document.layers[menuname].visibility = 'hidden';
  if(thisbrowser842=='IE') document.all[menuname].style.visibility = 'hidden';
  if(thisbrowser842=='NN6') document.getElementById(menuname).style.visibility = 'hidden';
}
function hilite842(menuitem) 
{
  if(typeof(currentpage842)!='undefined' && menuitem==currentpage842) return;
  if(thisbrowser842=='IE') document.all[menuitem].style.backgroundColor = '#CC0000';
  if(thisbrowser842=='NN6') document.getElementById(menuitem).style.backgroundColor = '#CC0000';
  if(hidetimer842) clearTimeout(hidetimer842);
}
function unhilite842(menuitem) 
{
  if(typeof(currentpage842)!='undefined' && menuitem==currentpage842) return;
  if(thisbrowser842=='IE') document.all[menuitem].style.backgroundColor = '#700A0A';
  if(thisbrowser842=='NN6') document.getElementById(menuitem).style.backgroundColor = '#700A0A';
  if(hidetimer842) clearTimeout(hidetimer842);
  hidetimer842 = setTimeout(hideall842,1000);
}
function hideall842()
{
  hidemenu842('submenu842_0');
  hidemenu842('submenu842_1');
  hidemenu842('submenu842_2');
}
function openmenu842(menuname)
{
  showmenu842(menuname);
  if(menuname!='submenu842_0') hidemenu842('submenu842_0');
  if(menuname!='submenu842_1') hidemenu842('submenu842_1');
  if(menuname!='submenu842_2') hidemenu842('submenu842_2');
}

Open in new window

0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 39707409
Check this demo link http://jsbin.com/AbOGUlIr/1.  Let me know if it's working as you'd like.
0
 

Author Comment

by:arendt73
ID: 39708415
tagit, can you show me what you cleaned up? You mentioned I had JavaScript errors (some spaces between function calls) and some lines missing.  

When I look at your preview, the drop-downs now function correctly, but the table is out of place.

If the issue is only with the JavaScript, can it be cleaned up? If so, can it then be inserted into the html as a script?

Thank you.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39709813
Sure and I'll find all references but the main one was where you set the background colour of a style there was a space between the dot and the property.
I've also removed the quotes around the arguments for your setTimeout functions as its now accepted practice to pass a function not a string.
As for the table layout, I put that html at the end of the body. In hindsight it should probably go at the top, as that would've been the natural order of execution of the browser when the document.write was in place
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39710003
This is with the menu moved to the top of the body tag: http://jsbin.com/AbOGUlIr/2

As for the changes, I moved all the document.writes from javascript to the HTML.  This is important as search engines won't pick up this info if it was created from javascript.  Helps to index your site.  It also makes it easier to see what's going on with you CSS.
Given you are having layout issues and it's not clear how the browser will parse the CSS and script, it makes sense to move in this direction.

If you're trying to defer the loading of script and CSS you as they're not required to show the initial page, then the better way to do that is to use javascript to create <script> and <link> tags after the page has loaded (eg via window.onload() event) to reference your javascript and CSS but lets get the page looking and working the way you want before even going down this path.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39715093
Thanks for the points but did you mean to grade it a B?
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now