July 2010
M T W T F S S
« Jun    
 1234
567891011
12131415161718
19202122232425
262728293031  

Firebug on google chrome

+

Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome

ref: http://getfirebug.com/releases/lite/chrome/

Centering: Auto-width Margins

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}

css

root reference:
runat=”server” use ~/
html use ./

Most used CSS tricks

http://stylizedweb.com/2008/03/12/most-used-css-tricks/

css technic

http://veerle.duoh.com/

http://www.noupe.com/

http://prototype-window.xilinus.com/samples.html

http://www.swfir.com/

simple modal

http://www.ericmmartin.com/simplemodal/ 

Style Your Image Links

Mouse over behaviors have a certain significance when we’re talking about usability. Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse over effect. Those “clickable” sections certainly include content images. But what can you do with image mouseovers? Add a different border? [...]

Solve problem Div Height for difference Browser (ie 6, ie 7, firefox and other)

<body style=”height: 100%; width: 100%; padding: 0px; margin: 0px;”>

IE.

HTML page:

<head>
<title>my css hacked page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”iehacks.css”>
<![endif]–>
<body>
  <div class=”watermark”>….</div>…

styles.css

/* styles for all browsers excluding IE7. Things not for IE7 will be left out with !important */
body {
    background-color: black;
    background-image: url(’images/gradient.jpg’);

    background-position: left top;
    background-repeat: repeat-x;
}   /* black background with gradient on top. */

div.watermark {
    [...]

Setting div height=100%

body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
#header {
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
position:absolute;
left:0;
top:80px;
padding:0;
width:200px;
height:60%; /* works only if parent container is assigned a height value */
color:#333;
background:#eaeaea;
border:1px solid #333;
}

Rounded corner CSS+JS and more

xmlHttp —————–

http://www.ajaxian.com/ 

Even More Rounded Corners With CSS

http://www.schillmania.com/projects/dialog2/

SoundManager 2
Javascript Sound for the Web

http://www.schillmania.com/projects/soundmanager2/

http://www.scottschiller.com/

http://www.schillmania.com/?theme=2005

http://spiffybox.com/

http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/

http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/

http://www.schillmania.com/content/opinion/2005/10/dont-believe-the-web-20-hype/