I recently became the webmaster for the Billiards Club at my school.
I put up a small new site, but am encountering some quirky behaviour.
The links in the left-hand navigation works in Netscape/Mozilla/Opera, but not in IE.
The site index.
The CSS file, if that’s the trouble.
Thanks
It works fine in IE6 SP1. What version are you using and what are the symptoms (is there no effect on clicking the links or is it a visual problem)?
Change the line
<link rel="stylesheet" href="billiards.css" type="text/css"/>
to
<link rel="stylesheet" href="billiards.css" type="text/css" id="pbstyles" />
then add the line
<?xml-stylesheet href="#pbstyles" type="text/css"?>
right at the top of your XHTML file(s).
Referenced from the W3C spec here.
I haven’t checked this in Netscape/Mozilla/Opera since I don’t have them handy at the moment, but it should work fine.
Hope this helps.
puggyfish
I’m using IE 6.0.2600.0000
Armilla
Made no difference.
I think the problem is IE sees the navigation as being stuck under the margin of the body, and thus unaccessible. I can’t say I’m too familiar with using style sheets to lay out a page like this, but in this case it might be easier to just use an old fashioned table.
Nix the -
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
First get your code up to scratch:
Ignore larsenmtl’s comment. DOC-TYPES are required to create valid web pages.
Your <br> tags should be <br />
This is incorrect:
<img src=“pmu-room.jpg” caption=Purdue Memorial Union Recreation Center" "alt=“PMU Recreation Facilities” />
Check your quotes. Find the two errors? 
Get rid of your hanging </font> tag. You’re using CSS.
Why <?xml-stylesheet href="#pbstyles" type=“text/css”?> ??? You are not creating an XML web page. Stick with just XHTML. Walk before you can run.
Don’t you dare get rid of that doctype declaration, that’ll just break IE even more.
Anyhow, since you probably don’t feel like rewriting the entire page and style sheet, just define all your div classes to have a relative position. The fastest way is like so (in the CSS file, natch):
div { position: relative; }
And if I could make one recommendation: don’t use the <font> tag. Use <span> instead. Just replace “font” in all your font tags with “span” and you’ll be golden.
Also, regarding Armilla’s suggestion: it’s unnecessary. I’ve never had to use it. I guess it wouldn’t hurt to include it, but it’s an extra step you don’t need, since every browser can handle <link> tags just fine.
Don’t you just hate yourself sometimes, I know getting rid of the Doctype is horrible but it seems it would have fixed the menu problem. For my own sanity, why?
It seems that Hauky’s div { position: relative; } is the key.
Hauky
The relative thing worked. Thanks a lot!!
Is there any way to position elements pixel-precise? Coz, the CSS positioning thing makes me use some weird numbers…
Duckster
<i>Why <?xml-stylesheet href="#pbstyles" type=“text/css”?> ??? You are not creating an XML web page. Stick with just XHTML. Walk before you can run.</i>
Umm, if you read upthread, you’ll know why.
Yes, the key in the provided link is …
“CSS defines different conformance rules for HTML and XML documents; be aware that the HTML rules apply to XHTML documents delivered as HTML and the XML rules apply to XHTML documents delivered as XML.”
Your web page is an XHTML document delivered as HTML.
I haven’t dug into your html/css to see if you’ve implemented changes discussed here, but I thought I’d let you know that as of the time of this post, I get the same problem you describe from your initial link, using IE 6.0.2800.1106.
Also, just for the sake of cleaning up your code, which isn’t that messy…
You need to replace all your <br>'s with <br />'s, and, in this tag:
<img src=“pmu-room.jpg” caption=Purdue Memorial Union Recreation Center alt=“PMU Recreation Facilities” />
Duckster is right that you need to fix the quotes, but also, the caption attribute doesn’t exist for the img element. In fact, it doesn’t exist for any HTML element so far as I can tell. I think you probably should just get rid of it.
I’ve cleaned up the code in my local folder. But the host’s FTP server is acting erratically, so I’ve been unable to upload the corrected files.
Looking at the code of the page as it is now it looks as if your HTML editor moved the <?xml-stylesheet…> line down into the body of the document - I should have warned you that things like FrontPage like to do this. It needs to go right at the top of the document.
For what it’s worth, my fix works on all versions of IE6 that I’ve tried it on. Even if I edit the source document to make it well-formed XML it still continues to fail without that line.
I’m not sure I see the distinction between an “XML web page” and XHTML. XHTML is XML. I’ve not done a huge amount of work with loose XHTML; am I missing something?
Then you need to go back to the link you provided and read it from the beginning.
Or just compare XHTML, with HTML and XML by reading http://www.w3.org/TR/xhtml1/#xhtml
Gyan9 is writing in XHTML and not XML. There is no need for the XML reference.