Firefox 2...another issue!

You've got some rather confounding markup errors. You may want to validate first.

I've taken care of some of the issues that were causing errors. A lot of the errors are in the stylesheet for the Thickbox JavaScript applet, which I'm using straight out-of-the-box.

Either way, none of the validation errors (in my little knowledge) would have bearing on this issue.

Precar.

What am I missing?

I clicked the link, don't see a menu. If I click on the image, there's a gallery with a list/menu/thingie on the left. Is that the one with the problems? Didn't see anything initially wrong with FF3 but want to wait until I know it's the right menu before booting up 'Blows to see in FF2 (Ubuntu keeps stealing my FF2 : (

Here's the direct link to the page:
http://pranshuarya.com/photoblog/index.php?x=browse&pagenum=1.

I lost my access (temporarily) to FF2 but looked in Browsershots and it looked the same as FF3 and Opera over here.

Is this just an issue that happens on :hover? Menu itself looks fine.

Hi,

I've attached a screenshot of what I see in FF2. Do you not see the same thing?

Ah, yup. I see it now. Note, in FF3 the main menu lines up fine but the subs are unreachable.

You do have byte-order marks all over your CSS... that might be the problem?
html, body{
height:100%;
width:auto;
}

Notepad is famous for adding that little mark to represent Byte Order Mark (which comes from using XML or UTF-8 or 16 charsets... UTF-8 doesn't actually need a BOM but anyway you need to remove those marks).

I'm having trouble reading your menu HTML being all in one line. I could copy it and try to re-indent it, but if you have a copy already indented that would be great. I saw this:

etc... somewhere and that didn't smell right, even with nested lists.

Hi,

Where are you able to see the byte-order marks? I'm looking in Firebug in FF3 and don't see them. If you can tell me where I can view them I can take them out from there.

You were right about the tags being mismatched in the nested list. I've fixed that. You've got a sharp eye to be able to spot that in the mess that the list was in!

Here's the code for the menu:

<ul class="sf-menu">
	<li><a href="<SITE_URL>index.php?x=rss">rss</a></li>
	<li><a href="<SITE_URL>index.php?x=about">about</a></li>
	<li><a href="<SITE_URL>index.php?x=googlemap">map</a></li>
	<li><a href="javascript:PicLensLite.start({feedUrl:'http://pranshuarya.com/photoblog/index.php?x=rss', maxScale:0});">slideshow</a></li>
	<li><a href="#">browse</a> 
		<ul>
			<li><a href="<SITE_BROWSELINK_PAGED>">all</a></li>
			<li><a href="#">series</a> <ul><li><a href="#">around town</a> 
				<ul><li><a href="<SITE_URL>series/100508/">10/05/08</a></li>
					<li><a href="<SITE_URL>series/longlake/">10/18/08 long lake</a></li>
					<li><a href="http://pranshuarya.com/graphics/photos/halloween-08/">halloween '08</a></li>
				</ul>
			</li>
			<li><a href="<SITE_URL>series/scwed/">steve & charlene's wedding</a></li>
			<li><a href="<SITE_URL>series/indiawork/">workers in india</a></li>
			<li><a href="#">signs</a> 
				<ul>
					<li><a href="<SITE_URL>series/signs1/">N. America</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul></li>
</ul>

Thanks!
Precar

The W3C validators highling BOMs as errors. One reason why they are the authoratative validators.

I'm sorry but I don't see the errors you're talking about. Just to make sure we're using the same service, I'm attaching a screenshot of what I've used.

Thanks,
Precar.

These are your URL's, right? see images attached. In Yo face

Alright, I was validating the CSS while the errors were in the XHTML. But do you guys think they are relevant to the issue I'm concerned with? I thought it's just a CSS issue with FF2 not rendering the same as Safari, Opera, IE, and FF3.

The site is running Pixelpost. I've tried validating a few other Pixelpost installations and see similar validation errors on them.

Precar.

CSS rules are defined only for valid xhtml, so without that your CSS rules don't even apply. Browsers are supposed to error correct but there is no standard for this, so they are on their own and, not suprisingly they often do that differently.

We stress this over and over on the site. Without valid html or xhtml you have no basis for holding a browser to any particular standard. With 17 posts to your name I'm surprised you haven't heard about this yet.

If this bothers you, think about how you might go about specifying a standard for every single possible way of writing invalid html code. It's hard enough developing a standard for correct code!

Actually I believe the xhtml standard says that a page with invalid code shouldn't even display at all. Most xhtml pages are actually served as html and so browsers will try to error correct, often badly.

You might think you are coding in xhtml, by the way, but no browser in the known world treats it as xhtml unless the http header actually says it is xhtml, and none of the common servers do that unless you specifically configure them to, and no one does. Really, browsers just treat your code as html, which is lucky for you because for actual xhtml IE6 can't even apply CSS rules to XML.

For anyone who is or might experience this in the future, I was able to fix it by removing the "float" property from the ".sf-menu" item.

For those interested, the link to the page to view the source is <a href="http://pranshuarya.com/photoblog/index.php?x=browse&pagenum=1" rel="nofollow">http://pranshuarya.com/photoblog/index.php?x=browse&pagenum=1</a>.

Precar.

Sorry, Precar, the place I was seeing the byte order marks were on the CSS page, when I viewed the CSS in my browser (and actually, I was looking at your page in FF2 on a Virtual Box running Winblows, but I could copy those marks from the CSS over here in Ubuntu on FF3...)

I'm glad you got your menu sorted out, but right now in FF3 I'm having trouble grabbing that ALL under Browser. There's too much space between the main menu item and the first sub-- a physical gap that means if I don't move my mouse fast enough, :hover is lost and I have nothing to select because the submenu goes away.

Once I get onto the submenu, everything else seems to line up fine.

I'd say, reduce whatever top margin there is or whatever is creating that gap, and you're good. Though as a separate issue, your contrast for the text is rather low. Someone with an older screen or monitor may have trouble reading your menu items.

You can run your page through GrayBit to see how the contrast in general is.