podja Posted June 19, 2008 Share Posted June 19, 2008 Hi, I am working on a photography portfolio for a friend and have made the simple layout. http://sam.jackday.co.uk/ When you rollover the CSS buttons on the bottom left, only the text background changes and not the whole button. How can I change this so the whole button changes colour and not just the text? Here's the relevant CSS code: #container ul#nav { float: left; width: 120px; padding: 0px; text-align: right; margin-top: 420px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #container ul li { background-color: #38322C; font-family: Arial, Helvetica, sans-serif; list-style-type: none; width: 100px; margin-top: 10px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 10px; } #container ul li a { color: #FFFFFF; text-decoration: none; font-weight: bold; text-transform: lowercase; padding: 10px; } #container ul li a:hover { background-color: #003366; width: 100px; } and the HTML code if needed: <ul id="nav"> <li><a href="#">News</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> Link to comment https://forums.phpfreaks.com/topic/110902-css-buttons/ Share on other sites More sharing options...
haku Posted June 19, 2008 Share Posted June 19, 2008 It should be #container ul a:hover #container li { background-color: #abcdef; } Although this won't work in IE6, as :hover only works on 'a' elements in IE6. If you want the background to change in that browser, you will need to use a javascript solution. Link to comment https://forums.phpfreaks.com/topic/110902-css-buttons/#findComment-569085 Share on other sites More sharing options...
TheFilmGod Posted June 19, 2008 Share Posted June 19, 2008 You have to make the "a" element a block element. Display: block;. This should work in IE6 too. Like so: - edit as needed #container ul li a { display: block; width: 100px; height: something px; color: #FFFFFF; text-decoration: none; font-weight: bold; text-transform: lowercase; padding: 10px; } #container ul li a:hover { background-color: #003366; } Link to comment https://forums.phpfreaks.com/topic/110902-css-buttons/#findComment-569672 Share on other sites More sharing options...
haku Posted June 20, 2008 Share Posted June 20, 2008 Heh, leave it to me to do it the difficult way. The film god's method will be easier and more cross-browser friendly. Link to comment https://forums.phpfreaks.com/topic/110902-css-buttons/#findComment-569746 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.