CSS

Long Word breaker

for really long words in HTML, there’s a way to break it.
http://www.hedgerwow.com/360/dhtml/css-word-break.html

JavaScript
CSS
layout
FancyStyle

Comments (0)

Permalink

Input Replacement : Replace Defult Input Style with Customized Skin / Text

Let’s fix this and see no more  [BUTTON] tags , [input type=image /] or dirty CSS /HTML / JS for this simple lovely button.
http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php

BTW, what’s the difference between Link and Button?
( one of my interview question for interaction designer)

CSS
UI

Comments (6)

Permalink

Multiple Views Layout : One HTML Structure, Three CSS Views

Are we really ready for this? :-D
http://www.hedgerwow.com/360/dhtml/css-layout-multiple-view/demo.php

CSS
layout
UI

Comments (3)

Permalink

Item List Grid : Real world practice with display:inline block across browsers

one of my co-workers asked the way to deploy grid-like layout for list-item with nice alignment and visual treatment.
Apparently a more flexible design and layout will make this better and old school CSS solution such as “float:left” won’thelp in the case.

I had a very simple prototype on :
http://www.hedgerwow.com/360/dhtml/css-inline-block-layout.php

you may try to adjust the font-size, window-size and see how this fluid layout adjust to your best-view-size and still keeps the UI looks nice and aligned well.

BTW, in case you may not notice the very inconvenient truth. Some might think that block Element s such as DIV does not get display:inline-block on Internet Explorer. This may not be true.

Here’s how do I implement display:inline-block across browsers:
‹style›
div{

width:100px;
height:100px;
background:red;
margin:1px;

display:-moz-inline-stack;/*Firefox need this to simulate display:inline-block*/
display:inline-block; /*IE does not apply this to Block Element, and Firefox does not render this, too*/
_overflow:hidden;/*fix IE6 to expanded content*/
zoom:1;/*trigger hasLayout*/
*display:inline;/*once hasLayout is true, set display:inline to block element will make display:inline behave like display:inline-block*/
}

‹/style›

‹div›1‹/div›
‹div›2‹/div›

CSS
layout
UI

Comments (4)

Permalink

display list item as grid and make vertical-align:middle work

One of the layout which designers love most and developers hate most is something looks like this:
http://www.hedgerwow.com/360/dhtml/css-layout-gridview.html

No time for documentation, just keep it simple for future usage.

CSS
layout

Comments (0)

Permalink

Import Javascript into CSS for IE6

So much love & hate for IE6 :-P

http://www.hedgerwow.com/360/dhtml/ie6-css-hack-import-js.html

JavaScript
CSS Hack
CSS
IE only

Comments (2)

Permalink

Hacking text-overflow for Firefox

yet another way to do the same thing

http://www.hedgerwow.com/360/dhtml/text_overflow/demo3.php

CSS
Firefox Only
FancyStyle
UI
xul

Comments (4)

Permalink

Styling File Inputs with CSS [ , JS]

let me share this. :-)
http://www.hedgerwow.com/360/dhtml/css-form-file-upload.html

CSS
UI

Comments (6)

Permalink

Flex input box layout

Some of my friends may find it hard to develop a flex layout for input box and try to use funky CSS/JS tricks to fix achieve that goal.

Here’s the easy quick solution.
http://www.hedgerwow.com/360/dhtml/css-flex-input-boxes.html

:-D cheers

CSS
UI

Comments (1)

Permalink

Menu Separators 101

Think differently.
http://www.hedgerwow.com/360/dhtml/css-menu-separator.html

CSS Hack
CSS

Comments (1)

Permalink