CSS and 2 Lists causing 2nd list problems

jeross97 · #1 Oct 6, 2007, 06:53 PM

I am trying to learn CSS. I don't like it so far. I know how to solve the problem using

tables, but that won't teach me CSS.

I have two unordered lists ( one for the menu) and another one for the office hours.

However, the second one doesn't work right for some reason. It accepts the CSS font and

removes the inline but doesn't put the squares before each list item and it doesn't do a

return at the next <li>

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
h3 {color: #0061a5}
</style>
<style type="text/css">
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #0268BD;
color: #FFF;
width: 100%;
font: bold 90% arial, helvetica, sans-serif;
text-align: center;
}
li { display: inline; }
li a
{
text-decoration: none;
background-color: #0268BD;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}
li a:hover
{
background-color: #E34661;
color: #fff;
}
li.list2 {
list-style: square inside;
background-color: #ffffff;
font: normal 90% courier, new;
}.blacktext {color:black}
</style>

</style>
</head>
<body style="FILTER: progid

XImageTransform.Microsoft.Gradient(endColo rstr='#E6E9EB',

startColorstr='#3C7FAF', gradientType='0')">
<br>
<table align="center" bgcolor="#ffffff" width="80%" height="100" border="0">
<tr><td><img height=129 alt="" src="images/symbol.jpg" width=109 border=0></td>
<td align="middle" width="45%"></td><td>

</td></tr></table>


<table bgcolor="#ffffff" align="center" border="0" height="25" width="80%"><tr>
<tr valign="top">
<td align="middle">
<div id="navcontainer">
<ul id="list1">
<li id="active"><a id=current href="#">Item one</a>
<li><a href="#">Item two</a>
<li><a href="#">Item three</a>
<li><a href="#">MAP</a>
<li><a href="#">FORMS</a> </li></ul></div></td></tr></table>

<table height="400" width="80%" align="center" bgcolor="#ffffff" border="1">
<tr><td width="50%" bgcolor="#ffffff">
<h3>WELCOME</h3>
Words...Words...Words...<p>Words...Words...Words.. .<p>Words...Words...Words...
<h3>Office Hours</h3>
<div><strong> ===> NO SQUARES, AND IT DOESN'T GO TO THE NEXT LINE PROPERLY <====

</strong> <P>
<ul>
<li class="list2"><span class="blacktext">Monday 8:00 - 4:30 pm
<li class="list2">Tuesday 8:00 - 4:30 pm
<li class="list2">Thursday 8:00 - 4:30 pm
<li class="list2">Friday 8:00 - 4:30 pm
<li class="list2">Saturday 8:00 - 11:00 am
</span>
</li>
</ul>
</div>

</body>
</html>

If anyone could show me how to fix this, I would be very appreciative. But I would also like

to know why it's ignoring my code too.



At Ask Me Help Desk you can ask questions in any topic and have them answered for free by our experts. To ask questions or participate in answering them you must register for a free account. By registering you will be able to: Get free answers from experts in any of our 300+ topics. Accept money for answers that you provide. Communicate privately with other members (PM). See fewer ads. Sign Up!