...

View Full Version : Custom CSS UL/LI Dropdown Menu Issues



Spleeyah
06-29-2007, 10:47 PM
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. :rolleyes:

http://nl.christianityfortoday.com/help/help1.png
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.
http://nl.christianityfortoday.com/help/help2.png
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.
http://nl.christianityfortoday.com/help/help3.png
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.
http://nl.christianityfortoday.com/help/help4.png
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. :confused: Anyone else got any ideas? :D

Also, when i try to validate my page using w3.org (http://validator.w3.org/check?uri=http%3A%2F%2Fnl.christianityfortoday.com%2F), 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 (http://nl.christianityfortoday.com/index.txt)):

<?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 > 1 || $years == 0) ? "s, " : ", ")
. $months . " month" . (($months > 1 || $months == 0) ? "s, " : ", ")
. $days . " day" . (($days > 1 || $days == 0) ? "s, " : ", ")
. $hours . " hour" . (($hours > 1 || $hours == 0) ? "s, " : ", ")
. $minutes . " minute" . (($minutes > 1 || $minutes == 0) ? "s and " : " and ")
. $seconds . " second" . (($seconds > 1 || $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>

Spleeyah
06-29-2007, 10:58 PM
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

Spleeyah
06-29-2007, 11:07 PM
Now that I've "fixed" the validation issues, the whitespace above the nav bar is showing up in firefox also...

digipaint
06-29-2007, 11:20 PM
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.

Spleeyah
06-29-2007, 11:58 PM
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 (http://nl.christianityfortoday.com/css.css).

Stylesheet:

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
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 > 1 || $years == 0) ? "s, " : ", ")
. $months . " month" . (($months > 1 || $months == 0) ? "s, " : ", ")
. $days . " day" . (($days > 1 || $days == 0) ? "s, " : ", ")
. $hours . " hour" . (($hours > 1 || $hours == 0) ? "s, " : ", ")
. $minutes . " minute" . (($minutes > 1 || $minutes == 0) ? "s and " : " and ")
. $seconds . " second" . (($seconds > 1 || $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>

Armondo
06-30-2007, 12:08 AM
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 :)

Spleeyah
06-30-2007, 12:19 AM
Oh, fine, ruin my fun... :p

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

Css:

/* 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;
}

_Aerospace_Eng_
06-30-2007, 12:27 AM
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.

#nav ul li ul li {
float:none;
width:100px;
}

Spleeyah
06-30-2007, 01:07 AM
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.

koyama
06-30-2007, 07:05 PM
Just for your information you shouldn't be using this:


<?xml version="1.0" encoding="utf-8" ?>
It triggers quirks mode (http://www.quirksmode.org/css/quirksmode.html) in IE6.

bazz
07-01-2007, 12:01 PM
I just checked your site in the validator and it is tentatively valid.

Add this to your page just below the DOCTYPE.




<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum