<li> tags in Opera

[djd4n]

I'm using the following html:

<table>
<tr>
<td bgcolor="#FCFCFC">
<ul class="noindent">
<li class="bullet"><font size="-1"><b><a href="products.php?type=magix"/>DACS</b></font></li>

<li class="bullet"><font size="-1"><b><a href="products.php?type=peterson"/>Magix</b></font></li>

<li class="bullet"><font size="-1"><b><a href="products.php?type=seven_woods_audio"/>Peterson</b></font></li>

<li class="bullet"><font size="-1"><b><a href="products.php?type=triple_p"/>Seven Woods Audio</b></font></li>

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

This displays correctly in IE and Firefox. When it is viewed in Opera the first bullet point is in the right place but the following bullet points are all indented one step more, i.e. they don't line up.
They do line up in IE and FF

Is this a problem with Opera?

[encyclo]

The problem is with your broken markup: you are missing the closing

</a>

on each list item. Instead, you have added a trailing slash to the

<a href="">

part, which is not valid HTML. Your markup should read like this:

<li class="bullet"><font size="-1"><b><a href="products.php?type=magix">DACS[b]</a>[/b]</b></font></li>
<li class="bullet"><font size="-1"><b><a href="products.php?type=peterson">Magix[b]</a>[/b]</b></font></li>
<li class="bullet"><font size="-1"><b><a href="products.php?type=seven_woods_audio">Peterson[b]</a>[/b]</b></font></li>
<li class="bullet"><font size="-1"><b><a href="products.php?type=triple_p">Seven Woods Audio[b]</a>[/b]</b></font></li>

You unfortunately can't use SGML shorttag notation and remain valid or functional HTML. You should put your pages through the HTML validator [validator.w3.org] to get a better guide.

[djd4n]

ok will give that a go and post the results.

I have been using the W3 validator and the whole page comes up XHTML 1.0 transitional valid however.

[encyclo]

You are right in that

<a />

is valid XHTML, but the validator uses an XML parser to validate XHTML whereas you are almost certainly invoking an HTML parser in the browser (depending on your MIME type). The validator doesn't check the MIME type - which could be considered a bug.

As you are effectively serving the contents as HTML, then you will need to respect HTML syntax even if you are using XHTML notation - hence the requirement for a closing

</a>

rather than a closing slash (the document fails validation for HTML4).

[djd4n]

it's fixed for opera now

cheers for the help!

[g1smd]

Next up, why are you using <font> tags when you have a class there? Add one line to the CSS to get rid of three <font> tags and three </font> tags.

Additionally, why have the class repeated three times, when you only need it once on the list (put it on the <ul> or <ol> tag), and can then access the list items in the CSS with:
.classname li { css stuff goes here }

[djd4n]

i'm sorting the HTML out for another person, and i'm adjusting it to use CSS, be it slowly!

i'm no HTML expert, but the page was previously constructed by someone using only WYSIWYG mode in frontpage, hence the problems. I am the only one with enough patience to sort it out!

thanks for the tip!

[g1smd]

You'll probably be able to knock 20 to 30% off the file size.