I just stumbled upon css specificity, while trying to change the pagination style of my theme.
I'm using twitter-bootstrap as a base-template, but I want to change pagination.
Specifically, I want to remove the pagination border that comes with will-paginate bootstrap :
The will-paginate/bootstrap
.pagination a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD;
border-image: none;
border-style: solid;
border-width: 1px 1px 1px 0;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
I just need this :
.pagination a {
float: left;
line-height: 34px;
padding: 0 14px;
}
The problem is that if i set this in my custom.css.scss file, then bootstrap specificity is higher (check this great explanation on specificity) than mine. I even tried and use !important, but it still did not got my specificity higher.
I have solved this problem by just using the Equal specificity rule - the one that comes last, with equal specificity, is the one that counts, and just put :
.pagination a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD;
border-image: none;
border-style: none;
border-width: 1px 1px 1px 0;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
But this is just trashy css, because i don't need the border at all...
What would you suggest?
Just try border: none; instead of resetting every sub-property.
Also, I just checked Bootstrap's selector for pagination and it's more specific than that:
.pagination ul > li > a, .pagination ul > li > span
Try using that selector instead for your border: none.
Related
I have try rails g kaminari:views bootstrap3 cmd, it generated views, but no CSS. So the result shown in browser isn't good.
How generate and include kaminari's CSS style ?
Bootstrap usually works really well with Rails, but in the case of pagination, the stylings are a little off by default. You can quickly getting them back up-to-snuff with something like this pagination_overrides.scss:
.pagination a, .pagination span.current, .pagination span.gap {
float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none;
background-color: white;
border: 1px solid #DDD;
border-left-width: 0;
}
.pagination {
border-left: 1px solid #ddd;
.first{
padding : 0;
float: none;
border: none;
}
.prev {
padding : 0;
float: none;
border: none;
}
.page{
padding : 0;
float: none;
border: none;
}
.next{
padding : 0;
float: none;
border: none;
}
.last{
padding : 0;
float: none;
border: none;
}
}
I had a similar problem where the pagination css would not display under my namespaced admin area, adding https://github.com/matenia/bootstrap-kaminari-views fixed it for me.
I have a list , then I set its css to :
.dropdown-menu > li {
list-style: none outside none;
height: 22px;
border-bottom: 1px dotted #e1e1e1;
width: 178px;
margin-left: 10px;
}
Then when mouse hover :
.dropdown-menu > li > a:hover{
color: #EC5B00 !important;
z-index: 3;
border-style: solid;
border-color:#dddddd #ffffff #dddddd #dddddd;
border-width: 1px 3px 1px 0px;
width: 183px;
background-color: #ffffff;
margin-left: 1px;
}
Problem :
Even I set the border to solid style, but the dotted still exists, so there're two lines (one is a dotted, and another one is solid). How to omit the dotted one on mouse hover by css?
Any help would be much appreciated, thank you..
Update :
After changing the style by all the answers, then I found one problem, one more dotted border is getting from the other li next to the current hover li, here it is : http://jsfiddle.net/gbw3fj14/
The border-bottom: 1px dotted #e1e1e1; style is set to li, you are changing the a border later, try to change your selector from li > a:hover to li:hover
.dropdown-menu > li {
list-style: none outside none;
height: 22px;
border-bottom: 1px dotted #e1e1e1;
width: 178px;
margin-left: 10px;
}
.dropdown-menu > li:hover {
color: #EC5B00 !important;
z-index: 3;
border-style: solid;
border-color:#dddddd #ffffff #dddddd #dddddd;
border-width: 1px 3px 1px 0px;
width: 183px;
background-color: #ffffff;
margin-left: 1px;
}
jsFiddle Demo.
http://jsfiddle.net/
your wrote wrong
.dropdown-menu > li > a:hover to .dropdown-menu > li:hover
I have lot of, a really really lot of CSS3 files as well as HTML5 ones, that is the reason why I use form of CSS3 in this way:
#wrap #head #strLogo {
height: 50px;
padding: 0 5px;
line-height: 50px;
}
Instead of just selecting it this way:
#strLogo {
height: 50px;
padding: 0 5px;
line-height: 50px;
}
As it is easier later to find that practicular element in HTML5 document.
Now, I have rule, applied to all anchor tags, like:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
But only one, only the anchor tag representing actual logo (textual) should be different.
I know I can write:
#wrap #head #strLogo a {
font-size: 18px;
text-shadow: 2px 2px 2px #666666;
text-decoration: none;
}
#wrap #head #strLogo a:hover {
text-decoration: none;
}
As this link should have same rules on normal and hover state, I managed to write it this way:
#wrap #head #strLogo a, #wrap #head #strLogo a:hover {
font-size: 18px;
text-shadow: 2px 2px 2px #666666;
text-decoration: none;
}
Could it be written even shorter? For example:
#wrap #head #strLogo (a, a:hover) {
font-size: 18px;
text-shadow: 2px 2px 2px #666666;
text-decoration: none;
}
If you are looking for a more sophisticated version of CSS, you should consider
Less (The Dynamic Stylesheet Language)
SASS (Syntactically Awesome Style Sheets)
1: http://i.stenter code
i want to remove left side of user group tab sharp sized border. i want to remove that small gap of white in left side of user group tab
This is the css applied for selected tab.
ul.tabs li.selected a {-moz-border-bottom-colors: none;-moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 white; border-color: #B7B7B7 #B7B7B7 White; border-image: none;
border-style: solid; border-width: 1px; font-weight: bold;
position: relative; top: 0;}
ul.tabs li a {-moz-border-bottom-colors: none; -moz-border-left-colors: none;
-moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #D8DAE2; border-color: #CCCCCC #CCCCCC #B7B7B7; border-image: none;
border-style: solid; border-width: 1px; color: Black; font: 11px verdana,helvetica,sans-serif;enter code here outline: medium none; padding: 5px 16px;
position: relative; text-decoration: none; z-index: 1;}
Make a change to your css:-
ul.tabs li.selected a {
top:1px; //change
}
if you are using jquery ui, the margin right is on the li element, not on a.
So your code should look like:
ul.tabs li { margin-right:0 }
if still not working, add
ul.tabs li { margin-right:0 !Important; }
At this Test Link I seek to install header and main site navigation on to the top of a blog script. The drop down menu has wide gaps appearing between each of the page links! This does not render like this on the main site which has the same code! What is required to close the gaps?
The dropnav styling is like this:
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
you have li padding bottom and li padding top try to removing them (or remove one of them and decrease padding for one of them) and also you have same class dropnav for the div and also the ol try changing one of them to a different class and remove border-style: solid; this should fix your issue.
On line 169 of site_template.css, you have this rule:
li {
padding-bottom: 2px;
padding-top: 2px;
}
You either need to remove this, or override it using something like:
.dropnav li { padding: 0px; }
Remove the padding on li on line 167 of style_template.css