IE6 and 7 whitespace bug
IE 6 and IE7 often display whitespace underneath images and <li> tags (when all other browsers do not) . The best way to solve this is to add either or both of the css rules:
display:inline-block;
display:block;
The alternative method is to remove all space between tags within your html document, however this makes the mark-up hard to read and edit!
Removing scrollbars from IE7 textarea
If you view a textarea in Internet Explorer 7 is often has ‘greyed-out’ scrollbars even when no content has been entered. To remove simply add the following to the stylesheet.
overflow:auto;
Positioning a background image at the foot of the page
If you need to position a background image at the foot of a page you will realise its pretty tricky to align it right at the bottom.
Add the following to your stylesheet and hey presto!
html {
min-height: 100%;
height: auto;
}
Missing image problem
I have often come across the problem of a missing image when developing a site.
The solution is simple.
<img src=”image.gif” width=”100″ height=”100″ onerror=”this.src=’error.gif’;”>
If the correct image doesn’t exist the image named error.gif will be used instead.
Credit goes to Rob Gonda for this tip.
CSS font shorthand
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: Helvetica, sans-serif;
/* Combined into one shorthand rule */
font: italic small-caps bold 1em/140% Helvetica, sans-serif;First Flex application
My first Flex application following a tutorial on the adobe site.
http://development.flamingsquirrel.co.uk/flex/FlickRIA.html
ASCII Entities with Entity Names
ASCII Entities with Entity Names
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| " | quotation mark | " | " |
| ‘ | apostrophe | ' (does not work in IE) | ' |
| & | ampersand | & | & |
| < | less-than | < | < |
| > | greater-than | > | > |
ISO 8859-1 Symbol Entities
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking space | |   | |
| ¡ | inverted exclamation mark | ¡ | ¡ |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¤ | currency | ¤ | ¤ |
| ¥ | yen | ¥ | ¥ |
| ¦ | broken vertical bar | ¦ | ¦ |
| § | section | § | § |
| ¨ | spacing diaeresis | ¨ | ¨ |
| © | copyright | © | © |
| ª | feminine ordinal indicator | ª | ª |
| « | angle quotation mark (left) | « | « |
| ¬ | negation | ¬ | ¬ |
| | soft hyphen | ­ | ­ |
| ® | registered trademark | ® | ® |
| ¯ | spacing macron | ¯ | ¯ |
| ° | degree | ° | ° |
| ± | plus-or-minus | ± | ± |
| ² | superscript 2 | ² | ² |
| ³ | superscript 3 | ³ | ³ |
| ´ | spacing acute | ´ | ´ |
| µ | micro | µ | µ |
| ¶ | paragraph | ¶ | ¶ |
| · | middle dot | · | · |
| ¸ | spacing cedilla | ¸ | ¸ |
| ¹ | superscript 1 | ¹ | ¹ |
| º | masculine ordinal indicator | º | º |
| » | angle quotation mark (right) | » | » |
| ¼ | fraction 1/4 | ¼ | ¼ |
| ½ | fraction 1/2 | ½ | ½ |
| ¾ | fraction 3/4 | ¾ | ¾ |
| ¿ | inverted question mark | ¿ | ¿ |
| × | multiplication | × | × |
| ÷ | division | ÷ | ÷ |
ISO 8859-1 Character Entities
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| À | capital a, grave accent | À | À |
| Á | capital a, acute accent | Á | Á |
| Â | capital a, circumflex accent | Â | Â |
| Ã | capital a, tilde | Ã | Ã |
| Ä | capital a, umlaut mark | Ä | Ä |
| Å | capital a, ring | Å | Å |
| Æ | capital ae | Æ | Æ |
| Ç | capital c, cedilla | Ç | Ç |
| È | capital e, grave accent | È | È |
| É | capital e, acute accent | É | É |
| Ê | capital e, circumflex accent | Ê | Ê |
| Ë | capital e, umlaut mark | Ë | Ë |
| Ì | capital i, grave accent | Ì | Ì |
| Í | capital i, acute accent | Í | Í |
| Î | capital i, circumflex accent | Î | Î |
| Ï | capital i, umlaut mark | Ï | Ï |
| Ð | capital eth, Icelandic | Ð | Ð |
| Ñ | capital n, tilde | Ñ | Ñ |
| Ò | capital o, grave accent | Ò | Ò |
| Ó | capital o, acute accent | Ó | Ó |
| Ô | capital o, circumflex accent | Ô | Ô |
| Õ | capital o, tilde | Õ | Õ |
| Ö | capital o, umlaut mark | Ö | Ö |
| Ø | capital o, slash | Ø | Ø |
| Ù | capital u, grave accent | Ù | Ù |
| Ú | capital u, acute accent | Ú | Ú |
| Û | capital u, circumflex accent | Û | Û |
| Ü | capital u, umlaut mark | Ü | Ü |
| Ý | capital y, acute accent | Ý | Ý |
| Þ | capital THORN, Icelandic | Þ | Þ |
| ß | small sharp s, German | ß | ß |
| à | small a, grave accent | à | à |
| á | small a, acute accent | á | á |
| â | small a, circumflex accent | â | â |
| ã | small a, tilde | ã | ã |
| ä | small a, umlaut mark | ä | ä |
| å | small a, ring | å | å |
| æ | small ae | æ | æ |
| ç | small c, cedilla | ç | ç |
| è | small e, grave accent | è | è |
| é | small e, acute accent | é | é |
| ê | small e, circumflex accent | ê | ê |
| ë | small e, umlaut mark | ë | ë |
| ì | small i, grave accent | ì | ì |
| í | small i, acute accent | í | í |
| î | small i, circumflex accent | î | î |
| ï | small i, umlaut mark | ï | ï |
| ð | small eth, Icelandic | ð | ð |
| ñ | small n, tilde | ñ | ñ |
| ò | small o, grave accent | ò | ò |
| ó | small o, acute accent | ó | ó |
| ô | small o, circumflex accent | ô | ô |
| õ | small o, tilde | õ | õ |
| ö | small o, umlaut mark | ö | ö |
| ø | small o, slash | ø | ø |
| ù | small u, grave accent | ù | ù |
| ú | small u, acute accent | ú | ú |
| û | small u, circumflex accent | û | û |
| ü | small u, umlaut mark | ü | ü |
| ý | small y, acute accent | ý | ý |
| þ | small thorn, Icelandic | þ | þ |
| ÿ | small y, umlaut mark | ÿ | ÿ |
jQuery fading images
A nice way to fade in and out of images
include
<script type=”text/javascript” src=”js/jquery-1.2.1.min.js”></script>
<script type=”text/javascript” src=”js/common.js”></script>
<script type=”text/javascript” src=”js/jquery.slideshow.js”></script>
javascript for common.js
// Animate homepage banner…
var obj = $(’#slideshow’);
// check object exists…
if (obj.length>0) {
// remove the hideslide class as javascript is enabled…
$(’#slideshow img.hideslide’).each(function(i){
$(this).removeClass(”hideslide”);
});
$(obj).slideshow({
timeout: 5000,
type: ’sequence’
});
}
CSS
#slideshow{
margin:0;
padding:0;
height:161px;
}
#slideshow img {
position: relative;
left: 0;
top: 0;
width: 900px;
height: 161px;
}
XHTML
<div id=”slideshow”>
<img src=”images.jpg” alt=”slide 1″ />
<img src=”images.jpg” alt=”slide 2″ width=”900″ height=”161″ class=”hideslide” />
<img src=”images.jpg” alt=”slide 3″ width=”900″ height=”161″ class=”hideslide” />
<img src=”images.jpg” alt=”slide 4″ width=”900″ height=”161″ class=”hideslide” />
</div>
Lining up labels with radio/checkboxes
I used to battle with trying to line up labels horizontally with radio or checkboxes…. it never looked the same in all browsers.
Solution:
HTML:
<ul class=”form-check”>
<li><input name=”radio” type=”radio” value=”yes” /><label>Yes</label></li>
<li><input name=”radio” type=”radio” value=”no” /><label>No</label></li>
</ul>
CSS:
ul.form-check{
padding: 0;
margin: 0;
}
ul.form-check li{
display: block;
list-style: none;
clear: both;
float: none;
height: auto;
overflow: auto;
background:#f2ffe4;
}
ul.form-check li input{
display: block;
float: left;
}
ul.form-check li label{
display: block;
margin-left: 0.4em;
margin-top: 0.1em;
float: left;
clear: right;
font-size:0.9em;
}
If you would like the list inline:
<ul class=”form-check-inline”>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 1</label></li>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 2</label></li>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 3</label></li>
</ul>
ul.form-check-inline{
padding: 0;
margin: 0;
}
ul.form-check-inline li{
display: inline;
list-style: none;
float: none;
height: auto;
overflow: auto;
background:pink;
}
ul.form-check-inline li input{
display: block;
float: left;
}
ul.form-check-inline li label{
display: block;
margin:1px 10px 0 0;
float: left;
clear: right;
font-size:0.9em;
}
Styling an hr
I have always had problems with the <hr/> and getting it to look equally spacedbut this seems to work well across all browsers.
hr{
color:#76a2d7;
background-color:#76a2d7;
height:1px;
border:none;
margin:0 0 10px 0;
}