Another styling way?? <li></li>

[carefree]

Is there a css way or div style way to display clean <li> With a common text font and colour??

 

Heres what im using now but i dont know how to syle divs yet so I thought I would ask here first:

 

<b><font color="#000000" size="3">
	<table style="FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Tahoma, Arial; BORDER-COLLAPSE: collapse; TEXT-ALIGN: left; " cellPadding="0" width="170" border="0" bgcolor="#EFEFEF">
		<tr>
			<td style="TEXT-ALIGN: center; " vAlign="top" width="15" height="3" bgcolor="#FFFFFF">
		<span class="bspan"><b><font color="#000000" size="3">
			<img border="0" src="/images/LHLIGHTGREY.jpg" width="15" height="15"></font></b></td>
			<td style="TEXT-ALIGN: center; " vAlign="top" width="136" height="3" colspan="2">
			 </td>
			<td style="TEXT-ALIGN: center; " vAlign="top" width="15" height="3" bgcolor="#FFFFFF">
		<span class="bspan"><b><font color="#000000" size="3">
				<img border="0" src="/images/RHLIGHTGREY.jpg" width="15" height="15"></font></b></td>
		</tr>
		<tr>
			<td style="TEXT-ALIGN: center; " vAlign="top" width="16" height="2" colspan="2">
			 </td>
			<td style="TEXT-ALIGN: center; " vAlign="top" width="136" height="2">
			<b><font color="#000000" size="3">
			<p style="text-align: left"><span class="title"><font size="2">Our Categories:</font></span><font size="2">
			</p>
			<ul>
				<li class="letter">
				<p style="text-align: left">A  
				</li>
				<li>
				<p style="text-align: left">
				<a href="games.shtml">
				<font color="#000080">Games</font></a></font><font color="#000080" size="2">  
				</li>
				</font><font color="#000000" size="3">
				<li>
				<p style="text-align: left">
				<a href="games.shtml">
				<font color="#000080" size="2">Games</font></a><font color="#000080" size="2">  
				</li>
				</font>

		<tr>
			<td style="TEXT-ALIGN: center; " vAlign="top" width="15" height="2" bgcolor="#FFFFFF">
			<span class="bspan"><b><font color="#000000" size="3">
			<img border="0" src="/images/LHBLIGHTGREY.jpg" width="15" height="15"></font></b></td>
			<td style="TEXT-ALIGN: center; " vAlign="top" width="136" height="2" colspan="2">
			 </td>
			<td style="TEXT-ALIGN: center; " vAlign="top" width="15" height="2" bgcolor="#FFFFFF">
		<span class="bspan"><b><font color="#000000" size="3">
				<img border="0" src="/images/RHBLIGHTGREY.jpg" width="15" height="15"></font></b></td>
		</tr>
	</table>
</font></b>

 

I would also like to get rid of the table if this is possible

 

[ToonMariner]

li {font-size: 1em; color: #000; }

[dbrimlow]

<ul>
<li class="letter">
<p style="text-align: left">A  
</li><li>
<p style="text-align: left">
<a href="games.shtml">
<font color="#000080">Games</font></a></font><font color="#000080" size="2">  
</li>
</font><font color="#000000" size="3">
<li>
<p style="text-align: left">
<a href="games.shtml">
<font color="#000080" size="2">Games</font></a><font color="#000080" size="2">  
</li>
</font>

 

I don't mean to sound rude, and I understand you came here for help ... but this is a scary mess and well beyond your initial question. And it just helps to illustrate why using CSS is so crucial. So it's good you showed the code. Your whole page is a mess of old code, conflicting styles and bad code. And what proves you want to understand it all was your use of the word "CLEAN" here "..way to display clean <li> With a common text font and colour??"

 

You don't need to learn "<divs>". You need to learn HTML and CSS. <div> is just yet another tag. Like <p> or <li>.

 

But you DO need to learn HTML. This code is really bad.

 

It looks like it was generated with either an old version of Dreamweaver or some other off the shelf editor from 1997. The code uses attributes of an old, no longer valid version of HTML (either 2.0 or 3.0).

 

With all those fonts shotgunned willy-nilly all over the place, how can you possibly confirm if your actual mark-up is correct? Because it isn't. Which is why you are fighting to get the link styled.

 

Always begin with structure first, add styling later. Because without a correct structure all the styling in the world will only display the mess in vivid color -and trying to debug with all that style junk in the way is a chore.

 

So, first, let's strip away all the styling attributes and "font soup" .

 

Now let's look at what you have:

 

<ul>
<li><p>A</li>
        <li><p><a href="games.shtml">Games</a></li>
<li><p><a href="games.shtml">Games</a></li>

 

This is just wrong:

 

1. you opened the <ul> tag, so close it when you are done with it </ul>

2. a list item is a "block level" tag ... so is a paragraph ... block level tags don't play well together. Lose that errant <p> tag... it doesn't belong in a list. The LIST is what holds the text. Paragraphs and list are two different animals that do two different things with text.

3. However, whenever you DO use a paragraph ... close it <p>buncha text</p>. 

 

Here is your code fixed:

 

<ul>
<li>A</li>
        <li><a href="games.shtml">Games</a></li>
<li><a href="games.shtml">Games</a></li>
</ul>

 

Okay. Now. Without you having shown us your css, we can't see what styles your class "letter" uses or what it is intended for. You have so many conflicting font sizes and colors throughout the list, that it is hard for me to tell which you wanted for the text in the list. You give your table a font-size of 8pt!!!?? Never use points for font-size; the font size "2" or "3" scattered throughout is OLD code (HTML 3.0 or less).  Either use "px", "percent" or "em". Since percent and em requires more skill, let's use px.

 

The old font-size "2" can (very roughly) translate to @ 10px or 11px. (I don't know if it will work because you tell your table to use a tiny size of 8pt) but since you are not working with valid code, it may work.

 

Copy this and put it on your page just before the </head> tag.

 

<style type="text/css">
<!--
.category ul li {
color:#000080;
font-size:10px;
}
-->
</style>

Now, change your ul as follows:

<ul class="category">
<li>A</li>
        <li><a href="games.shtml">Games</a></li>
<li><a href="games.shtml">Games</a></li>
</ul>

 

It should work, but your code is so bad and the conflicting fonts and style junk all over the place so rampant, it may simply be overwhelmed.

 

Good luck,

 

When you want to begin learning proper html and css, here is the best place to start (it makes it all easier to understand by putting it into proper perspective)  http://css.maxdesign.com.au/selectutorial/

Dave

[carefree]

Yes that worked

 

Actually the original code was over 560 lines long now its only 46

 

Thanks!

[moberemk]

560 to 46? Okay, see, that's just plain scary. Where exactly did you get all the bloat from?

[carefree]

Frontpage 2003!!

 

Actually not really its fault , the program im using - the css fonts are orange and I want the category list to be dark blue. So I just visually edited it. But im on the right track now

[ToonMariner]

Frontpage 2003!!

 

Actually not really its fault , the program im using - the css fonts are orange and I want the category list to be dark blue. So I just visually edited it. But im on the right track now

 

its ALWAYS Frontpages fault!!!!

 

Its a bag of wbank!

[dbrimlow]

ts ALWAYS Frontpages fault!!!!

  LOL!

 

True.

 

FrontPage has an awful html view editor, so it almost forces the user to use the display view. I think it does this to discourage people from ac5tually seeing the skunk it writes.

 

And since Microsoft couldn't care less about standards (in fact consistently being arbitrarily anti-standards in its browser) it stands to reason that FrontPage would generate proprietary code that only works in IE.

 

But, carefree, there is still hope. Go to the w3c validation tool http://validator.w3.org/. Then, one by one, fix all the errors it shows. THIS will also teach you proper coding by default. Because while the tool identifies the error, it isn't always clear WHY you got the error.