#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    1
    Rep Power
    0

    CSS broken in IE


    I cannot find a way to make this CSS code to work in IE. It works flawlessly in all other browers.

    Can someone look at this and help me fix it?

    Code:
    <style type="text/css">
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:#ECECFF;
    color:#000000;
    width:0px;
    padding:0px;
    text-align:center;
    font-weight:bold;
    /*/*/border:0px solid #000000;/* */
    }
    
    .submenu{
    margin-bottom: 0.5em;
    }
    </style>
    
    <script type="text/javascript">
    
    
    var persistmenu="no" 
    var persisttype="sitewide"
    
    if (document.getElementById){ 
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }
    
    function SwitchMenu(obj){
      if(document.getElementById){
      var el = document.getElementById(obj);
      var ar = document.getElementById("masterdiv").getElementsByTagName("span");
        if(el.style.display != "block"){ 
          for (var i=0; i<ar.length; i++){
            if (ar[i].className=="submenu") 
            ar[i].style.display = "none";
          }
          el.style.display = "block";
        }else{
          el.style.display = "none";
        }
      }
    }
    
    function get_cookie(Name) { 
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { 
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    function onloadfunction(){
    if (persistmenu=="no"){
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=get_cookie(cookiename)
    if (cookievalue!="")
    document.getElementById(cookievalue).style.display="block"
    }
    }
    
    function savemenustate(){
    var inc=1, blockid=""
    while (document.getElementById("sub"+inc)){
    if (document.getElementById("sub"+inc).style.display=="block"){
    blockid="sub"+inc
    break
    }
    inc++
    }
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
    document.cookie=cookiename+"="+cookievalue
    }
    
    if (window.addEventListener)
    window.addEventListener("load", onloadfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", onloadfunction)
    else if (document.getElementById)
    window.onload=onloadfunction
    
    if (persistmenu=="no" && document.getElementById)
    window.onunload=savemenustate
    
    </script>
    <div id="masterdiv">
    
      <div class="menutitle" onclick="SwitchMenu('sub1')"><embed src="http://lynric.org/resources/home%20button.jpg"></div>
      <span class="submenu" id="sub1">
        - <a href="http://lynric.org">Home</a><br>
        - <a href="#featured">Featured</a><br>
        - <a href="http://lynric.org/survey.php">Survey</a><br>
      </span>
    
      <div class="menutitle" onclick="SwitchMenu('sub2')"><embed src="http://lynric.org/resources/photo%20button.jpg"></div>
      <span class="submenu" id="sub2">
        - <a href="http://lynric.org/sarahs-photos.php">Sarah's Photos</a><br>
        - <a href="http://lynric.org/photo-albums.php">Family Albums</a><br>
        - <a href="http://lynric.org/sarahs-video.php">Videos</a>
      </span>
    
      <div class="menutitle" onclick="SwitchMenu('sub3')"><embed src="http://lynric.org/resources/spiel%20button.jpg"></div>
      <span class="submenu" id="sub3">
        - <a href="http://lynric.org/spiel.php">Spiel</a><br>
        - <a href="http://mormon.org/me/3BMS-eng/">Lynette's Mormon.org</a><br>
        - <a href="http://mormon.org/me/2QC1-eng/Eric">Eric's Mormon.org</a><br>
      </span>
      
      <div class="menutitle" onclick="SwitchMenu('sub4')"><embed src="http://lynric.org/resources/family%20button.jpg"></div>
      <span class="submenu" id="sub4">
        - <a href="http://lynric.org/family.php">Family History</a><br>
        - <a href="http://lynric.org/family-contact-page.php">Online Conference</a><br>
      </span>
    
        <div class="menutitle" onclick="SwitchMenu('sub5')"><embed src="http://lynric.org/resources/Boxes%20button.jpg"></div>
      <span class="submenu" id="sub5">
        - <a href="http://lynric.org/lynettes-bio.php">Lynette</a><br>
        - <a href="http://lynric.org/erics-bio.php">Eric</a><br>
        - <a href="http://lynric.org/sarahs-bio.php">Sarah</a><br>
        - <a href="http://lynric.org/lynric-bio.php">Lynric</a><br>
      </span>
    
    </div>
    I'm new to CSS and need some help, thanks to all who help.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    44
    Rep Power
    2
    Originally Posted by cirelosborn
    I cannot find a way to make this CSS code to work in IE. It works flawlessly in all other browers.

    Can someone look at this and help me fix it?

    Code:
    <style type="text/css">
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:#ECECFF;
    color:#000000;
    width:0px;
    padding:0px;
    text-align:center;
    font-weight:bold;
    /*/*/border:0px solid #000000;/* */
    }
    
    .submenu{
    margin-bottom: 0.5em;
    }
    </style>
    I'm new to CSS and need some help, thanks to all who help.
    If you're combining javascript HTML and CSS all into one file right now, you should seperate them out. Link the JS and CSS to the HTML file in the <head>, make things much cleaner and much easier to diagnose problems instead of looking for a needle in a gumbo of different syntaxes.

    Code:
    	<head>
    		<link href="fileName.css" rel="stylesheet" type="text/css" />
    		<script src="fileName.js" type="text/javascript"></script>
    	</head>
    On to the CSS. I think you need to remove the width property. The div is going to take the dimensions of whatever content it's housing, unless you give it a specific dimension like "width: 0px;". Also, try replacing the <embed> tags with <img> tags, that's what those are for. Hope this helps.

IMN logo majestic logo threadwatch logo seochat tools logo