webiga.com » CSS

IE6 and

admin — Wed, 20 Apr 2011 08:06:43 +0000

IE6 has its own mind when it goes to styling button elements. It applies (seemingly) some padding even if you set it to padding: 0. Found a great article at viget.com that made my day yesterday. The solution to get rid of extra padding in IE6 is rather easy. Just apply these rules to the button:

button { width: auto; overflow: visible; }

Flash appearing above absolutely positioned elements

admin — Tue, 19 Apr 2011 22:28:40 +0000

I recently had an issue with some flash movies appearing above all content pneumonia the page. I tried giving absolutely positioned elements a very high zindex, bit it did not help art all. Search in Google for similar problem revealed that flash can be played in several modes.

By default all movies are played in window mode which allowes them to perform the best but such oddities as flash always on top will be happening.

Fixing my issue was rather easy. I just needed to add a wmode=opaque to the flash object. Job done.

Nice online portfolio of a web studio CODA.CO.ZA

admin — Tue, 23 Sep 2008 13:46:38 +0000

http://coda.co.za

floatutorial

admin — Mon, 03 Sep 2007 07:29:56 +0000

Everything about float CSS property.

http://css.maxdesign.com.au/floatutorial/tutorial0103.htm

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Jump start CSS

admin — Sat, 07 Jul 2007 15:31:24 +0000

Accurate master style resetting will save you tonns of time. Here is a CSS correctly reset. Courtesy of crucialwebhost.com

/***** Global Settings *****/

html, body {
    border:0;
    margin:0;
    padding:0;
}

body {
    font:100%/1.25 arial, helvetica, sans-serif;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
    font-weight:normal;
}

h1 {
    padding:30px 0 25px 0;
    letter-spacing:-1px;
    font:2em arial, helvetica, sans-serif;
}

h2 {
    padding:20px 0;
    letter-spacing:-1px;
    font:1.5em arial, helvetica, sans-serif;
}

h3 {
    font:1em arial, helvetica, sans-serif;
    font-weight:bold;
}

p, ul, ol {
    margin:0;
    padding:0 0 18px 0;
}

ul, ol {
    list-style:none;
    padding:0 0 18px 40px;
}

blockquote {
    margin:22px 40px;
    padding:0;
}

small {
    font-size:0.85em;
}

img {
    border:0;
}

sup {
    position:relative;
    bottom:0.3em;
    vertical-align:baseline;
}

sub {
    position:relative;
    bottom:-0.2em;
    vertical-align:baseline;
}

acronym, abbr {
    cursor:help;
    letter-spacing:1px;
    border-bottom:1px dashed;
}

/***** Links *****/

a, a:visited {
    text-decoration:none;
}

/***** Forms *****/

form {
    margin:0;
    padding:0;
    display:inline;
}

input, select, textarea {
    font:1em arial, helvetica, sans-serif;
}

textarea {
    line-height:1.25;
}

label {
    cursor:pointer;
}

/***** Tables *****/

table {
    border:0;
    margin:0 0 18px 0;
    padding:0;
}

table tr td {
    padding:2px;
}

/***** Wrapper *****/

#wrap {
    width:960px;
    margin:0 auto;
}

/***** Global Classes *****/

.clear         { clear:both; }

.float-left    { float:left; }
.float-right   { float:right; }

.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify { text-align:justify; }

.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }

.wrap          { width:960px;margin:0 auto; }

.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }

.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }

Rounded Corners

admin — Wed, 09 May 2007 13:23:11 +0000

Here are a few great concepts of creating boxes with rounded corners with CSS only:

Pure CSS:

Other Solutions:

CSS FAQ

admin — Mon, 25 Sep 2006 23:18:53 +0000

Found a great resource that explains CSS in easy to understand way. Explanations of different CSS aspects are short but complete. Good resource for beginners who want to get solid CSS foundation.
http://www.hwg.org/resources/faqs/cssFAQ.html#cascade

Image Flicker Problem

admin — Thu, 07 Sep 2006 11:19:29 +0000

IE has an interesting bug, which causes images to reload from server each time a mouseover event is triggered. There are several clientside ways around this problem they are described here: http://www.fivesevensix.com/studies/ie6flicker/

But the real working solution is to change .htaccess on the webserver. Here is what needs to be done: http://dean.edwards.name/my/flicker.html