[Solved] cant remove button border on button hover?

[iizag]

Hi on this page : http://iamdentistry.com/category/archive/dentistry/

I have added this css to change the hover of the read more button:

.archive .read-more:hover {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) repeat scroll 0 0 #222 !important;
     color: white !important;
     transition: none !important;
     border: none !important;
}

but even though I have border none when you hover over the button it appears as if the button is getting smaller because a “top-border” seems to disappear? This does not change when I add border none or remove border none ?

[Paulie_D]

All those !important statements worry me.

Good CSS shouldn’t need them.

[__]

All those !important statements worry me.

ditto.

but even though I have border none when you hover over the button it appears as if the button is getting smaller because a “top-border” seems to disappear? This does not change when I add border none or remove border none ?

I really don’t follow your question. The button seems to become smaller on hover, because you’re removing the border. it seems to be doing exactly what you intend, but you’re surprised by the result …?

[Paulie_D]

OK…I don’t think its the border…I suspect it’s the gradient.

[Paulie_D]

OK…nope…I think its an inset box-shadow on hover from here

.button:hover, .flexslider .category-label, .layout-module .widget-title > span, .pagination a:hover, .pagination .current, #primary-navigation .menu li.current-menu-item, #primary-navigation .menu li.current-menu-ancestor, #primary-navigation .menu li.current_page_item, #primary-navigation .menu > li:hover, #primary-navigation .menu > li.sfHover, #primary-navigation .menu ul a:hover, #primary-navigation .menu ul li.current-menu-item a, .review-box .heading, #searchform #searchsubmit:hover, #secondary .widget_fearless_tabs .headings a.active, section.top-reviews .review-column-1 h2, .sidebar-primary .widget-title, .wpcf7-submit:hover {
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 23%, #f4f4f4 66%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(23%,#fefefe), color-stop(66%,#f4f4f4)) !important;
background: -webkit-linear-gradient(top, #fefefe 23%,#f4f4f4 66%) !important;
background: -o-linear-gradient(top, #fefefe 23%,#f4f4f4 66%) !important;
background: -ms-linear-gradient(top, #fefefe 23%,#f4f4f4 66%) !important;
background: linear-gradient(to bottom, #fefefe 23%,#f4f4f4 66%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f4f4f4',GradientType=0 ) !important;
border: 1px solid #E0E0E0 !important;
border-radius: 1px !important;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important; /* this one */
color: #182945 !important;
}

See what I mean about all those !important statements….you really need to comb through your CSS and sort that out.

[iizag]

Yes Paulie , thank you it was the box shadow.

Regarding what you said about !important, your right I need to re-look at my css and see whats necessary. BUT a good amount of them are because without them then my theme default css takes effect and my css does not.

[Paulie_D]

BUT a good amount of them are because without them then my theme default css takes effect and my css does not.

Child theme then…you shouldn’t be overriding styles like that. You should be editing the theme files into your own.

[iizag]

I do use a child theme, are you saying that I should delete my parent theme style sheet so by leaving it blank I can remove all !importants in my child theme ?

[Paulie_D]

No…but if you are over-riding theme styles in your child theme they should just work out of the box without the need for !important

[iizag]

Really? Ill re look over the style sheet in my child theme to check for conflicts but I thought that “sometimes” !important is needed because for one reason or another it did not override the parent theme. But ill double check at some point and let you know here if there was a conflict causing it.

[iizag]

@Paulie_D
On this pages tab navigation bar
http://bitfiu.com/groups/biology-bsc-1010/forum/

I tried applying your same method with :

.forum #object-nav ul li a {
    padding: 14px 16px;
}

.forum #object-nav ul li {
    padding: 0;
}
.forum #tabs-container .tabs-nav li a {
    padding: 18px 35px; 
    transition: all 0.3s ease-in-out 0s;
}

.forum #tabs-container .tabs-nav li {
    padding: 0;
}
.forum #object-nav ul li a:hover {
    border-top: 3px solid #fff ;
}

.forum #object-nav {
      background: none repeat scroll 0 0 #002d62;
     border-top: 4px solid #c5960b;

}

But no matter if I add a z-index I still cant get the white top border on hover to over lap the standard gold top border, rather it just appears under the gold top border which is what I don’t want it to do. How can I get the white border on hover to overlap the gold top border?

[iizag]

wow thank you so much. I cant wait to learn to the point where I can realize these issues without asking. :-)

[jose33]

Hi, I’m having the same issue on my site ikp.depaulidlab.com for my header menu button (Depaul iD Lab- blue button) and this is the CSS code I’m currently using that I know is causing the issue only for the button but not for the rest of the menu tabs when I hover only:

#menu-main > li > a:hover {
border-bottom: none !important;
}

Any advice would be greatly appreciated. Thanks!

[Author]

Posts