ul problem in Opera and FF

[kmw]

Page is www.oldvillagemasterpainters.com/about.aspx

I have validated both the html and the css. Css gives me warnings about background colors but passes.

My problem is this: There is a ul menu on the left side of the page that renders as I would like it to in IE7 (and I believe in IE6) but doesn't look so good in Opera 9.25 or FF 2.

In opera the list looks to be in-line and wraps within the containing <div>
In FF the list is in-line and wraps but outside the <div>

The relevant css (in page.css) is
/code/
#leftmenu {float:left;height:350px;margin: 10px 10px 10px 10px;width:200px;
background: url(/images/OV_Logo_trans_198.jpg) no-repeat 100% top;}
#leftmenu ul {list-style: none;}
#leftmenu ul li {}
#leftmenu a {display:block;float: left;padding: 0px 0 0 0px;
text-decoration: none;color: #330033;
font-weight: bold;font-size:small;font-family:Arial;}
#leftmenu a:hover {color: #CC0000;}
#leftmenu a:visited {color: #993399;}
#leftmenucontent {margin:110px 0 0 0px;}
/code/

html is
/code/
<div id="leftmenu">
<div id="leftmenucontent">
<ul>
<li><a href="#H">Our History</a></li>
<li><a href="#C">C. Schrack &amp; Co.</a></li>
<li><a href="#S">Christian Schrack</a></li>
<li><a href="#J">Joseph Stulb</a></li>
<li><a href="#G">Girard Ave Fire</a></li>
<li><a href="#G2">2nd Generation</a></li>
<li><a href="#R">Camden Fire</a></li>
<li><a href="#G3">3rd Generation</a></li>
</ul>
</div>
</div>
/code/

I use the same setup on /affiliates.aspx but on this page there is only text in the <div class="leftmenucontent"> - no ul

any help would be appreciated

[drhowarddrfine]

IE is showing what you want but not what you wrote. Never use IE as a reference for how things should work. It is 10 years behind web standards and buggy.

While you properly included the xml declaration on the first line, only modern browsers properly handle this while IE chokes and goes into 'quirks mode'. But you can safely remove that line since you are only serving html anyway.

After you do that, see where we stand.

[kmw]

I'm using asp.net and just added a global.asax file which is supposed to render xhtml to opera and ff but html to IE. Since my last post I also validated the page to xhtml 1-strict.

This didn't seem to have any affect on the problem.

I'm assuming that I am either doing something wrong or missing something in the css for the list,

[drhowarddrfine]

You are one of the few people I've ever seen actually do that right. :)

On your first line of page2.css, the utf-8 BOM is showing and messing up the top of the page.

In the ul, you also want to float the <li> and I don't think you need to float the anchors inside that. The other elements need to be looked at, too. It may be obvious to you but I have to leave for a while.

[kmw]

Removing the float did the trick
/code/
#leftmenu {float:left;height:350px;margin: 10px 10px 10px 10px;width:200px;
background: url(/images/OV_Logo_trans_198.jpg) no-repeat 100% top;}
#leftmenu ul {list-style: none;}
#leftmenu ul li {}
#leftmenu a {display:block;padding: 0px 0 0 0px;
text-decoration: none;color: #330033;
font-weight: bold;font-size:small;font-family:Arial;}
#leftmenu a:hover {color: #CC0000;}
#leftmenu a:visited {color: #993399;}
#leftmenucontent {margin:110px 0 0 0px;}
/code/

not sure what you meant by the UB8 comment?

and thanks for the compliment but whatever I did right messed up all my validation - I think maybe because I was doing the validation using IE7.

if you look at the rest of my site you will see some other opera/ff problems so I may be back.
Thanks for the help
Kevin

[drhowarddrfine]

It's "u t f -8" character encoding. Some editors save that type and add the BOM, which means "byte order mark" and indicates it's utf-8. It should not be there.

Do not try and fix Opera and FF. Always use those as your reference and initial test for working markup. Rarely do those browsers misinterpret html and css. IE handles far too many thing wrong to trust it. As you may be seeing now, what you are writing for IE messes up everybody else, but if you test first in Opera or Firefox, then chances are it will work everywhere; sometimes even IE ;)

[kmw]

How do you see the UTF-8 ?
I created the file using Visual Web Developer which doesn't show that line and I also opened the file using Notepad but still could not see it. Not sure how to get rid of it if I can't see it.

[kmw]

I've got the site looking pretty good - or at least consistent - on Opera, Netscape,Firefox, and IE. Thanks for your help.