SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Drop Down Will not work in IE, Will in FireFox!

    I have followed the exact instructions for creating a horizontal drop down menu here: http://www.alistapart.com/articles/horizdropdowns/

    The final result is that it will work in FireFox, but not in IE. I have copy and pasted everything several times but to no avail. Any ideas what I can do to make it work in IE...what happens is it will bring one of the drop outs up, but it basically freezes on it and won't go back off.

  2. #2
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the page, I got the same result, doesn't work in IE but works in Firefox, but I figured that I would help out where I could and just through together this page so that someone else can look at this easyer.
    HTML Code:
    <html>
    <script>
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replaceĽ
    	(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    </script>
    <head>
    <style type="text/css">
    <!--
    li:hover ul, li.over ul { 
    	display: block; }
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 150px;
    	border-bottom: 1px solid #ccc;
    }
    ul li {
    	position: relative;
    	float: left;
    }
    li ul {
    	position: absolute;
    	left: 149px;
    	top: 0;
    	display: none;
    }
    ul li a{
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fff;
    	padding: 5px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    	height: 1%
    }
    -->
    </style></head>
    
    <body>
      <ul id="nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a> 
          <ul> 
            <li><a href="#">History</a></li> 
            <li><a href="#">Team</a></li> 
            <li><a href="#">Offices</a></li> 
          </ul> 
        </li> 
        <li><a href="#">Services</a> 
          <ul> 
            <li><a href="#">Web Design</a></li> 
            <li><a href="#">Internet 
                Marketing</a></li> 
            <li><a href="#">Hosting</a></li> 
            <li><a href="#">Domain Names</a></li> 
            <li><a href="#">Broadband</a></li> 
          </ul> 
        </li>
        <li><a href="#">Contact Us</a> 
          <ul> 
            <li><a href="#">United Kingdom</a></li> 
            <li><a href="#">France</a></li> 
            <li><a href="#">USA</a></li> 
            <li><a href="#">Australia</a></li> 
          </ul> 
        </li> 
      </ul>
    </body>
    </html>
    Last edited by bbmx952; Feb 9, 2005 at 15:01.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't seem to work in IE6 for me after trying your suggestion.

  4. #4
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It wasn't a suggestion, I read ur post and looked at the tutorial, then when I had the page together it didnt work in IE either, so i just posted up the html so that when someone comes along they dont have to go out to that site and peice everything together.

  5. #5
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I got it to work. I think that you probaly miss inturpreted what he was saying about the css styling. But anyways heres the code:
    HTML Code:
    <html>
    <head>
    <title>Horizontal Drop Down Menus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    // JavaScript Document
    
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    </script>
    <style type="text/css">
    ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	width: 150px; /* Width of Menu Items */
    	border-bottom: 1px solid #ccc;
    	}
    
    ul li {
    	position: relative;
    	}
    	
    li ul {
    	position: absolute;
    	left: 149px; /* Set 1px less than menu width */
    	top: 0;
    	display: none;
    	}
    
    /* Styles for Menu Items */
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #777;
    	background: #fff; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #ccc;
    	border-bottom: 0;
    	}
    
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */
    
    ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
    		
    li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    		
    li:hover ul, li.over ul { display: block; } /* The magic */
    </style>
    </head>
    <body> 
    <ul id="nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a> 
        <ul> 
          <li><a href="#">History</a></li> 
          <li><a href="#">Team</a></li> 
          <li><a href="#">Offices</a></li> 
        </ul> 
      </li> 
      <li><a href="#">Services</a> 
        <ul> 
          <li><a href="#">Web Design</a></li> 
          <li><a href="#">Internet Marketing</a></li> 
          <li><a href="#">Hosting</a></li> 
          <li><a href="#">Domain Names</a></li> 
          <li><a href="#">Broadband</a></li> 
        </ul> 
      </li> 
      <li><a href="#">Contact Us</a> 
        <ul> 
          <li><a href="#">United Kingdom</a></li> 
          <li><a href="#">France</a></li> 
          <li><a href="#">USA</a></li> 
          <li><a href="#">Australia</a></li> 
        </ul> 
      </li> 
    </ul> 
    </body>
    </html>

  6. #6
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    glad it worked for you! Doesn't do a thing for me. I'm sure my CSS is fine...or at least I think so.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Horizontal Drop Down Menus</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="drop_down.js"></script>
    <style type="text/css">
    @import "style4.css";
    </style>
    </head>
    <body>
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
    <ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Offices</a></li>
    </ul>
    </li>
    <li><a href="#">Services</a>
    <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Internet Marketing</a></li>
    <li><a href="#">Hosting</a></li>
    <li><a href="#">Domain Names</a></li>
    <li><a href="#">Broadband</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Us</a>
    <ul>
    <li><a href="#">United Kingdom</a></li>
    <li><a href="#">France</a></li>
    <li><a href="#">USA</a></li>
    <li><a href="#">Australia</a></li>
    </ul>
    </li>

    </ul>
    </body>
    </html>


    -------------------------------------------------------------------------


    Here is the CSS:



    /* CSS Document */

    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */ed

    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    }
    ul li {
    position: relative;
    }
    li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    }
    ul li a {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    }
    li:hover ul, li.over ul {
    display: block; }


    -------------------------------------------------------------------------------------


    And lastly, here is my .js:


    // JavaScript Document

    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replaceĽ
    (" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;

  8. #8
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found the problem it's in your java script:
    Code:
    // JavaScript Document
    
    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    The diffrence between yours and mine:
    Code:
    //Mine:
    this.className=this.className.replace(" over", "");
    
    //Yours:
    this.className=this.className.replaceĽ
    (" over", "");
    IE doesn't seem to like your replaceĽ.

  9. #9
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx for the help, very much appreciated!!

  10. #10
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying the above drop down menu into my page but nothing seems to work. Here is my page:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><script src="header/javascript_files/header.js"></script>
    </td>
    </tr>
    <tr>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100%" valign="top"><div class="main" id="main"> <img src="clear_spc.gif" width="1" height="37">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="48%" rowspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="4"><img src="pr.gif" width="402" height="28"></td>
    </tr>
    <tr>
    <td colspan="2">WANT TO PLACE MENU HERE</td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="1.gif" width="84" height="80"></div></td>
    <td align="left" valign="top" class="last_space"><div align="left" class="content_title">Content</div>
    Content
    <div align="left"><a href="#">Learn More</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="3.jpg" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Content...</div>
    Content.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="6.gif" width="84" height="80"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Content</div>
    Content.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td height="35" colspan="2"></td>
    </tr>
    <tr>
    <td colspan="2"><img src="processes" width="402" height="28"></td>
    </tr>
    <tr>
    <td class="last_space" colspan="2">Last Updated: February 5, 2005</td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" valign="top" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    </table></td>
    <td width="15"></td>
    <td width="1" bgcolor="#eaeaea"></td>
    <td width="15"></td>
    <td width=48% rowspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="4"><img src="pro.gif" width="402" height="28"></td>
    </tr>
    <tr>
    <td class="last_space" colspan="2">Last Updated: February 7, 2005</td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="2.gif" width="84" height="48"></div></td>
    <td align="left" valign="top" class="last_space"><div align="left" class="content_title">Content...</div>
    Content
    <div align="left"><a href="#">Learn More</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="4.jpg" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Content..</div>
    Content.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="5.jpg" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Content...</div>
    Content.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td height="35" colspan="2"></td>
    </tr>
    <tr>
    <td colspan="4"><img src="forms.gif" width="402" height="28"></td>
    </tr>
    <tr>
    <td class="last_space" colspan="2">Last Updated: February 7, 2005</td>
    </tr>
    <tr>
    <td align="left" colspan="2" valign="top" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Learn More</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Viewers Content
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td colspan="2" class="last_space" align="left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</td>
    </tr>
    </table></td>
    </tr>
    </table>
    </div></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td height="30" bgcolor="#0C2577"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><script src="footer/footer.js"></script></td>
    </tr>
    </table>
    </tr>
    </table>
    </body>
    </html>


    -------------------------------------------------------------------------------

    I have not added anything to this as far as the drop down menu is concerned. From playing around, I am certain I just don't have things where they should be...if you can help I'd appreciate it once again! This java stuff can be confusing! I have put the WANT TO PLACE MENU HERE, where I want it to go.
    Last edited by JoeSomebody; Feb 10, 2005 at 11:53.

  11. #11
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, are you using the same style sheet and javascript file as before? If so, the first thing that your missing is that you haven't added any refrance to the drop down menu. Also, I put it together, but it looks a little weird to me but this is probaly because I dont have and pics and because I dont have your other js that you have linked to this page(header.js and footer.js). Anyways try this and see if this is what it's supposed to look like.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    <script src="drop_down.js"></script>
    </head>
    <body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><script src="header/javascript_files/header.js"></script>
    </td>
    </tr>
    <tr>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100%" valign="top"><div class="main" id="main"> <img src="clear_spc.gif" width="1" height="37">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="48%" rowspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="4"><img src="pr.gif" width="402" height="28"></td>
    </tr>
    <tr>
    <td colspan="2"><ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
    <ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Offices</a></li>
    </ul>
    </li>
    <li><a href="#">Services</a>
    <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Internet Marketing</a></li>
    <li><a href="#">Hosting</a></li>
    <li><a href="#">Domain Names</a></li>
    <li><a href="#">Broadband</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Us</a>
    <ul>
    <li><a href="#">United Kingdom</a></li>
    <li><a href="#">France</a></li>
    <li><a href="#">USA</a></li>
    <li><a href="#">Australia</a></li>
    </ul>
    </li>
    
    </ul></td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="1.gif" width="84" height="80"></div></td>
    <td align="left" valign="top" class="last_space"><div align="left" class="content_title">Content</div>
    Content
    <div align="left"><a href="#">Learn More</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="3.jpg" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Content...</div>
    Content.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="6.gif" width="84" height="80"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Content</div>
    Content.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td height="35" colspan="2"></td>
    </tr>
    <tr>
    <td colspan="2"><img src="processes" width="402" height="28"></td>
    </tr>
    <tr>
    <td class="last_space" colspan="2">Last Updated: February 5, 2005</td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" valign="top" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    </table></td>
    <td width="15"></td>
    <td width="1" bgcolor="#eaeaea"></td>
    <td width="15"></td>
    <td width=48% rowspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="4"><img src="pro.gif" width="402" height="28"></td>
    </tr>
    <tr>
    <td class="last_space" colspan="2">Last Updated: February 7, 2005</td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="2.gif" width="84" height="48"></div></td>
    <td align="left" valign="top" class="last_space"><div align="left" class="content_title">Content...</div>
    Content
    <div align="left"><a href="#">Learn More</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="4.jpg" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Content..</div>
    Content.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="5.jpg" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Content...</div>
    Content.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td height="35" colspan="2"></td>
    </tr>
    <tr>
    <td colspan="4"><img src="forms.gif" width="402" height="28"></td>
    </tr>
    <tr>
    <td class="last_space" colspan="2">Last Updated: February 7, 2005</td>
    </tr>
    <tr>
    <td align="left" colspan="2" valign="top" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Learn More</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Viewers Content
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td width="22%" align="left" valign="top" class="last_space"><div align="left"><img src="image_box.gif" width="84" height="48"></div></td>
    <td align="left" class="last_space"><div align="left" class="content_title">Lorem Ipsum Dolor Sit Amet...</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    <div align="left"><a href="#">Content</a></div>
    <hr width="85%" color="#eaeaea" size="1">
    </td>
    </tr>
    <tr>
    <td colspan="2" class="last_space" align="left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</td>
    </tr>
    </table></td>
    </tr>
    </table>
    </div></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td height="30" bgcolor="#0C2577"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><script src="footer/footer.js"></script></td>
    </tr>
    </table>
    </tr>
    </table>
    </body>
    </html>

  12. #12
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have it almost all working. However, I have two .css and what seems to be occurring is it is taking the font style from the wrong css and applying it to the menu...I really don't get why.

  13. #13
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    post up both of your style sheets so that I can take a look at them.

  14. #14
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is happening is I have 2 style sheets that are being used as so:

    <link href="1.css" rel="stylesheet" type="text/css">
    <link href="2.css" rel="stylesheet" type="text/css">

    2 is the css for the menu. 1 is the css for the rest of the site. If i take out 1, the menu works PERFECT. But, that means the style for the text throughout the site, etc. obviously isn't correct since 1.css is missing. If I put 1.css into the mix, my menu will work, but the font changes and follows the font set up I put in 1.css, rather than 2.css. The only other thing i can think of that may be causing the trouble would be: <div class="main" id="main"> that is located in the main table of it all.

    Any ideas or am I a hopeless case!!!????

  15. #15
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the one I created for the menu:

    /* CSS Document */

    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */ed

    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    }
    ul li {
    position: relative;
    }
    li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    }
    ul li a {
    display: block;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    text-decoration: none;
    color: #0C2577;
    background: #F6F6F6;;
    padding: 5px;
    border: 1px solid #0C2577;
    border-bottom: 0;
    }
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #0C2577;
    }
    li:hover ul, li.over ul {
    display: block; }

  16. #16
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the main css for the site:


    ol {
    margin-left: 25px;
    }
    body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-decoration: underline;
    }
    a:visited {
    font-weight: bold;
    color: #000000;
    text-decoration: underline;
    }
    a:hover {
    font-weight: bold;
    color: #FF0000;
    text-decoration: underline;
    }

    a:active {
    font-weight: bold;
    color: #FF0000;
    text-decoration: underline;
    }
    .main {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
    line-height: normal;
    }
    .content_title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #CC0000;
    text-decoration: none;
    line-height: normal;
    }
    h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #DD0000;
    text-decoration: none;
    margin-top: 15px;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #DD0000;
    text-decoration: none;
    }
    p {
    margin-top: 10px;
    margin-bottom: 10px;
    }
    ul {
    list-style-type: square;
    list-style-position: outside;
    line-height: normal;
    margin-left: 15px;
    }
    .mainTable {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    text-decoration: none;
    line-height: normal;
    margin: 0px;
    }
    .mainWhite {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 0;
    color: #EDEEEC;
    line-height: normal;
    }
    .mainWhite a:link, .mainWhite a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 11px;
    margin: 0;
    color: #EDEEEC;
    text-decoration: underline;
    }
    .mainWhite a:hover, .mainWhite a:active {
    margin: 0;
    color: #FF0000;
    }
    .last {
    padding: 5px;
    }
    .last_space {
    padding: 7px 0;
    }
    .small{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #898989;
    padding: 5px 0 0 0;
    text-decoration: none;
    line-height: normal;
    }

  17. #17
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also lose my center dividing line between the left and right column when I enter that table.

    <td width="15"></td>
    <td width="1" bgcolor="#eaeaea"></td>
    <td width="15"></td>

    not sure why, because the table is not larger than the cell it is in...

  18. #18
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think I see whats going on, you have said in your main css:
    a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-decoration: underline;
    }
    a:visited {
    font-weight: bold;
    color: #000000;
    text-decoration: underline;
    }
    a:hover {
    font-weight: bold;
    color: #FF0000;
    text-decoration: underline;
    }

    a:active {
    font-weight: bold;
    color: #FF0000;
    text-decoration: underline;
    }

    and in the css for the menu there is:
    ul li a {
    display: block;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    text-decoration: none;
    color: #0C2577;
    background: #F6F6F6;;
    padding: 5px;
    border: 1px solid #0C2577;
    border-bottom: 0;

    the "a" at the begining of those titles(suck as this: "ul li a {" and this: "a:link {") represent the "a" in "<a href="#">", so whats happening is that its conflicting with each other and your main css is overriding your menu css. If you have your css's listed in this order:
    <link href="1.css" rel="stylesheet" type="text/css">
    <link href="2.css" rel="stylesheet" type="text/css">

    try fliping them around and see if your menu will override your main for your menu only, i that doesnt work try placing the css for the menu directly into the html file and see if that works, Im not an expert at this so dont count on everything i said in here to be entirly accurate.

    Note: I'm not currently on my computer, Im on a computer at my school (STUPID MAC!!!) because Im making up a class I failed in my Freshman year(gota have it to graduate this year ) so im not able to test this code out at all, if your still having problems when I get home ill try and help you out then, that will be 6pm est.

  19. #19
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only change is that it indents the menu table for whatever reason. I cannot understand why when I add the menu in, I lose my border in the middle of the page. In FireFox the border is still there, but is 2 px no matter if the menu is there or not. That makes no sense, since it's set for 1px.

    I'm about ready to quit!

  20. #20
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    I just posted a new thread in the CSS section of the design forum, so that this would get somemore attention from the people that now more about this than I do. http://www.sitepoint.com/forums/show....php?p=1672548
    BTW, dont give up, Im sure that there is a way for this to work. Again when I get home at 6pm ill try and figure this out, but I have my doubts that i can fix this problem. Hopefully they can figure this one out.

  21. #21
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I fixed the main divider line issue...had an extra <tr><td></td></tr>

    Can't really think why that would cause this in only IE as far as the center line is concerned.

    So, now all that is left is the wrong font being used for the menu! I would appreciate any help or suggestions if you are available tonight or whenever! Thanks again for your help.

  22. #22
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you still using the same html? or has it changed at all?

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you want the #nav anchor styles to apply to the nav then add the id to to the style definition.

    Code:
    ul#nav li a {
    display: block;
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    text-decoration: none;
    color:#0C2577;
    background: #F6F6F6;
    padding: 5px;
    border: 1px solid #0C2577;
    border-bottom: 0;
    }
    That will give it more weight and make sure it wins out.

    Paul

  24. #24
    SitePoint Enthusiast bbmx952's Avatar
    Join Date
    Feb 2005
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, it works!

  25. #25
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Calgary
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a ton! The only other thing I'm noticing is the text is bold. I'm not sure exactly why or how to change it.

    Also, is there an easy way to take each menu header and have the background color change when the cursor is over it...same idea when you go through the list each menu will change when your cursor hovers over each one.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •