CSS Rollover help: IE problem

[monktus]

I've made my first foray into CSS rollovers and it's not going too badly except I'm having problems with a menu working in IE 5.2 (haven't checked Windows IE yet). At first I thought it was that IE CSS bug (I put the fix in), but then I added a single button that worked and I'm not sure why the menu doesn't. Could someone have a quick look and check if there's anything obvious? The site so far is here:

http://weegiedirtyweekenders.org.uk

I've been trying to post the relevant code but I'm tired and it wasn't doing it. Anyway, the other thing I was wondering was how to set an initial state for a button (over for instance). Thanks for any help,

Cheers,
Craig

 

[mdnky]

First off, take a look at the doctype. While it's most likely not the issue with IE 5.2, it may cause issues with Win versions of IE. The very first line, <?xml version="1.0" encoding="iso-8859-1"?>, isn't required to be compliant with W3C specs and is a problem with IE6. I'd suggest you remove it.

Also, you should probably consider using HTML4 as your spec on this site. Especially if you're going to leave it as a tables-based layout site.

As far as the IE 5.2 issue...there's no fix for it. IE 5.2 doesn't support the hover feature on images. You would have to use a unordered list/css instead to get it to function properly or JS mouseovers.

 

[monktus]

As far as the IE 5.2 issue...there's no fix for it. IE 5.2 doesn't support the hover feature on images. You would have to use a unordered list/css instead to get it to function properly or JS mouseovers.

Thanks for the reply. I'm already using an unordered list though and the code I'm using does work in IE 5.2, the problem is that some of it works and some of it doesn't i.e. the single button is fine but the menu isn't. I also found the same problem in FireFox and IE on Windows (there was a layout issue in Win IE too).

 

[mdnky]

I meant a true unordered list, not one with background images set for the diaplay and change of the link. You would have the hover effect set on the link itself ((#menu li a:hover)), removing the background images from the css file.

I'd personally not worry too much about IE5.2, since it's a very minor issue (links still work) and the other way I'm describing is going to cause a lot of layout issues that'll need to be considered. You could try adding a non-breaking spacer in the A tags to fix the issues with other browsers...I'm thinking that might be the problem there but I'm in a crunch for time and unable to test it.

Good luck

/// CSS (might need tweaking) ///

#menu {
  margin: 0;
  padding: 0;
  list-style: none;
  }

#menu li {
  display: inline;
  margin: 0 .5em 0 0;
  padding: 0;
  }

#menu li a:link, #menu lia:visited {
  color: #000;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  }

#menu li a:hover {
  color: #fff;
  }


/// HTML ///

<ul id="menu">
  <li id="1-news"><a href="index.html">News</a></li>
  <li id="2-about"><a href="about.html">About</a></li>
  <li id="3-committee"><a href="committee.html">Committee</a></li>
  <li id="4-photos"><a href="photos.html">Photos</a></li>
  <li id="5-contact"><a href="contact.html">Contact</a></li>
  <li id="6-links"><a href="links.html">Links</a></li>
</ul>