This code allows to cycle through background images:
<div id="myPic" style="background:url(/images/myImage_<?php echo rand(1, 10); ?>.jpg);"> </div>
PHP random image
Controlling element overflow
The following statement is used to control Horizontal or Vertical overflow of any HTML element:
* {
overflow-x:hidden;
overflow-y:auto;
}
Addressing browsers margin and padding descrepencies
Setting everything to 0 in the beginning of the CSS document is usually helpful in preventing browsers margin and padding discrepancies. Setting list style and image border declarations to none can also help to avoid browsers misalignment.
* {
padding: 0;
margin: 0;
list-style:none;
border: 0
}
IE bug – conent disappearing on document scroll
This hack takes care of the annoying IE bug when the page content disappears on up and down document scroll:
whatever {
display: inline-block;
}
Addressing different browsers
These hacks allow to address a particular browser:
.TagIDorClass {
*padding-left: 2px;
/* using * before style property declaration addresses all IE browsers */
}
.TagIDorClass {
_padding-left: 2px;
/* using _ before style property declaration addresses IE6 browser */
}
body:first-of-type .TagIDorClass {
padding-left:2px;
/* using body:first-of-type before style declaration addresses Safari */
}
body:nth-of-type(1) .TagIDorClass {
padding-left:2px;
/* using body:nth-of-type(1) before style declaration addresses Chrome */
}
IE6 bug – extra space at the bottom
Fixes IE6 extra space an the bottom of an element:
* {
overflow: hidden;
}
Firefox background placement
Firefox fix for placing background image at the very bottom of the page:
html {
min-height: 100%;
height: auto;
}
body {
background:url(bg.jpg) no-repeat center bottom;
}