Here is a funny problem that I encountered.
I am using Asp.net MVC WebGrid in my project. I am trying to apply some CSS to it.
So changed the code to
#grid.GetHtml(footerStyle: "pagination")
Now, the pagination class has some code like this
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #F2F2F2;
}
So now, when I run this file and hover over the page numbers, the panel containing the table starts expanding! One row at a time!
I know I can't manage to get this kind of effect with just CSS if I tried. :p But I am getting it by accident! And it goes away only if I remove both the border and the background-color attributes.
I am just curious to know how is this happening??! Anyone has any idea?
Borders add to the size of some elements. For example, consider you have a div with a height of 800px and a width of 400px. If you add a border of 5px to that div like so:
div.class {
border: 5px solid black;
}
Then you'll notice that the box expands by 5px in every direction; resulting in the box being 810px by 410px.
This can be avoided by using something like this:
div.class {
border: 5px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
This should solve your problem... hopefully!
Related
I am working on a website where a user can select an icon and send it as a request to one of my bots.
I've already got it sorted out. I'm mainly just working on improving the aesthetics.
What I want to happen is, when hovering over an icon (or even selecting it), it shows a light blue background colour to indicate that it's been selected, because right now there is nothing to indicate a chosen icon except for the div at the very top (which isn't always in sight when you scroll further down).
The code I have atm is:
.flair:hover, .selected{
background-color: #3498db;
border-radius: 2px;
}
I've tried adding some padding but since each image is in a spritesheet, it will overlap with other images.
I've also tried using a border instead to emulate the same effect, but hovering over an image would slightly move the other images due to the border being applied and it gets annoying.
Is there some way I can get my background-color to 'overflow' behind the images?
How about you add a transparent border add the begining as a placeholder and change your margins since borders gonna add some space
.flair {
border: 2px solid transparent;
background-clip : padding-box;
margin-right:6px;
margin-top:6px;
}
and then you color it with some additional glow when hovering
.flair:hover {
box-shadow: 0 0 10px #3498db;
border: 2px solid #3498db;
}
Please try this :
.flair:hover, .selected {
border: 1px solid #3498db;
border-radius: 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
I'm trying to remove the pesky border around a single search box, not all text/input fields.
I believe this to be the culprit -
input[type=text],
input[type=email],
input[type=password],
textarea {
background:none;
border: 1px solid #ddd;
padding:14px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
To remedy, I've tried (to no avail)-
#searchform #s {
border: none !important;
}
Is there is better (ie - working) way to achieve this effect? I want to keep the border on all other text/input fields, only removing on the single search field..
Live site.
You don't need to use !important in this case. Even more, there's probably no need to use #searchform #s because the #s selector itself has a higher specificity than the input[type=text].
Hence, the following could be sufficient:
#s { border: 0; }
if you have the search input field in some context that other inputs are not in, you could target that.
Example: if its inside a <header> you could do this:
header #searchform #s {
border: none;
}
but mabye show us your html and divs around your input field :)
i was forced to migrate from a theme and want to make the new one look similar. i couldnt find anything on google, so i thought if i ask here perhaps in will help me and others in the future.
for example, a box around all blog posts and widgets on the front page.
i tried this
`{ -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }`
but in all honesty i dont even know what it does. it was just the only answer on google that looked similar - and it didnt do anything to my site.
thanks very much Nico. if anyone has the exact same problem, adding this code into the child theme worked for me:
article {
border: 1px solid #d4d4d4;
}
.widget-container {
border: 1px solid #d4d4d4;
}
Like your tags show, you know, that you are working with CSS there.
This line of css is switching your page elements to border-box (which is a good thing). This will add the padding and border to element's width (http://css-tricks.com/box-sizing/)
If you want to add a border to certain elements, you should know how to identify these elements. You will find class attributes in the HTML of your blog (for example <div class="posting"> ... </div>.
You could know add this css, to add a red border to all divs withclass="posting"
.posting
{
border: 1px solid red;
}
Or if you dare, you could add a border to everything.. But i don't think you really want that
*
{
border: 1px solid red;
}
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.