[css-d] Navlist Problems
Hi All I am building a site here: http://www.apbassettsolicitors.co.uk/ http://www.apbassettsolicitors.co.uk/style.css The navlist is meant to have an icon at one end of the line and then on hover the icon changes. However, the icon won't go to the end of the list it stays in the middle and I can't see why? The list is currently styled like this: #navlist { list-style-type: none; } #navlist li { padding: 0; margin-bottom: 6px; } #navlist li a:link { background: transparent url(images/purple_triangle.gif) no-repeat 0% 50%; } #navlist li a:hover { background: transparent url(images/yellow_arrow.gif) left center no-repeat; color: #11033F; } #navlist li a#current { background: transparent url(images/yellow_arrow.gif) left center no-repeat; color: #11033F; } As you can see I have tried 0% 50% and also left center. I have tried putting it before the no-repeat and after the no-repeat. To no avail it won't go where I want! Any ideas please? -- Kind regards Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navlist Problems
Richard Brown wrote: Hi All I am building a site here: http://www.apbassettsolicitors.co.uk/ http://www.apbassettsolicitors.co.uk/style.css The navlist is meant to have an icon at one end of the line and then on hover the icon changes. However, the icon won't go to the end of the list it stays in the middle and I can't see why? ... Any ideas please? Hi Rich The image you are using as a background is 60px wide by 68px high. The css is positioning it exactly as you specify, but with such a large image it is being pushed off the sides. Try reducing the size of the image and trimming the surrounding white background. Regards -- Scott Swabey Design Development Director - Lafinboy Productions www.lafinboy.com | www.thought-after.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navlist Problems
Richard; you've also left the browser's automatic left padding on the list and list items. To fix, it's simply: #navlist, #navlist li { padding-left: 0; /* or some other suitable amount */ } Cheers, Kit Grose iQmultimedia __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Navlist Problems
Hi Kit and Scott On 17/08/07, Kit Grose [EMAIL PROTECTED] wrote: Richard; you've also left the browser's automatic left padding on the list and list items. To fix, it's simply: #navlist, #navlist li { padding-left: 0; /* or some other suitable amount */ } Many thanks for your help. It is now working fine. -- Kind regards Rich http://www.cregy.co.uk Embracing what God does for you is the best thing you can do for him. Romans 12 v 1 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/