Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Issues with CSS and Javascript drop-down menu

Posted on 2013-12-02
18
Medium Priority
?
391 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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
 

Author Comment

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

Expert Comment

by:Rob
ID: 39707391
0
 
LVL 43

Expert Comment

by:Rob
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 43

Accepted Solution

by:
Rob earned 2000 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 43

Expert Comment

by:Rob
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 43

Expert Comment

by:Rob
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 43

Expert Comment

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

636 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