By default all versions of IE have a scrollbar on textareas, even when they are empty.
No other browsers do this, so if you want to remove it so IE can visually match other browsers, just:
textarea { overflow: auto; }The scrollbar will return (rightfully) when the text in the textarea expands beyond it's bounds.
It can sometimes be desirable to remove the top or left margin from the first element in a container. Likewise, the right or bottom margin from the last element in a container. You can do this by manually applying classes to the HTML:
.first { margin-top: 0 !important; margin-left: 0 !important; }
.last { margin-bottom: 0 !important; margin-right: 0 !important; }The "top"/"bottom" zeroing being useful with a vertical stack of elements, "left"/"right" zeroing being useful for horizontal rows (in general). But... this method is dependent on you adding classes to the HTML yourself. Pseudo-selectors can be a better less intrusive way to go:
* > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
* > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }You may want to replace the * with more specific selectors as per your needs.
Lets say you had a floated block of 9 elements, 3 by 3. It's very common that you might need to remove the right margin from the 3rd, 6th, and 9th items. The nth-child pseudo-selector might be able to help there:
* > :nth-child(3n+3) { margin-right: 0; }The equation there, 3n+3, works like this:
(3x0)+3 = 3
(3x1)+3 = 6
(3x2)+3 = 9
etc.
jQuery uses CSS3 selectors, which includes :first-child, :last-child, and :nth-child(). This means that in browsers with don't or don't fully support these selectors, they WILL work in jQuery, so you can substitute the CSS support with JavaScript support. For example:
$("* > :nth-child(3n+3)").css("margin-right", 0);:first-child and :last-child works in the latest release from all major browsers, but not in IE 6. :first-child is supported in IE 7+. :nth-child works in Safari 3+, Firefox 3.5+, and Chrome 1+, but still doesn't work in IE8.
Also see David Oliver's article.
-webkit-tap-highlight-color: rgba(0,0,0,0);And then to allow :active styles to work in your CSS on a page in Mobile Safari:
document.addEventListener("touchstart", function(){}, true);
Dotted borders around links are an accessibility feature most browsers have by default. It's for users who must or choose to navigate by keyboard, there is a visual style applied to those links when "tabbed" to. These borders also show up when the link is clicked (in it's "active" state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:
a:active {
outline: none;
}NOTE: The advantage here is that the :focus style still will use the outlines, meaning that keyboard navigators will still have the focus styling/visual feedback.
Demo:
.field { position:relative; font-family: Arial; text-transform:uppercase; font-weight:bold; display:inline-block; }
label { position:absolute; left:0; top:0; transition: all .2s linear; color:#999; font-size:10px; }
input { margin-top:15px; border:1px solid #999; padding:3px 2px; }
input:invalid + label { top:3px; opacity:0; }
input:valid + label { opacity:1; top:0; }
input:focus { outline:none; }
input:focus + label { color:#33A; }
The code is only a few lines long
<html lang="en">
<head>
<title>Simplest jQuery Slideshow</title>
<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
.fadelinks, .faderandom { position:relative; height:332px; width:500px; }
.fadelinks > *, .faderandom > * { position:absolute; left:0; top:0; display:block; }
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
</head>
<body>
<h1>
Simplest jQuery Slideshow</h1>
Check out the <a href="https://www.blogger.com/archives/javascript/simplest-jquery-slideshow">blog post</a>.
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" />
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" />
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" />
</div>
<h2>
More Simple jQuery Slideshow: Random</h2>
<script>
$(function(){
$('.faderandom > :gt(0)').hide();
setInterval(function(){
var rand = Math.floor(Math.random() * ($('.faderandom').children().length-1));
$('.faderandom > :first-child').appendTo('.faderandom').fadeOut();
$('.faderandom > *').eq(rand).prependTo('.faderandom').fadeIn();
}, 3000);
});
</script>
<div class="faderandom">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<h2>
More Simple jQuery Slideshow: With Links</h2>
<script>
$(function(){
$('.fadelinks > :gt(0)').hide();
setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');}, 3000);
});
</script>
<div class="fadelinks">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<h2>
More Simple jQuery Slideshow: Multiple Slideshows</h2>
<script>
$(function(){
$('.multipleslides').each(function(){
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 3000);
})
});
</script>
<div class="multipleslides">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<div class="multipleslides">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
</body>
HTML:
<input class="button" type="button" value="Go">
.. or ..
<button class="button">Go</button>CSS:
input.button { text-indent: -9000px; text-transform: capitalize; }Negative-indent alone unfortunately doesn't work to remove text from a button element in IE7, but add text-transform: capitalize; and presto!