ben03 Posted November 16, 2009 Share Posted November 16, 2009 I am currently writing code for a new toolbar and have come accross a problem where a link to an address which doesn't have a 'www.' is not inheriting the style rules (text should be white but remains blue). The code is below: a.toolbar { float: left; text-decoration:none; color: white; background-image: url('images/toolbar.gif'); width: 85px; height: 35px; padding: 0px 10px 0px 10px; }a.toolbar:hover { color: #00ff00; text-decoration: underline; background-image: url('images/toolbar_over.gif'); width: 85px; height: 35px; padding: 0px 10px 0px 10px; }<a class="toolbar" href="http://jabonline.myfastforum.org">Forums</a> Is there anything missing in there that may solve the issue? Link to comment Share on other sites More sharing options...
jeffman Posted November 16, 2009 Share Posted November 16, 2009 What the heck browser are you testing with? I can't even imagine such a thing, but just to be sure I quickly experimented. It all works fine.Have you tried clearing your browser's cache? Link to comment Share on other sites More sharing options...
ben03 Posted November 16, 2009 Author Share Posted November 16, 2009 Just tried that but still comes up And that's IE8 so have no idea why. Link to comment Share on other sites More sharing options...
ben03 Posted November 23, 2009 Author Share Posted November 23, 2009 Seems to have solved itself having re-ordered the link, hover & visited elements.One other question regarding the toolbar is is there a way of pre-loading the rollover images used in the toolbar? The image blanks out often when you hover the mouse over it as it doesn't load in time: www.jab-ride.co.uk Link to comment Share on other sites More sharing options...
thescientist Posted November 23, 2009 Share Posted November 23, 2009 you could use sprites or javascript for pre-loading images. Link to comment Share on other sites More sharing options...
jeffman Posted November 23, 2009 Share Posted November 23, 2009 Sprites! Yes! Link to comment Share on other sites More sharing options...
ben03 Posted December 2, 2009 Author Share Posted December 2, 2009 Sprites! Yes!Thanks for that, that's great. Link to comment Share on other sites More sharing options...
ben03 Posted December 2, 2009 Author Share Posted December 2, 2009 Here's the code I've worked out so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css">#navlist{position:relative;}#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}#navlist li, #navlist a{height:35px;display:block;}#home{left:0px;width:85px;}#home{background:url('images/toolbar.gif') 0 0;}#home a:hover{background: url('images/toolbar_over.gif') 0 -85px;}#about{left:85px;width:85px;}#about{background:url('images/toolbar.gif') -85px 0;}#about a:hover{background: url('images/toolbar_over.gif') -85px -85px;}#forums{left:170px;width:85px;}#forums{background:url('images/toolbar.gif') -170px 0;}#forums a:hover{background: url('images/toolbar_over.gif') -170px -85px;}#photo{left:255px;width:85px;}#photo{background:url('images/toolbar.gif') -255px 0;}#photo a:hover{background: url('images/toolbar_over.gif') -255px -85px;}#film{left:340px;width:85px;}#film{background:url('images/toolbar.gif') -340px 0;}#film a:hover{background: url('images/toolbar_over.gif') -340px -85px;}#clothing{left:425px;width:85px;}#clothing{background:url('images/toolbar.gif') -425px 0;}#clothing a:hover{background: url('images/toolbar_over.gif') -425px -85px;}#links{left:510px;width:85px;}#links{background:url('images/toolbar.gif') -510px 0;}#links a:hover{background: url('images/toolbar_over.gif') -510px -85px;}</style></head><body><ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="about"><a href="css_intro.asp"></a></li> <li id="forums"><a href="css_syntax.asp"></a></li> <li id="photo"><a href="css_syntax.asp"></a></li> <li id="film"><a href="css_syntax.asp"></a></li> <li id="clothing"><a href="css_syntax.asp"></a></li> <li id="links"><a href="css_syntax.asp"></a></li></ul></body></html> The rollover is not functioning properly (the image displayed for 'hover' is halved). Is there a reason for that in the code shown?(images can be found at: http://www.jab-ride.co.uk/toolbar.gif and http://www.jab-ride.co.uk/toolbar_over.gif). Thanks. Link to comment Share on other sites More sharing options...
thescientist Posted December 2, 2009 Share Posted December 2, 2009 I think the problem is in your implementation. If you want to do it like the try-it example, you need to combine all the states, off and hover, into one image, which is the point of sprites. With your current implementation, you don't need to use a negative value for the hover because in the try it example, the hover images (within the overall collective image file) are below the off states. In your case, your x-axis moves the same for both states, but the y doesn't.Two solutions: (better) Combine your off and hover states into one image and recalculate your x-y coordinatesorLeave the y coordinates at 0, essentially using the same coordinates from the off state, but just changing the image src. Link to comment Share on other sites More sharing options...
ben03 Posted December 2, 2009 Author Share Posted December 2, 2009 Can see where you're coming from there. For some reason had got confused with the old syle menu I was working with.That's sorted it. Thanks for the help! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.