I'm trying to overlay text on an <input type="text"> (for cross-browser placeholder support). I've found that my positioning is always off by a couple of pixels, because of some kind of padding which can't be removed by setting padding: 0;. The suggestions here and here do not solve the problem.
You can see this padding in the following screenshot from Chrome, as the white space between the blue highlight and the yellow border:
How can I a) remove this space; or b) measure it using Javascript?
If you replace the default borders with your own, the padding goes away (at least for me, on Chrome/Mac):
This is the CSS I used:
input {
padding: 0;
outline: none;
border: 1px solid red;
}
http://jsfiddle.net/NZZ5B/
You need to reset everything. So it is best recommended to use:
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
Hope this helped.
Related
I want to resize the space where the scrollbar moves.
I don't want it to affect how much I can scroll.
Look at the following pictures (my drawings) to better understand what I mean.
I'm using chrome so webkit is viable.
Thanks to all of your answers!
(P.S. I would love to have reduce the image size, yet I don't know how to! My apologies!).
Without nesting another element and play with its height you could simply use a huge border-bottom and place a visible border around the element using the outline property, e.g.
div {
width: 200px;
height: 300px;
outline: 1px #9bc solid;
border-bottom: 50px transparent solid;
}
Codepen demo
Result
You can't change the height of the scrollbar but you can redesign the scrollbar with -webkit-scrollbar like this:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #808080;
}
I'm creating a custom carousel for my current project. Here's a simplified version (only tested in Chrome/Mac):
http://codepen.io/troywarr/pen/LpQzbv
Note that when the carousel scrolls, you can see that each page (1-5) butts up flush against its neighbor on the left and right sides (looking like a single double-thick border). I'd like to add a 5px-wide gutter between the left and right borders of each page so that the borders don't touch.
However, since this is a fluid-width carousel, this has proven to be more difficult than expected.
I need to support IE9+, so I can't rely on calc() values or CSS animations; I'd probably need to do this via jQuery .animate(), but when the horizontal position to which I'm animating is basically 100% + 5px, I can't figure out how to express that in code.
How would I go about that? Is there, perhaps, another clever way to set up the carousel that allows me to use margins, padding, table cell padding, etc. to my benefit? Or, any other ideas? I've played around with different approaches for a couple of hours and I'm running out of ideas.
UPDATE:
Just to clarify what I mean by "gutter" - I'd like there to be a 5px empty gap between the left and right sides of each page in the carousel. Each page should retain its own borders, but there should be empty whitespace between them (only noticeable on scroll). Here's an example that uses calc() and CSS transitions to do exactly what I want (only tested in Chrome):
http://codepen.io/troywarr/pen/GpQYPj
I just need to find a comparable solution that is compatible with IE9+ (which calc() and CSS animations are not).
Applying border-box to everything will allow you to add paddings without breaking the layout.
// See an explanation here:
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
EDIT:
Sorry, you were already doing this. Here is my take on it:
.window {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
// Add these two rules
// The idea is to make a static frame, except for the right column
// which is the one being repainted.
border: 5px solid #666;
border-right: 0;
}
...
.slider li {
float: left;
width: 20%;
height: 100%;
background-color: #ccc;
display: table;
border-right: 5px solid #666; // <- Paint the right column only
}
The grey border shouldn't be visible, it should be covered by the black border and I don't understand why it won't... here's the CSS code:
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
#prof_picture{
width: inherit;
height: inherit;
border: none;
}
HTML (inside a table):
<td id="portrait">
<img id="prof_picture"></img>
</td>
and javascript
$("#prof_picture").attr('src',"profile/loading.gif");
I had to make the DOM inherit part of the attributes because when using that javascript line the image would assume its natural width and height and I wanted it just to fit the portrait. When I did this, the strange border appeared. Do you know why?
Add font-size: 0; to #portrait{}
Try setting your image to become a block element:
#prof_picture { display:block; }
Alternatively you could set it to align to the bottom (will work only if its an inline (or inline-block) element), although i think there may be cases or environments where this could produce unwanted results.
#prof_picture { vertical-align: bottom; }
Images are, by default (unless specified otherwise), inline elements. Most browsers will reserve some extra space here, but you could also counter this by setting the parent's line-height to zero.
#portrait{
line-height: 0;
}
Setting line-height: 0;, font-size: 0; or display: inline; on #profile Fixes it in the fiddle http://jsfiddle.net/CyV7j/6/
There is 4px of extra space added around the img element because of the way inline elements (line an img) are rendered inside of a table row.
Please consider styling with classes instead of ids. And restricting the use of tables to tabular data and not for the layout of photos.
I suggest you get rid of the border: none; by #prof_picture. You can also try to write the border on #portrait li this
border: 1px solid black;
As it is the right way to write a border.
If you are using certain browsers.... you need to set this in the css:
img{
outline:none;
}
I have many boxes with different sizes; the sizes are unknown. I would like to use a CSS specification that does the same as text-align:justify does words. For example:
I would like to have a solution in CSS or CSS3. If not possible, JS is acceptable.
Possible CSS solution
If the boxes are set to display:inline-block, you can apply text-align:justify just like you would with text. Be aware, however, thattext-align:justify doesn't have any effect on the last line of text. So if there's only a single line that needs to be justified, nothing will happen.
One workaround for this, if you can modify the HTML, is to add a trailing element with 100% width, to ensure that the content you want to justify isn't the last line. If you're not able to modify the source HTML, a trailing element can be appended using JavaScript.
Here's a jsfiddle demonstrating this. Tested in IE6/7/8/9, Firefox, Chrome, Safari. (Note: had to add a between the boxes to get it to work in IE6/7).
Here's a little example:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#container {
width: 500px;
margin: 0 auto;
font-size: 0; /* Fixed space caused by line breaks */
}
#container .inner {
display: inline-block;
background: red;
width: 25%;
border: 10px rgba(255,255,255,1) solid;
padding: 5px;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<div id="container">
<div class="inner">Lorem</div>
<div class="inner">Ipsum</div>
<div class="inner">Dolor</div>
<div class="inner">Sit</div>
</div>
</body>
</html>
This is considered slightly cheating. I'm using the white borders as margins between the elements. It would only work well if you had a solid color background on the parent.
Points to note:
box-sizing: border-box on all element, ensures that width: 25% includes padding and borders inside.
Using a white border to simulate the effect of a margin.
Using font-size: 0 on the parent, and font-size: 16px on the children, eliminates the white space caused by line-breaks between inline-block elements.
How do you remove the jagged edges from a wide button in internet explorer? For example:
You can also eliminate Windows XP's styling of buttons (and every other version of Windows) by setting the background-color and/or border-color on your buttons.
Try the following styles:
background-color: black;
color: white;
border-color: red green blue yellow;
You can of course make this much more pleasing to the eyes. But you get my point :)
Stack Overflow uses this approach.
As a workaround, you can remove the blank spaces on each end of the button, which has the effect of decreasing the jagged edges. This is accomplished with the following css and a bit of jQuery:
input.button {
padding: 0 .25em;
width: 0; /* for IE only */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto;
}
$(function(){
$('input[type=button]').addClass('button');
});
The jQuery is for adding the button class. A more in depth write up can be found here.
Setting overflow: visible; on the button will cure the issue in IE 6 and 7.
(See http://jehiah.cz/archive/button-width-in-ie)
Exceptions
In IE 6, if display:block; is also applied to the button, the above fix won't work.
Setting the button to display:inline; in IE 6 will make the fix work.
If you have a button like this within a table cell, then the table cell won't contract to the new, smaller width of the button.
You can fix this in IE 6 by setting width: 0; on the button. However, in IE 7 this will make everything but the text of the button disappear.
(See http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie)
More info on styling buttons:
http://natbat.net/2009/Jun/10/styling-buttons-as-links/
You can change the border style of the button with CSS, like this:
/**************************************************************************
Nav Button format settings
**************************************************************************/
.navButtons
{
font-size: 9px;
font-family: Verdana, sans-serif;
width: 80;
height: 20;
position: relative;
border-style: solid;
border-width: 1;
}
Not too much you can do about it, but the good news is that it is fixed in IE8
http://webbugtrack.blogspot.com/2007/08/bug-101-buttons-render-stretched-and.html