I'm trying to create a list menu with a mouseover effect that changes the background of the list item. But I can't get the background to start before the bullet image.
any one know if this is possible?
Idan
| SitePoint Sponsor |
I'm trying to create a list menu with a mouseover effect that changes the background of the list item. But I can't get the background to start before the bullet image.
any one know if this is possible?
Idan

I think you need to use, but if I remember correctly IE6 doesn't like this. Try it out though and see what happens.Code:li { list-style-position: inside; }
I tried...didn't get it to work well.
I did this:
margin-left:-30px;
padding-left:30px
but ie6 didn't like it. works great in firefox.
Idan
Without seeing the full working example, I'm not entirely sure what you're after but I'd suggest using a background image and adjusting the padding instead of using list-style-image.
I put this together to help someone elses problem but it probably applies to this situation as well?
http://www.dave-woods.co.uk/wp-conte...08/index3.html

Hmm, a background image is probably a more robust method.
arbel, this could also be something to do with you not setting default padding and margins to 0. This works identically in IE6 and Firefox:
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Badger</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="Crimson Editor"> <style> ul, li { padding:0; margin:0; } li { list-style-position:inside; background-color:red } </style> <script type="text/javascript"> </script> </head> <body> <ul> <li>Item one</li> <li>Item one</li> <li>Item one</li> <li>Item one</li> <li>Item one</li> <li>Item one</li> </ul> </body> </html>
thanks,
I'll take a look.
Idan
Raffles, you're also going to need a full doctype![]()

There's nothing wrong with that doctype. It will trigger standards mode in everything except IE5/Mac, which is dead and nobody should care about.
See the table here: http://hsivonen.iki.fi/doctype/
That link does also state though that omitting the URI from the doctype triggers almost standards compliance mode for some browsers
EDIT: although the table at the bottom seems to contradict that statement. Either way, it's there for a reason so I'll continue use the full one.Firefox, Safari and Opera 7.5 (and later) also have a third mode known as “the Almost Standards mode”, which implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification.

Yes, omitting the URI will trigger Almost Standards Mode in old versions of Opera, Konqueror and IE/Mac. Opera users tend to know a bit more about browsers and update it regularly, so ignoring Opera 7.x is sensible, and IE/Mac like I said before is as good as dead to me.
The table doesn't contradict the statement. You can trigger Almost Standards Mode in Mozilla and Safari but only with a Transitional doctype, which seems sensible to me, since Traditional doctypes are for people who are still stuck in the 1990s.
At the end of the day I suppose using the full doctype is sensible, I just use that one because it's the only one I know off by heart!
To be honest, even though I'm coding web pages everyday, I wouldn't even know as much as the first part of the doctype off the top of my head.
I've got a template setup which I always use as a starting point which includes it and if I ever didn't have access to that then I've got them noted on my website or could just copy and paste from another site.
I'm sure there's a few designers who do know them off the top of their head but I'm sure most just copy and paste or use a template

To be honest I didn't even know what all the bits in the doctype meant until I read something that broke it down, about it a couple of months ago. Can't remember where it was, but there's an explanation here: http://www.autisticcuckoo.net/archiv...t-type-headers
Yeah, interesting read, there's also an article by Zeldman on alistapart which many might find useful
http://www.alistapart.com/stories/doctype/
Sorry for taking this thread off topic![]()
Bookmarks