Check out some similar questions!

jeross97 · Oct 6, 2007, 07: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:DXImageTransform.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="></td><td>

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


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

<table height=" bgcolor=" width=" border="1" align="50%" bgcolor=" bgcolor=">
<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.

Check out some similar questions!

Add your answer here.