Develop Reference

How to create gutters between pages in a fluid-width carousel?

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
}

javascript to detect a browser and use a certain style sheet

There is a a single element of a web page that I absolutely MUST have sit in a precise location on the page, and there seems to be a 14px height differential between Chrome and FF which won't allow me to situate the graphic uniformly between the two. I used a conditional statement for IE9 and IE8, but now the problem exists with Chrome and FF.
I don't have access to the main head section or main global CSS for this site, unfortunately, and there is not a global reset of 0 on the margins. Even if it were possible for me to do so, there have been so many hacks and fixes, that it would be counter-productive to do a global reset.
So after messing around with musical chairs of this object, I think my final solution (although not very elegant to do for just ONE graphic) is to write a style sheet for the margin-top of this image (actually a div with an image background), and have javascript detect the browser and feed the style-sheet accordingly (i.e. - if it is FF then render this CSS, or if it is Chrome then render this CSS).
Unfortunately I cannot show the page, but my CSS for the element is:
#telescope {
background: url("my-image.png") no-repeat scroll 0 0 transparent;
height: 102px;
position: absolute;
right: -48px;
margin-top: 748px;
width: 98px;
z-index: 1;
}

Try putting this at the top of your css:
* {
margin: 0;
padding: 0;
font-family: "Open Sans", 'Consolas', sans-serif;
}
html, body {height: 100%;}

non-native scrolling

Is there a library that can help to make a scrolling bar, which scrolls for a div in HTML?
Let's say there's a div that's 200 X 200, but everything inside this div is actually 200 * 1000, so you have to scroll down to see everything.

You can use Tiny Scrollbar, which is based on JQuery.

You should use
overflow: auto;
for automatic scrollbar insertion, and
overflow: scroll;
to make it appears.
*You tagged CSS.
ADDED
You can use CSS3 to style your scrollbars: (Even Google is using them, just take a look in the console.)
http://css-tricks.com/custom-scrollbars-in-webkit/
http://www.webkit.org/blog/363/styling-scrollbars/
Note: IE does not support CSS3 (as always), so you'll have to use the good old IE-specific way to style them.
Currently Webkit browsers will support it: (like Chrome and Safari)
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: gray;
}
TEST IT OUT HERE.
However, this won't work in Firefox, because they think users hate those fancy scrollbars. So if you really really want to change it, you might try jScrollPane, which is a jQuery plugin and is easy to use. IMO, CSS is way better than a plugin, since it contains fewer characters to download.

Let's say you want to place the scrolling bar on the following div:
<div class="myscrolling" >blah blah...</div>
The CSS:
div.myscrolling{
height:200px;
width:200px;
overflow:auto;
}

Moving label looks good in Firefox - not so good in other browsers How to change?

I wrote a small script to let a label move out of the way everytime the corresponding input field is needed.
Please check it out here: http://jsfiddle.net/5nZWJ/68/
The problem is: it works just as expected in Firefox, but all other browsers I tried (Chromium, Internet Explorer and others) don't keep the bottom-border justified (hard to explain but you will see it if you try it out).
What do I have to change to make this thing in all browsers look like in Firefox?
Thank you in advance!

I have solved your problem. It is now smooth in all browsers: http://jsfiddle.net/5nZWJ/70/
The key is having #formWrapper positioned absolutely from the bottom. This means when the height is increased it expands from the bottom up and doesn't need to recalculate the position from the top.
CSS:
#wrapper {
background-color: lightblue;
height: 110px;
width: 500px;
position:relative; /* Allows absolute figures to be predictable */
}
#formWrapper {
background-color: yellow;
border-bottom: 4px solid red;
bottom: 29px; /* Changed from top and new measurement added */
left: 120px;
height: 57px;
position: absolute;
z-index: 1;
width: 108px;
}
JavaScript:
I removed all lines of code referring to the position, as it no longer needs to be changed or recalculated.

I think this might be related how different browsers count border pixels
http://ejohn.org/blog/sub-pixel-problems-in-css/
(not actually the same problem, but you get some idea)
Instead of using border, I recommend you add a div wrapper around the element, with the background color set to border color and padding set to the border width.

Jagged Button edges in Internet Explorer

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