Rollover images using CSS

[soupdragon]

Hi
I've actually got the rollover script to work but when you try to add a doc type to the html page it ruins the rollover. I positioned the mouse over with padding, is this why? I've supplied the script below minus doc type,

Any help or suggestions would be gratefully received,

[soupdragon]

Fixed the problem. Sorry to bother you lot

[soupdragon]

The plot thickens. i've now got the css buttons in the correct place with the trans doctype. But when you try and validate you get the following messages,

Below are the results of attempting to parse this document with an SGML parser.

1. Error Line 16 column 12: start tag for "LI" omitted, but its declaration does not permit this.

<div id="m0"><li> <a href="index.htm" title="Homepage">Homepage</a></li></div>

✉
2. Error Line 16 column 16: document type does not allow element "LI" here; missing one of "UL", "OL", "DIR", "MENU" start-tag.

<div id="m0"><li> <a href="index.htm" title="Homepage">Homepage</a></li></div>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

✉
3. Error Line 17 column 16: document type does not allow element "LI" here; missing one of "UL", "OL", "DIR", "MENU" start-tag.

<div id="m1"><li> <a href="Aboutus.htm" title="About Us">About Us</a></li></div>

✉
4. Error Line 18 column 16: document type does not allow element "LI" here; missing one of "UL", "OL", "DIR", "MENU" start-tag.

<div id="m2"><li> <a href="Examples.htm" title="Examples">Examples</a></li></d..

✉
5. Error Line 19 column 16: document type does not allow element "LI" here; missing one of "UL", "OL", "DIR", "MENU" start-tag.

<div id="m3"><li> <a href="Products.htm" title="Products">Products</a></li></d..

✉
6. Error Line 20 column 16: document type does not allow element "LI" here; missing one of "UL", "OL", "DIR", "MENU" start-tag.

<div id="m4"><li> <a href="Findus.htm" title="Find Us">Find Us</a></li></div>

✉
7. Error Line 21 column 16: document type does not allow element "LI" here; missing one of "UL", "OL", "DIR", "MENU" start-tag.

<div id="m5"><li> <a href="Contactus.htm" title="Contact us">Contact Us</a></li>



Again any help would be very greatfully recived,

Thanks

[mwinter]

i've now got the css buttons in the correct place with the trans doctype.

New markup should typically use a strict document type. The transitional variety was meant to accomodate legacy documents.

But when you try and validate you get the following messages,

Providing validation error messages without markup isn't often helpful; the error can often occur before the point indicated by the validator.

<div id="m0"><li>

A div element may not be the child of a ul or ol element. Similarly, a li element may only have a ul or ol element as a parent. The second error message description states this (though not necessarily in a fashion with which you're familiar).

Mike

[soupdragon]

Hi

Sorry, I've fixed the problem and copied the script originally from the first post into notepad to edit. I must have cut it by accedent! Sorry again.

Thanks for the Advice.

[siradel]

Two easy methods for pure CSS rollover techs :

http://pearltips.blogspot.com/2009/0...r-effects.html