1 Reply Latest reply on Dec 30, 2008 2:26 AM by visualeye

    CSS Rollover Buttons

    nowherecreative
      I am working on a website, it looks great in Firefox! I created CSS rollover buttons (which I'm new to). On the menu page the navigation expands down to show sub links which is just another group of CSS rollovers, it is working in Firefox just fine, but in Internet Explorer it is very jumbled and horrible looking. Am I making sense? Please take a look at the link to the page in both Firefox and IE, and I have attached the CSS code:

      http://www.pizzabellaportland.com/menu.html
        • 1. Re: CSS Rollover Buttons
          visualeye
          Hi, by looking at the navigation structure of your page they are seem to be ok, but I do have notice quite a few things that I thinks contribute to your navigation issue with IE.

          First things first.
          1. When creating a navigation menu either a horizontal or vertical with an image background it is best to use a <ul> structure list tag, this <ul> <li> list is very straight forward list and it is ideal to menu. <dl> on the other hand can still be use but it has limitation and it has a bit different behavior than the <ul>. So I would suggest to change your tag to use <ul> list.
          2. I notice, your navigation class container has a height of 25px which doesn't make sense. You might delete the height.
          3. Your specificity CSS code seems to look ok; but I noticed you have your ID for each (home, about, etc) define twice, why not just define it with the "a' pseudo.
          4. On your .navigation dt a, .sub-navigation dt a, you defined a display: block; which is good but you need to specify a height to be cross browser since IE treat that rules a bit different that Firefox, and Safari. If you specify the height you don't need to use the padding.
          5. for the hover I think is fine, but if you going to specify height with the block you need to specify also how the background image will be position for the hover state of your button. You can try to use the example code below:

          #navigation a.home {width: 204px; height: 33px;background: url(../images/nav_home.gif) no-repeat 0 0;}
          Here, I specify the width and height of my "home" button with the background position 0 0.

          #navigation ul li a:hover, #navigation ul li a#current{display:block; background-position:0 100%;}
          Here, I placed the background-position: 0 horizontal and 100% vertical which push the image for the hover to place up to replace the up state.

          Well, I hope this help you make your navigation to work cross browser and possible eliminate a lot of hack for IE.
          Good Luck!