Jump to content

Rollover Button Problem


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...