Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Los Angeles, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Custom CSS UL/LI Dropdown Menu Issues

    I am trying to make my own css menu with unordered lists and so far it has gone pretty well. I have hit a couple snags now, however. Well, four to be exact.

    1. As you can see in the image, the left border for the "JOHN 2" item is being covered up by the "ACTS" item. I cannot figure out a way to get around this, I tried using z-index, but it still doesn't work. This is in Firefox 2.0.0.4.

    2. This is in Crapxplorer 7.0.6000.16473 now. You can see in the image that there is a whitespace above the navigation bar, from where I do not know. I have tried using padding:0px; and margin:0xp; on nearly every element in my css, but it doesn't work.

    3. Still in Crapxplorer. When I hover over the top navigation items, the list comes down as expected, but with a few differences. You'll notice that the items do not span the full width of the parent item like they do in Firefox, and also there is a white space between the two elements, which makes navigating to the second one impossible without hitting a whitespace.

    4. Fourth, and finally, still in Crapxplorer here, we have the same issue with the "ACTS" element covering the "JOHN 2" element. We also have a problem of the last number in each subelement of "JOHN" being cut off. I can't figure this one out either.

    I also noticed that the opacity filter for Internet Explorer, filter:alpha(opacity=90), causes the third menu to not show up when the second is hovered over, so I had to comment it out.

    The site is at http://nl.christianityfortoday.com/ and is still in its beta stages. It is a huge remodel from the original site, and I am hoping to reveal this to my client as soon as I can.

    So, I'm stumped. Anyone else got any ideas?

    Also, when i try to validate my page using w3.org, it comes up with an error i've never seen before: Sorry, I am unable to validate this document because on line 284 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. I have tried removing that line, and then it complains about the line right before it...

    Here's my complete source (txt file):
    PHP Code:
    <?php
      putenv
    ("TZ=US/Pacific");
      echo 
    '<?xml version="1.0" encoding="utf-8" ?>' "\n";
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
     <head>
      <title>
       Christianity For Today.com
      </title>
      <meta name="description" content="ChristianityForToday.com is the home of the biblical teachings of Pastor Art.">
      <meta name="generator" content="PHP/">
      <meta name="author" content="webmaster@christianityfortoday.com">
      <meta name="keywords" content="MP3, ipod, apple, aple, mp#, bible, christian, christianity,  christain, christainity, god, jehova, jahova, jesu, jesus, christ, holy, teaching,  teachings, sermon, church, spirit, trinity, spiritual, new testament, testament, old testament, tabernacle, synagogue, evangelism, evangelistic, mission, plan, priest,  pastor, paster, preist, pastar, religion, religious, contemporary christian,  contemporary christain, contemporary christianity, contemporary christainity,  christian today, christianity today, christianity for today, christainity today, christainity today, christainity for today, christian men, christain men, christian women, christain women, christian boy, christain boy, christian girl, christain girl, christian teachings, christain teachings, articles, bible study, biblestudy, book, books, breaking news, chat, christian, christianity, church, college, scripture, current events, devotionals, devotions, commentary, commentery, comentary, comentery, evangelical, gospel, headlines, history, good news, goodnews, good nesw, goodnesw, home, hot topics, international, issues, jesus christ, jesuschrist, kids,  marriage, men, message board, ministry, missions, news, parenting, pastor, people, preaching, reference, religion, salvation, school, seminary, seniors, sermon, singles, site, spiritual, student, teens, theology, today, travel, women, Bible studies, Bible study, Bible study tool, study bible, bible study online, christian bible study, easter, passion, trustworthy">
      <!--[if IE]>
       <style type="text/css" media="screen">
        img {
         behavior: url(pngbehaviour.htc);
        }
       </style>
      <![endif]-->
      <style type="text/css">
       body {
        background-color: rgb(205, 153, 96);
        color: #000000;
        margin: 0px;
        font-family: Arial;
        font-size: 14px;
       }
       a {
        color: #0000FF;
       }
       a:visited {
        color: #800080;
       }
       #outer {
        background-image:url("images/bg.jpg");
        background-position: top center;
        background-repeat: repeat-y;
        width: 824px;
        margin: 0px auto;
        text-align: center;
       }
       #outer table {
        margin: 0px auto;
       }
       img {
        border: 0px;
       }
       p {
        font-family: Arial;
        font-size: 14px;
       }
       form {
        margin: 0px;
        padding: 0px;
       }
       #content_body {
        width: 725px;
        font-size: 14px;
        height: auto;
        text-align: justify;
        padding: 7px;
       }
       #footer {
        font-size: 12px;
        color: gray;
        display: block;
        margin: 20px;
       }
       #bottom {
        background-image:url("images/bottom.jpg");
        background-position: top center;
        background-repeat: no-repeat;
        display: block;
        width: 825px;
        height: 45px;
        margin: 0px auto;
        position: relative;
        left: 1px;
       }
       #nav {
        z-index: 9;
        width: 740px;
        background-color: rgb(100, 100, 100);
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
        text-align: left;
       }
       #nav a {
        text-decoration: none;
        width: 100%;
        height: 20px;
        color: #FFFFFF;
       }
       #nav ul li ul a {
        display: block;
        color: #000000;
       }
       #nav a:hover {
        color: #FFFFFF;
       }
       #nav ul {
        cursor: pointer;
        padding: 0px;
        margin: 0px;
        list-style: none;
        z-index: 2;
        min-width: 100%;
       }
       #nav ul li {
        font-family: Verdana;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        font-size: 10px;
        cursor: pointer;
        color: #FFFFFF;
        padding-left: 5px;
        padding-right: 3px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px 0px 0px 0px;
        border-left: 1px solid #000;
        line-height: 18px;
        height: 20px;
        display: block;
        background-color: rgb(100, 100, 100);
    /*    filter:alpha(opacity=90);*/
        -moz-opacity: .90;
        opacity: .90;
        z-index: 3;
       }
       #nav ul li:hover {
        background-color: rgb(100, 100, 100);
    /*    filter:alpha(opacity=100);*/
        -moz-opacity: 1.0;
        opacity: 1.0;
       }
       #nav ul li {
        position: relative;
        display: inline;
       }
       #nav ul li ul {
        position: absolute;
        top: 97%;
        left: 2px;
        display: none;
        z-index: 4;
       }
       #nav ul li:hover ul, #nav ul li:hover ul li {
        display: block;
       }
       #nav ul li:hover ul li ul li {
        display: none;
       }
       #nav ul li ul li:hover ul li {
        display: block;
       }
       #nav ul li:hover ul li:hover ul, #nav ul li:hover ul li:hover ul li, 
       #nav ul li ul li:hover ul,       #nav ul li ul li:hover ul li {
        z-index: 7;
        display: block;
       }
       #nav ul li ul li {
        z-index: 5;
        color: #FFFFFF;
       }
       #nav ul li ul li ul {
        z-index: 6;
        position: absolute;
        top: 2px;
        left: 97%;
        display: none;
       }
      </style>
     </head>
     <body>
      <div id="outer">
       <table cellspacing="0" cellpadding="0">
        <tr>
         <td>
          <img src="images/logo.png" />
         </td>
        </tr> 
        <tr>
         <td>
          <div id="nav">
           <ul>
            <li>
             <a href="index.php">Home</a>
            </li>
            <li>
             <a href="">Books of the Bible</a>
              <ul>
               <li>
                <a href="">John</a>
                 <ul>
                  <li><a href="">John 1</a></li>
                  <li><a href="">John 2</a></li>
                  <li><a href="">John 3</a></li>
                  <li><a href="">John 4</a></li>
                 </ul>
               </li>
               <li>
                <a href="">Acts</a>
                 <ul>
                  <li><a href="">Acts 1</a></li>
                  <li><a href="">Acts 2</a></li>
                  <li><a href="">Acts 3</a></li>
                  <li><a href="">Acts 4</a></li>
                 </ul>
               </li>
              </ul>
            </li>
            <li>
             <a href="">Contact Us</a>
              <ul>
               <li>
                <a href="">Pastor Art</a>
               </li>
               <li>
                <a href="">Webmaster</a>
               </li>
              </ul>
            </li>
            <li>
             <a href="">Test</a>
              <ul>
               <li>
                <a href="">Hello</a>
                 <ul>
                  <li><a href="">Deeper!</a></li>
                  <li><a href="">Deeper!</a></li>
                  <li><a href="">Deeper!</a></li>
                  <li><a href="">Deeper!</a></li>
                 </ul>
               </li>
               <li>
                <a href="">Webmaster</a>
               </li>
              </ul>
            </li>
           </ul>
          </div>
         </td>
        </tr>
        <tr>
         <td>
          <table cellspacing="0" cellpadding="0">
           <tr>
            <td id="content_body">
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo sollicitudin metus. Integer nec nunc. Sed augue mi, sagittis eu, consectetuer consectetuer, ornare ac, arcu. Sed accumsan condimentum neque. Fusce tristique suscipit orci. Maecenas in nibh ut elit rutrum pretium. Vivamus vel lectus eget massa rhoncus luctus. In arcu massa, lacinia eget, laoreet vel, accumsan in, erat. Fusce libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vestibulum nisi pellentesque mauris. Donec condimentum, diam nec gravida vehicula, nisl metus vulputate magna, ut vulputate nibh nisl gravida tellus. Vestibulum eu arcu. Donec eleifend nulla eget elit. Nullam bibendum quam non metus. Donec mauris ante, auctor ac, interdum ac, ullamcorper vel, quam. In eu elit vel odio porta dapibus. Nunc facilisis commodo ipsum. Suspendisse dictum.</p><p>Quisque in velit sed urna consequat ultricies. Proin sodales sagittis elit. Donec feugiat lacus sit amet nulla. Phasellus bibendum risus eu dui. Suspendisse felis. Duis varius molestie ante. Sed pharetra. Donec pretium, ante eget venenatis fermentum, metus dolor tincidunt orci, ac blandit sem lectus eu massa. Donec molestie tempus ipsum. Donec sed tortor pretium risus venenatis porta. Ut consequat odio ac lacus.</p><p>Aliquam pellentesque egestas ante. In leo mi, consectetuer ut, bibendum vel, ornare quis, dolor. Morbi congue sapien quis elit. Aliquam erat volutpat. Vivamus vel nulla. Cras purus lacus, consectetuer quis, luctus at, faucibus ac, arcu. In hac habitasse platea dictumst. Nullam at est. Curabitur cursus interdum purus. Curabitur id mauris vitae risus condimentum adipiscing.</p>
               </td>
           </tr>
          </table>
         </td>
        </tr>
        <tr>
         <td colspan="3" align="center">
          <div id="footer">
           <a href="http://www.christianityfortoday.com/index.html">Home</a> | 
           <a href="http://www.christianityfortoday.com/audio_library.html">Hear Bible Teachings</a> | 
           <a href="http://www.christianityfortoday.com/podcast.html">Get Podcast</a> | 
           <a href="http://www.christianityfortoday.com/contact_us.html">Give Feedback</a> | 
           <a href="http://www.christianityfortoday.com/letters.html">Listener Comments</a> | 
           <a href="http://www.christianityfortoday.com/about_us.html">About Pastor Art</a>
           <br />
           <a href="http://www.christianityfortoday.com/testimonylink.html">Pastor Arts Testimony</a> | 
           <a href="http://www.christianityfortoday.com/how_to.html">Become a Christian</a> | 
           <a href="http://www.christianityfortoday.com/statement_of_faith.html">What We Believe</a> |
           <a href="http://www.christianityfortoday.com/links.html">Links</a>
           <br />
           <br />
           <a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=123450&amp;t=73" target="_blank"><img alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/36x14/white.gif" border="0"></a> | 
           <a href="http://www.christianityfortoday.com/podcast.xml" target="_blank"><img src="http://www.christianityfortoday.com/images/podcast.gif" title="Get Our Podcast!" height="16"></a> | 
           <a href="javascript:popUpItunes();"><img src="http://www.christianityfortoday.com/images/itunes-small.gif" title="Open iTunes To Our Podcast!" height="16"></a>
           <br />
           </center>
           <br />
           <center>
           <font style="font-size: 10px;">ChristianityForToday.com has been up for <font color="red">
    <?php
    function calcElapsedTime($time)
    // calculate elapsed time (in seconds!)
    $diff time()-$time;
    $daysDiff floor($diff/60/60/24);
    $diff -= $daysDiff*60*60*24;
    $hrsDiff floor($diff/60/60);
    $diff -= $hrsDiff*60*60;
    $minsDiff floor($diff/60);
    $diff -= $minsDiff*60;
    $secsDiff $diff;
    return (
    '(elapsed time '.$daysDiff.'d '.$hrsDiff.'h '.$minsDiff.'m
    '
    .$secsDiff.'s)');
    }
    function 
    HowLongSince($past) {
        
    $now  time();
        
    $sec $now $past;
        
    $years floor($sec / (365*24*60*60));
        
    $sec -= ($years * (365*24*60*60));
        
    $months floor($sec / (30*24*60*60));
        
    $sec -= ($months * (30*24*60*60));
        if (
    $months == 12) { $years += 1$months -= 12; }
        
    $days floor($sec / (24*60*60));
        
    $sec -= ($days * (24*60*60));
        
    $hours floor($sec / (60*60));
        
    $sec -= ($hours * (60*60));
        
    $minutes floor($sec 60);
        
    $sec -= ($minutes 60);
        
    $seconds $sec;
        return  
    $years " year" . (($years || $years == 0) ? "s, " ", ")
              . 
    $months " month" . (($months || $months == 0) ? "s, " ", ")
              . 
    $days " day" . (($days || $days == 0) ? "s, " ", ")
              . 
    $hours " hour" . (($hours || $hours == 0) ? "s, " ", ")
              . 
    $minutes " minute" . (($minutes || $minutes == 0) ? "s and " " and ")
              . 
    $seconds " second" . (($seconds || $seconds == 0) ? "s" "");
    }
    echo 
    HowLongSince(strtotime("10/23/2005"));
    ?></font></font></center><center>© 2005-2007 ChristianityForToday.com
           <br />
           <a href="#" onclick="return false;">Terms of Use</a> | 
           <a href="#" onclick="return false;">Privacy Policy</a>
         </td>
        </tr>
       </table>
      </div>
      <div id="bottom"></div>
     </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Los Angeles, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I figured out the Validation error problem.
    For some reason the copyright symbol in the footer wasn't being output as "&copy;," but the actual symbol rather.
    I'm gonna try and fix the validation errors, but I don't think that will affect my other problems. The updated source is at: http://nl.christianityfortoday.com/index.txt

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Los Angeles, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now that I've "fixed" the validation issues, the whitespace above the nav bar is showing up in firefox also...

  • #4
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why have you got so many values linked to the Nav DIV? it probably has something to do with your problem.

    You have about 6 or 7 just for the #nav ul li ???

    you are repeating code?

    plus i think you should separate code like this (with coma):


    #nav ul li, #nav ul a {}



    not this.


    #nav ul li ul a {

    display: block;
    color: #000000;
    }


    and put your CSS in a external file, and link to it.
    Last edited by digipaint; 06-29-2007 at 11:23 PM.

  • #5
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Los Angeles, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by digipaint View Post
    Why have you got so many values linked to the Nav DIV? it probably has something to do with your problem.
    You have about 6 or 7 just for the #nav ul li ???
    you are repeating code?
    plus i think you should separate code like this (with coma):

    #nav ul li, #nav ul a {}

    not this.

    #nav ul li ul a {
    display: block;
    color: #000000;
    }

    and put your CSS in a external file, and link to it.
    Everything is inside of the "nav" div, that's why I have it so many times. Is that what you were asking? I didn't really understand what you meant.
    I think I cleaned up the css a little bit how you said.
    I have done an external stylesheet.

    Stylesheet:
    Code:
       body {
        background-color: rgb(205, 153, 96);
        color: #000000;
        margin: 0px;
        font-family: Arial;
        font-size: 14px;
        text-align:center;
       }
       a {
    	color: #0000FF;
       }
       a:visited {
    	color: #800080;
       }
       #outer {
    	background-image:url("images/bg.jpg");
    	background-position: top center;
    	background-repeat: repeat-y;
    	width: 824px;
    	margin: 0px auto;
    	text-align: left;
       }
       #outer table {
    	margin: 0px auto;
       }
       img {
        border: 0px;
       }
       p {
        font-family: Arial;
    	font-size: 14px;
       }
       form {
        margin: 0px;
    	padding: 0px;
       }
       #content_body {
    	width: 725px;
    	font-size: 14px;
    	height: auto;
    	text-align: justify;
    	padding: 7px;
       }
       #footer {
        font-size: 12px;
    	color: gray;
    	display: block;
        margin: 20px;
       }
       #bottom {
    	background-image:url("images/bottom.jpg");
    	background-position: top center;
    	background-repeat: no-repeat;
    	display: block;
    	width: 825px;
    	height: 45px;
    	margin: 0px auto;
    	position: relative;
    	left: 1px;
       }
       #nav {
    	z-index: 9;
    	width: 740px;
    	background-color: rgb(100, 100, 100);
    	padding-top: 0px;
    	padding-bottom: 0px;
    	margin: 0px;
    	text-align: left;
       }
       #nav a {
    	text-decoration: none;
    	width: 100%;
    	height: 20px;
    	color: #FFFFFF;
       }
       #nav ul li ul a {
    	display: block;
    	color: #000000;
       }
       #nav a:hover {
    	color: #FFFFFF;
       }
       #nav ul {
    	cursor: pointer;
    	padding: 0px;
    	margin: 0px;
    	list-style: none;
    	z-index: 2;
    	min-width: 100%;
       }
       #nav ul li {
    	font-family: Verdana;
    	letter-spacing: 2px;
    	text-transform: uppercase;
    	text-decoration: none;
    	font-size: 10px;
    	cursor: pointer;
    	color: #FFFFFF;
    	padding-left: 5px;
    	padding-right: 3px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    	margin: 0px 0px 0px 0px;
    	border-left: 1px solid #000;
    	line-height: 18px;
    	height: 20px;
    	display: block;
    	background-color: rgb(100, 100, 100);
    /*	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);*/
    /*	filter:alpha(opacity=90);*/
    	-moz-opacity: .90;
    	opacity: .90;
    	z-index: 3;
        position: relative;
    	display: inline;
       }
       #nav ul li:hover {
    	background-color: rgb(100, 100, 100);
    /*	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);*/
    /*	filter:alpha(opacity=100);*/
    	-moz-opacity: 1.0;
    	opacity: 1.0;
       }
       #nav ul li ul {
        position: absolute;
        top: 97%;
        left: 2px;
    	display: none;
    	z-index: 4;
       }
       #nav ul li:hover ul li ul li {
    	display: none;
       }
       #nav ul li:hover ul,                #nav ul li:hover ul li, 
       #nav ul li ul li:hover ul li,       #nav ul li:hover ul li:hover ul,
       #nav ul li:hover ul li:hover ul li, #nav ul li ul li:hover ul,
       #nav ul li ul li:hover ul li {
    	z-index: 7;
    	display: block;
       }
       #nav ul li ul li {
        z-index: 5;
    	color: #FFFFFF;
       }
       #nav ul li ul li ul {
        z-index: 6;
        position: absolute;
        top: 2px;
        left: 97%;
        display: none;
       }
       .up_for {
    	font-size: 10px;
       }
       .red {
    	color: red;
       }
    Full Source:
    PHP Code:
    <?php
      putenv
    ("TZ=US/Pacific");
      echo 
    '<?xml version="1.0" encoding="utf-8" ?>' "\n";
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
      <title>
       Christianity For Today.com
      </title>
      <meta name="description" content="ChristianityForToday.com is the home of the biblical teachings of Pastor Art." />
      <meta name="generator" content="PHP/<?=phpversion()?>" />
      <meta name="author" content="webmaster@christianityfortoday.com" />
      <meta name="keywords" content="MP3, ipod, apple, aple, mp#, bible, christian, christianity,  christain, christainity, god, jehova, jahova, jesu, jesus, christ, holy, teaching,  teachings, sermon, church, spirit, trinity, spiritual, new testament, testament, old testament, tabernacle, synagogue, evangelism, evangelistic, mission, plan, priest,  pastor, paster, preist, pastar, religion, religious, contemporary christian,  contemporary christain, contemporary christianity, contemporary christainity,  christian today, christianity today, christianity for today, christainity today, christainity today, christainity for today, christian men, christain men, christian women, christain women, christian boy, christain boy, christian girl, christain girl, christian teachings, christain teachings, articles, bible study, biblestudy, book, books, breaking news, chat, christian, christianity, church, college, scripture, current events, devotionals, devotions, commentary, commentery, comentary, comentery, evangelical, gospel, headlines, history, good news, goodnews, good nesw, goodnesw, home, hot topics, international, issues, jesus christ, jesuschrist, kids,  marriage, men, message board, ministry, missions, news, parenting, pastor, people, preaching, reference, religion, salvation, school, seminary, seniors, sermon, singles, site, spiritual, student, teens, theology, today, travel, women, Bible studies, Bible study, Bible study tool, study bible, bible study online, christian bible study, easter, passion, trustworthy" />
      <!--[if IE]>
       <style type="text/css" media="screen">
        img {
         behavior: url(pngbehaviour.htc);
        }
       </style>
      <![endif]-->
      <link rel="stylesheet" href="css.css" type="text/css" />
     </head>
     <body>
      <div id="outer">
       <table cellspacing="0" cellpadding="0">
        <tr>
         <td>
          <img src="images/logo.png" alt="Christianity For Today.com" />
         </td>
        </tr> 
        <tr>
         <td>
          <div id="nav">
           <ul>
            <li>
             <a href="index.php">Home</a>
            </li>
            <li>
             <a href="books.php">Books of the Bible</a>
              <ul>
               <li>
                <a href="books.php?book=john">John</a>
                 <ul>
                  <li><a href="books.php?book=john&chapter=1">John 1</a></li>
                  <li><a href="books.php?book=john&chapter=2">John 2</a></li>
                  <li><a href="books.php?book=john&chapter=3">John 3</a></li>
                  <li><a href="books.php?book=john&chapter=4">John 4</a></li>
                 </ul>
               </li>
               <li>
                <a href="books.php?book=acts">Acts</a>
                 <ul>
                  <li><a href="books.php?book=acts&chapter=1">Acts 1</a></li>
                  <li><a href="books.php?book=acts&chapter=2">Acts 2</a></li>
                  <li><a href="books.php?book=acts&chapter=3">Acts 3</a></li>
                  <li><a href="books.php?book=acts&chapter=4">Acts 4</a></li>
                  <li><a href="books.php?book=acts&chapter=5">Acts 5</a></li>
                 </ul>
               </li>
              </ul>
            </li>
            <li>
             <a href="contact_us.php">Contact Us</a>
              <ul>
               <li>
                <a href="contact_us.php?q=pastor">Pastor Art</a>
               </li>
               <li>
                <a href="contact_us.php?q=webmaster">Webmaster</a>
               </li>
              </ul>
            </li>
            <li>
             <a href="test.php">Test</a>
              <ul>
               <li>
                <a href="test.php?a=1">Hello</a>
                 <ul>
                  <li><a href="test.php?a=1&b=1">Deeper!</a></li>
                  <li><a href="test.php?a=1&b=2">Deeper!</a></li>
                  <li><a href="test.php?a=1&b=3">Deeper!</a></li>
                  <li><a href="test.php?a=1&b=4">Deeper!</a></li>
                 </ul>
               </li>
               <li>
                <a href="test.php?a=2">Webmaster</a>
               </li>
              </ul>
            </li>
           </ul>
          </div>
         </td>
        </tr>
        <tr>
         <td>
          <table cellspacing="0" cellpadding="0">
           <tr>
            <td id="content_body">
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo sollicitudin metus. Integer nec nunc. Sed augue mi, sagittis eu, consectetuer consectetuer, ornare ac, arcu. Sed accumsan condimentum neque. Fusce tristique suscipit orci. Maecenas in nibh ut elit rutrum pretium. Vivamus vel lectus eget massa rhoncus luctus. In arcu massa, lacinia eget, laoreet vel, accumsan in, erat. Fusce libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vestibulum nisi pellentesque mauris. Donec condimentum, diam nec gravida vehicula, nisl metus vulputate magna, ut vulputate nibh nisl gravida tellus. Vestibulum eu arcu. Donec eleifend nulla eget elit. Nullam bibendum quam non metus. Donec mauris ante, auctor ac, interdum ac, ullamcorper vel, quam. In eu elit vel odio porta dapibus. Nunc facilisis commodo ipsum. Suspendisse dictum.</p><p>Quisque in velit sed urna consequat ultricies. Proin sodales sagittis elit. Donec feugiat lacus sit amet nulla. Phasellus bibendum risus eu dui. Suspendisse felis. Duis varius molestie ante. Sed pharetra. Donec pretium, ante eget venenatis fermentum, metus dolor tincidunt orci, ac blandit sem lectus eu massa. Donec molestie tempus ipsum. Donec sed tortor pretium risus venenatis porta. Ut consequat odio ac lacus.</p><p>Aliquam pellentesque egestas ante. In leo mi, consectetuer ut, bibendum vel, ornare quis, dolor. Morbi congue sapien quis elit. Aliquam erat volutpat. Vivamus vel nulla. Cras purus lacus, consectetuer quis, luctus at, faucibus ac, arcu. In hac habitasse platea dictumst. Nullam at est. Curabitur cursus interdum purus. Curabitur id mauris vitae risus condimentum adipiscing.</p>
               </td>
           </tr>
          </table>
         </td>
        </tr>
        <tr>
         <td colspan="3" align="center">
          <div id="footer">
           <a href="http://www.christianityfortoday.com/index.html">Home</a> | 
           <a href="http://www.christianityfortoday.com/audio_library.html">Hear Bible Teachings</a> | 
           <a href="http://www.christianityfortoday.com/podcast.html">Get Podcast</a> | 
           <a href="http://www.christianityfortoday.com/contact_us.html">Give Feedback</a> | 
           <a href="http://www.christianityfortoday.com/letters.html">Listener Comments</a> | 
           <a href="http://www.christianityfortoday.com/about_us.html">About Pastor Art</a>
           <br />
           <a href="http://www.christianityfortoday.com/testimonylink.html">Pastor Arts Testimony</a> | 
           <a href="http://www.christianityfortoday.com/how_to.html">Become a Christian</a> | 
           <a href="http://www.christianityfortoday.com/statement_of_faith.html">What We Believe</a> |
           <a href="http://www.christianityfortoday.com/links.html">Links</a>
           <br />
           <br />
           <a href="http://www.spreadfirefox.com/?q=affiliates&amp;id=123450&amp;t=73"><img alt="Get Firefox!" title="Get Firefox!" src="http://sfx-images.mozilla.org/affiliates/Buttons/36x14/white.gif" /></a> | 
           <a href="http://www.christianityfortoday.com/podcast.xml"><img src="http://www.christianityfortoday.com/images/podcast.gif" title="Get Our Podcast!" alt="Get Our Podcast!" height="16" /></a> | 
           <a href="javascript:popUpItunes();"><img src="http://www.christianityfortoday.com/images/itunes-small.gif" title="Open iTunes To Our Podcast!" alt="Open iTunes To Our Podcast!" height="16" /></a>
           <br />
           <br />
           <span class="up_for">ChristianityForToday.com has been up for <span class="red">
    <?php
    function calcElapsedTime($time)
    // calculate elapsed time (in seconds!)
    $diff time()-$time;
    $daysDiff floor($diff/60/60/24);
    $diff -= $daysDiff*60*60*24;
    $hrsDiff floor($diff/60/60);
    $diff -= $hrsDiff*60*60;
    $minsDiff floor($diff/60);
    $diff -= $minsDiff*60;
    $secsDiff $diff;
    return (
    '(elapsed time '.$daysDiff.'d '.$hrsDiff.'h '.$minsDiff.'m
    '
    .$secsDiff.'s)');
    }
    function 
    HowLongSince($past) {
        
    $now  time();
        
    $sec $now $past;
        
    $years floor($sec / (365*24*60*60));
        
    $sec -= ($years * (365*24*60*60));
        
    $months floor($sec / (30*24*60*60));
        
    $sec -= ($months * (30*24*60*60));
        if (
    $months == 12) { $years += 1$months -= 12; }
        
    $days floor($sec / (24*60*60));
        
    $sec -= ($days * (24*60*60));
        
    $hours floor($sec / (60*60));
        
    $sec -= ($hours * (60*60));
        
    $minutes floor($sec 60);
        
    $sec -= ($minutes 60);
        
    $seconds $sec;
        return  
    $years " year" . (($years || $years == 0) ? "s, " ", ")
              . 
    $months " month" . (($months || $months == 0) ? "s, " ", ")
              . 
    $days " day" . (($days || $days == 0) ? "s, " ", ")
              . 
    $hours " hour" . (($hours || $hours == 0) ? "s, " ", ")
              . 
    $minutes " minute" . (($minutes || $minutes == 0) ? "s and " " and ")
              . 
    $seconds " second" . (($seconds || $seconds == 0) ? "s" "");
    }
    echo 
    HowLongSince(strtotime("10/23/2005"));
    ?></span></span>
           <br />
           &copy; 2005-2007 ChristianityForToday.com
           <br />
           <a href="#" onclick="return false;">Terms of Use</a> | 
           <a href="#" onclick="return false;">Privacy Policy</a>
          </div>
         </td>
        </tr>
       </table>
      </div>
      <div id="bottom"></div>
     </body>
    </html>

  • #6
    Regular Coder Armondo's Avatar
    Join Date
    Feb 2007
    Posts
    144
    Thanks
    3
    Thanked 0 Times in 0 Posts
    just a comment here: the opacity in firefox makes everything hard to read, you should either take that out because it doesn't work in ie and it makes it hard to read, or change the font color. just saying
    ..
    ▲ ▲

  • #7
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Los Angeles, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, fine, ruin my fun...

    Yeah, I guess it does, it's taken out. At least my stylesheet will validate now!


    Css:
    Code:
    /* css.css */
       body {
        background-color: rgb(205, 153, 96);
        color: #000000;
        margin: 0px;
        font-family: Arial;
        font-size: 14px;
        text-align:center;
       }
       a {
    	color: #0000FF;
       }
       a:visited {
    	color: #800080;
       }
       #outer {
    	background-image:url("images/bg.jpg");
    	background-position: top center;
    	background-repeat: repeat-y;
    	width: 824px;
    	margin: 0px auto;
    	text-align: left;
       }
       #outer table {
    	margin: 0px auto;
       }
       img {
        border: 0px;
       }
       p {
        font-family: Arial;
    	font-size: 14px;
       }
       form {
        margin: 0px;
    	padding: 0px;
       }
       #content_body {
    	width: 725px;
    	font-size: 14px;
    	height: auto;
    	text-align: justify;
    	padding: 7px;
       }
       #footer {
        font-size: 12px;
    	color: gray;
    	display: block;
        margin: 20px;
       }
       #bottom {
    	background-image:url("images/bottom.jpg");
    	background-position: top center;
    	background-repeat: no-repeat;
    	display: block;
    	width: 825px;
    	height: 45px;
    	margin: 0px auto;
    	position: relative;
    	left: 1px;
       }
       #nav {
    	z-index: 9;
    	width: 740px;
    	background-color: rgb(100, 100, 100);
    	padding-top: 0px;
    	padding-bottom: 0px;
    	margin: 0px;
    	text-align: left;
       }
       #nav a {
    	text-decoration: none;
    	width: 100%;
    	height: 20px;
    	color: #FFFFFF;
       }
       #nav ul li ul a {
    	display: block;
    	color: #000000;
       }
       #nav a:hover {
    	color: #FFFFFF;
       }
       #nav ul {
    	cursor: pointer;
    	padding: 0px;
    	margin: 0px;
    	list-style: none;
    	z-index: 2;
    	min-width: 100%;
       }
       #nav ul li {
    	font-family: Verdana;
    	letter-spacing: 2px;
    	text-transform: uppercase;
    	text-decoration: none;
    	font-size: 10px;
    	cursor: pointer;
    	color: #FFFFFF;
    	padding-left: 5px;
    	padding-right: 3px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    	margin: 0px 0px 0px 0px;
    	border-left: 1px solid #000;
    	line-height: 18px;
    	height: 20px;
    	display: block;
    	background-color: rgb(100, 100, 100);
    /*	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);*/
    /*	filter:alpha(opacity=90);*/
    /*	-moz-opacity: .90;*/
    /*	opacity: .90;*/
    	z-index: 3;
        position: relative;
    	display: inline;
       }
       #nav ul li:hover {
    	background-color: rgb(100, 100, 100);
    /*	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);*/
    /*	filter:alpha(opacity=100);*/
    /*	-moz-opacity: 1.0;*/
    /*	opacity: 1.0;*/
       }
       #nav ul li ul {
        position: absolute;
        top: 97%;
        left: 2px;
    	display: none;
    	z-index: 4;
       }
       #nav ul li:hover ul li ul li {
    	display: none;
       }
       #nav ul li:hover ul,                #nav ul li:hover ul li, 
       #nav ul li ul li:hover ul li,       #nav ul li:hover ul li:hover ul,
       #nav ul li:hover ul li:hover ul li, #nav ul li ul li:hover ul,
       #nav ul li ul li:hover ul li {
    	z-index: 7;
    	display: block;
       }
       #nav ul li ul li {
        z-index: 5;
    	color: #FFFFFF;
       }
       #nav ul li ul li ul {
        z-index: 6;
        position: absolute;
        top: 2px;
        left: 97%;
        display: none;
       }
       .up_for {
    	font-size: 10px;
       }
       .red {
    	color: red;
       }

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You need to float #nav ul li to the left
    After doing so you need to clear the floats in #nav
    http://www.positioniseverything.net/easyclearing.html
    Then after doing that you should use left:-2px; on #nav ul li ul

    You will also need to make sure the lis in the drop down aren't floated.
    Code:
    #nav ul li ul li {
    float:none;
    width:100px;
    }
    Last edited by _Aerospace_Eng_; 06-30-2007 at 12:30 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New to the CF scene
    Join Date
    Jun 2007
    Location
    Los Angeles, CA
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all the help guys, but I'm going to start from scratch with a new tutorial I found which seems a lot simpler.

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Just for your information you shouldn't be using this:
    Code:
    <?xml version="1.0" encoding="utf-8" ?>
    It triggers quirks mode in IE6.

  • #11
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I just checked your site in the validator and it is tentatively valid.

    Add this to your page just below the DOCTYPE.

    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    Then, if you want your copyright thing again, it should show correctly.
    bazz


  •  

    Posting Permissions

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