CODEWITHSUNDEEP
cssgoogle-chromefirefoxcross-browser
cjmbrands
cjmbrands

Reputation: 113

Why is my a:hover css working differently in Firefox?

I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)

Here's my site: http://library.skybundle.com/

Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...

Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.

Please help. Thanks!

EDIT :

Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?

http://jsfiddle.net/S4st8/

HTML:

<div id="navigation">
  <div id="navigation-inner">
    <div id="page-nav">
      <div id="primary-nav">
        <ul id="top-menu">
          <li id="li-left"><a href="#">Product Training Videos</a></li>
          <li id="li-right"><a href="#">Educational Courses</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS:

#navigation {
  background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 100%;
}

#navigation-inner {
  margin: 0px auto;
  padding: 0px;
  height: 48px;
  width: 960px;
}

#page-nav {
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 960px;
}

div#primary-nav {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}

ul#top-menu {
  margin: -5px 0.325em 0 0.325em;
  position: absolute;
  padding: 0;
  z-index: 100;
  top: 0;
  left: 3em;
  width: 367px;
}

ul#top-menu li {
  line-height: 3em;
  list-style-type: none;
  height: 49px;
  background-color: #2C2C2C;
  float: left;
}

li#li-right {
  list-style-position: inside;
  border-left: 2px solid #5E5E5E;
}

ul#top-menu li a {
  font-weight: bold;
  font-size: 11pt;
  text-decoration: none;
  padding: 15px 10px 16px 10px;
  color: #ffffff;
}

ul#top-menu li a:hover {
  text-decoration: none;
  width: auto;
  color: #ffffff;
  background-color: #505354;
  padding: 15px 10px 17px 10px;
}

Upvotes: 1

Views: 6110

Answers (3)

Milche Patern
Milche Patern

Reputation: 20492

The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)

FF :

  • list-style-image none
  • list-style-position outside
  • list-style-type disc

GooChrome :

  • list-style-image: none;
  • list-style-position: inside;
  • list-style-type: none;

User JasonSperske gave you a fixing solution, i invite you to RESET your css.

PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/

Reading and understanding those pages will give you few reputations points

Upvotes: 1

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

its because a tags (anchor tags) have a default display property of inline

due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;

the display block allows the anchor tag to fill the whole space of the LI tag

change ul#top-menu li a to this:

ul#top-menu li a{
    color: #FFFFFF;        
    font-size: 11pt;
    font-weight: bold;

    display: block; /* add this */
    padding: 0 10px; /* add this */
}

the CSS Box Model adds the content + padding + border + margin

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

Upvotes: 5

Jason Sperske
Jason Sperske

Reputation: 30446

Take a look at this CSS rule:

li#li-right {
  border-left: 2px solid #5E5E5E;
  list-style-position: inside;
}

Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.

Upvotes: 1

Related Questions