CODEWITHSUNDEEP
cssruby-on-railssass
ruby_object
ruby_object

Reputation: 1266

Weird CSS mangling - Unexpected border-bottom value in a:hover

SASS inserts unexpected CSS on production server and messes up my a:hover

This is fragment of my application.css:

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px; }

a {
    color: #000000;
}
a:visited {
    color: #666666;
}
a:hover {
    border-bottom: none;
}

div {
  &.field, &.actions {
    margin-bottom: 10px; } }

however on production server firefox reports following css:

pre {
    background-color: #EEEEEE;
    font-size: 11px;
    padding: 10px;
}
a {
    color: #000000;
}
a:visited {
    color: #666666;
}
a:hover {
    border-bottom: 1px solid #777777;
}
div.field, div.actions {
    margin-bottom: 10px;
}

on my development machine firefox shows following CSS:

a:hover {
    border-bottom: medium none;
}

I use Rails 3.2.13 and I have never seen problem like this. I have wasted whole afternoon trying to find a solution. This problem breaks my home page and makes it look very unprofessional.

Upvotes: 0

Views: 938

Answers (1)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23883

First, border-bottom is a shorthand property. It combines border-bottom-width, border-bottom-color and border-bottom-style. The values of those properties can appear in any order. Any of them can be omitted.

none is a value from border-bottom-style.

Second, what Firefox shows in its inspection feature, is not exaclty your CSS. It shows what it treats the CSS like. border-bottom: medium none; means that you changed the style of border to none, while the width remains as medium (apparently, it was inherited).

To see the actual CSS, open the actual CSS file and look inside. It will also let you view media query wrappers.

Third, to remove bottom border, use border-bottom: 0;. That will be treated as border-bottom-width: 0;, which effectively removes the border.

Upvotes: 5

Related Questions