davetacular Posted June 24, 2007 Share Posted June 24, 2007 I'm testing rollover buttons using CSS and I've hit a dead end. I'm using a horizontal div navigation bar (740px x 25px), which I have cut up into five separate boxes (148px x 25px) using spans. I have floated the left within the navigation bar (their container). Each one of these five boxes has a background colour, and all contain a link. Using CSS I have given links focus and hover properties which change the background colour when rolled over. I have set the width of this new background colour to the same height and size of the five boxes. Meaning that the whole box that is being rolled over should change from its default colour to its focus/hover colour. This surprisingly works perfectly in IE6, but fails to do so in FF2 or Opera 9. In Opera 9 and Firefox 2 the colour of the link background changes instead of the box (button) background, like it does in IE6. Ideally I would like FF2 and O9 to to the same as IE6, changing the full box colour.Thanks.XHTML <!--DM--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Home</title><link rel="stylesheet" type="text/css" href="css/index.css" /></head><body><div id="container"><div id="head"></div><div id="nav"><b><span id="nav1"><a href="index.htm" class="navlink">Home</a></span><span id="nav2"><a href="a.htm" class="navlink">Products</a></span><span id="nav3"><a href="b.htm" class="navlink">FAQ</a></span><span id="nav4"><a href="c.htm" class="navlink">About Us</a></span><span id="nav5"><a href="d.htm" class="navlink">Contact Us</a></span></b></div><!--end nav--><div id="right"></div><div id="left"><p id="intro">Welcome to my web page!</p></div><div id="foot"></div></div><!--end container--></body></html> CSS //* DM *//* page alignment ie/background colour */body { background-color:#3D3D3D; text-align:center;}/* page positioning/layout/section colour */#container { width:740px; height:565px; margin:0 auto;}#head { width:740px; height:80px; background-color:#C9C9C9;}#nav { width:740px; height:25px; background-color:#ADAEAD; vertical-align:top;}#right { float:right; width:520px; height:460px; background-color:#E7E8E7; text-align:left;}#left { float:left; width:220px; height:460px; background-color:#C9C9C9;}#foot { width:740px; height:25px; clear:both; background-color:#ADAEAD;}/* left column;first letter/text align */#intro:first-letter { font-size:18px;}#intro { text-align:left;}/* gradiented navigation bar */#nav1 { width:148px; height:25px; float:left; background-color:#737A80;}#nav2 { width:148px; height:25px; float:left; background-color:#899198;}#nav3 { width:148px; height:25px; float:left; background-color:#ACB7BF;}#nav4 { width:148px; height:25px; float:left; background-color:#E6F4FF;}#nav5 { width:148px; height:25px; float:left; background-color:#F2FAFF;}/* rollover buttons *//* rolled over*/a:hover.navlink { background:#CFDCE6; color:blue; width:148px; height:25px; font-size:22px; text-decoration:none;}/* default */a.navlink { text-decoration:none; font-size:20px; color:black; font-size:20px } Link to comment Share on other sites More sharing options...
S@m Posted June 25, 2007 Share Posted June 25, 2007 Do you have a link to see it work (or not work) Link to comment Share on other sites More sharing options...
davetacular Posted June 25, 2007 Author Share Posted June 25, 2007 Just page my code into your editor to test it.Anyway I have "fixed" my problem by simply giving each link (button) its own class and then by setting padding for hovered links (a:hover) for that class. I had to precisely define the paddings width to the left and to the right of each button relative to the amount of text on the button for each individually. More text, less padding.I took a long road for a short cut, adding another 100 lines of CSS. I just can't find that short cut;maybe it's right under my eyes.At least it's working and all browsers (IE6, FF2 and O9) are satisfied.Is there an easier or more obvious way?Thanks. Link to comment Share on other sites More sharing options...
lumoslindsay Posted June 25, 2007 Share Posted June 25, 2007 Instead of using the class property in the link, use it in the span and get rid of the id="nav1,2..". Then use your new classes in the span to change the background colors. like this: <span class="nav1"><a href="index.html">Home</a></span> a.nav1{display:block;float:left;width:148px;height:25px;background-color:#FFFFFF;}a:hover.nav1{background-color:#000000;color:blue;} Because your class was in the actual link and not the 'box', you're only seeing the link background color change. This should eliminate your need for padding. Link to comment Share on other sites More sharing options...
Jamess Posted June 25, 2007 Share Posted June 25, 2007 Instead of using the class property in the link, use it in the span and get rid of the id="nav1,2..". Then use your new classes in the span to change the background colors. like this:<span class="nav1"><a href="index.html">Home</a></span> a.nav1{display:block;float:left;width:148px;height:25px;background-color:#FFFFFF;}a:hover.nav1{background-color:#000000;color:blue;} Because your class was in the actual link and not the 'box', you're only seeing the link background color change. This should eliminate your need for padding. Wouldnt it make more sense and be easier to just have<a href="index.html" class="nav1">home</a> Link to comment Share on other sites More sharing options...
lumoslindsay Posted June 25, 2007 Share Posted June 25, 2007 Wouldnt it make more sense and be easier to just have<a href="index.html" class="nav1">home</a> And drop the span? You could do it that way too I suppose. What ever is easier...dwm, if you want all your links to rollover to the same background color then instead of using the "a:hover.nav1,2.." like I suggested, you could use your div id (nav) to style them all for the hover state using: #nav a:hover{ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.