I have a table where I set a kind of button on mouseover the cell. Then problem is that when I move between columns, we can see the current column a little more wide than others. Difficult to explain.
Here is a little video of demonstration: http://screencast.com/t/WbHIlSHim
How can we avoid it?
Here is my css
#MatrixTable td
{
padding: 0px;
height: 30px;
text-align: center;
vertical-align: middle;
}
#MatrixTable:hover
{
cursor: default;
}
#MatrixTable td a:hover
{
cursor: none;
}
#MatrixTable td:first-child
{
padding-left: 5px;
text-align:left;
}
#MatrixTable td a
{
padding: 8px 10px;
cursor: default;
}
Thanks.
UPDATE
Here is a jsfiddle: http://jsfiddle.net/Q35f7/
Well, most generally it's because the CSS changed when you added the new class, adding a whole lot of other stuff. The offending changes that created the size change were padding, border and a few others, which will always alter the size of the object.
For example, if you added .class:hover{border: 500px solid #000;} on mousover, that element would get a heck of a lot bigger when you hovered over it. A similar effect would happen if you did .class:hover{padding:9999px;}. See what I'm getting at here?
I've edited it for you removing the style rules that would create the "annoying" size change:
http://jsfiddle.net/Q35f7/1/
Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
I have a context specific class that I want to certain headings on the site and I'm using the following code to apply a 2px full width line under a heading:-
.headingCustom2 {
color:black;
text-align: center;
padding-top: 50px;
border-bottom: 2px solid #000;
padding-bottom: 3px;
}
I want to add 20px padding beneath the underline so there's space between it and the div below. It needs to be independent of padding:bottom. My searching has only returned results on padding-bottom which alters the distance between the heading and the underline. Wanted to keep it to a distinct class as there's a lot of headings across the site it will need to be applied to. The heading font, Heading 5 is also used in other non-underlined contexts. Anyway, I hope this question isn't too tiresome.
You can try to use ::after
.headingCustom2::after {
content: '';
display: block;
height: 20px;
}
EDIT: Link to reproduction on codepen
https://codepen.io/bedelman851/pen/oyWpGq
I have a ul to which I am applying columns: 3 to. Each li has an input/custom label. The custom label has the following relevant css.
input[type="checkbox"] + label:before {
content: '';
display: block !important; //ie fix
width: 16px;
height: 16px;
border: 1px solid $dark-button;
border-radius: 2px;
position: absolute;
background-color: $white;
left: 0;
top: 5px;
}
The height 16px is still being applied to the element, but is actually getting rendered as over 18px when I inspect the element. All others are exactly 16px. This only seems to happen at the top of the last column.
It doesn't always happen as you'll see in this picture.
But I have noticed that the last column in the second picture sometimes does appear this way. If I go in to the inspector and click on the height to disable it and then reenable it, it renders perfectly. Have tried adding !important (god help us) to the height, and adding a min-height. Thoughts?
This was an actual firefox bug that has now been resolved a year later. https://bugzilla.mozilla.org/show_bug.cgi?id=1468654
I want to change the color of the text (link) in a box. This is the CSS code I'm using:
.boxed-1 {
background-color: #e8ecf4;
border: 1px solid grey;
padding: 15px;
margin-top: 1px;
margin-bottom: 10px;
margin-right: 25px;
margin-left: 0px;
}
When I call for div class boxed-1, all the text displays blue. How can I change it?
I've tried a bunch of different suggestions from my google search to no avail.
My site is: http://mikediane.com
Links are set to the color blue by the browser, thus they do not inherit from their parent like most other elements do.
You will need to apply a color: #?????? to the a itself, like this:
.boxed-1 a {
color: #??????;
}
See this JSFiddle for a demonstration.
Typically if you want to set the text in an element just apply the CSS style color.
In your case,
.boxed-1 {
color: /*Whatever color you want*/
}
The problem is that your anchor tag's color is being applied to the text. If you create a rule like
.boxed-1 a { color: #hexcode; }
I'd expect this to work.
In order to make all my links looks like buttons, I've done that in my CSS:
a {
color: #06A;
text-decoration: underline;
margin: 10px 20px;
padding: 10px 20px;
/*background-color: #EEE;*/
border: #BBB solid 1px;
}
They look fine, however, they seem to mix-up, that is they are being positioned as if they had no padding or margins.
Take a look here, if you still don't see my point: http://picasaweb.google.com/lh/photo/1yjC0oyQUbBlo_2D4RqjLZsCgnyUSAKTKup5o2EMfkM?feat=directlink
<a> is by nature and definition an inline element, meaning that it can't be given widths, height, paddings or margins (along with a few other styles).
To change that, simply add display: block; which will turn it into a block level element enabling paddings, margins etc.
If you want something that will stay in the flow but be able to accept these styles, use display: inline-block;. This also applies to other inline elements like <span>.
The easiest solution is to set the line-height correctly (without changing display).
Use "display: block" to make padding and margin have a effect.
Try styling your links with display: inline-block;.
You may want to consider using the float style:
<a style='float:left' href='#' />
...which will let you do all the fun stuff and "help" position your anchors as a bonus.
(If you want things to stop floating, put clear:both )
#snowflake's question-level comment got me thinking.
It might help you to know that there are those who believe that using a list for this sort of content is better than marking up plain anchor tags (after all, this is a list of genres, is it not?).
The code for this would look a bit like this:
HTML:
<ul class="genrelist">
<li>Fantasy</li>
<li>Children's Literature</li>
<li>Speculative Fiction</li>
<li>Absurdist Fiction</li>
<li>Fiction</li>
<li>Word I can't read</li>
</ul>
CSS:
.genrelist {
list-style-type: none;
overflow: hidden;
}
.genrelist li {
/*background-color: #EEE;*/
border: #BBB solid 1px;
display: inline;
float: left;
margin: 10px 20px;
padding: 10px 20px;
}
.genrelist li a {
color: #06A;
text-decoration: underline;
}
The code above would display like this (full-size image):