Asv3's Blog

January 9, 2010

YUI Scrolling DataTable width problem

Filed under: css, front-end, javascript — Tags: , , , , , , , — asv3 @ 6:54 am

I should say, this is weirdest issue I solved lately. We were using YUI Scrolling DataTable to show huge amount of stat information. It’s not the data part that did trouble us, but scroll bars. We started seeing scrollbars every where, even at pages where we had single table with small four columns. Each column was occupied with the space 200% of the given available space. I am sorry that I doubted on YUI ScrollingDataTable widget, but nothing came out after 6 hours of digging logging etc, finally figured out “all is well” with the widget, it’s the problem with the way HTML table rendering inside the widget. Some I got doubt about the CSS associated with the tables, for some reason previous developers assigned

table{
width:100%
}

in CSS. and I made it

table{
width:auto;
}

Guess what? UI Fixed.

Actually this is what happened, all these tables were under floated column divs, with width:100%, tables  occupied space bigger than their containers, since widget tried to size DataTable to actual width of the content and because of CSS property, actual content took more space than needed, we were getting DataTables with huge white space and scrollbars.

Moral of the story is:  If you are using YUI DataTable widget, never use global table selector with width:100%.

Happy Coding.

December 21, 2009

Skinning YUI Data Table

Filed under: css — Tags: , , , , , , , , — asv3 @ 3:54 pm

we do generally think skinning any css thing is very easy, I started skinning YUI data table with the same assumption, but what turned out is my assumption was wrong, it needed bit more that css sense, that is cascading sense. the better understanding of data table. Finally I am done with that, here is the css for skinning your data table to purple color. append it to your skin.css (inside /assets/skin/sam/ folder)

.yui-skin-sam tr.yui-dt-odd {background-color:#f1edff;}
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc{background-color:#e5dbff;}
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc{background-color:#f1edff;}
.yui-skin-sam tr.yui-dt-highlighted{background-color:#c6b2ff;}
.yui-skin-sam tr.yui-dt-highlighted td, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-asc, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-desc{background-color:#c6b2ff;}
.yui-skin-sam tr.yui-dt-selected{background-color:#7c42d9;}
.yui-skin-sam tr.yui-dt-selected td, .yui-skin-sam tr.yui-dt-selected td.yui-dt-asc, .yui-skin-sam tr.yui-dt-selected td.yui-dt-desc {background-color:#7c42d9;}

make sure you won’t mess with the order, order is more important than the content.

check out preview image @ http://www.flickr.com/photos/ananthara/4202372041/

November 23, 2009

Whole New Approach to HTML Editing

Filed under: front-end, general — Tags: , , , , — asv3 @ 2:50 pm

How much time in a day you spend coding html? How many times unmatched div (any for that matter) tags are frustrated you? Here is a quite promising answers to such problems.

Zen-Coding , yeah Zen-coding, smashingmagazine.com’s Sergey Chikuyonok have come up with exiting, yet promising solution for we web-developer’s delight.

You can turn html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

into

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en”> <head> <title></title> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> </head> <body> <div> <div></div> <ul> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> </ul> </div> </body> </html>

with just snap of a shortcut.

Go ahead and explore @ http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/ or http://code.google.com/p/zen-coding/

October 28, 2009

YUI Tab and Flash Graph/Movie

Filed under: css, front-end, javascript — Tags: , , , , , , , , , , , — asv3 @ 5:38 pm

when you use YUI Tab with flash graphs/movie in them, firefox refresh the movie every time you switch away and back to the tab containing flash Graph. if you are using simple graphs it’s not noticeable, but in big movies/graphs it’s irritating. I figured out the basic problem is whenever you change position / overflow values of a div, firefox reloads all flash movies within that div. YUI Tabview have these 2 properties defined for .yui-navset .yui-content .yui-hidden class which get appended to content div when they get hidden.

Fix is to add same properties to visible tab-content div also. This doesn’t make any harm in the way Tab works. Here is the css I did add to fix this issues. But I have not tested this on browsers other than Firefox, try yourself.

.yui-navset .yui-content > div {overflow:hidden;position:static;}
.yui-navset .yui-content .yui-hidden {position:static; }

October 8, 2009

text indent problem in Submit buttons on IE6

Filed under: css — Tags: , , , , — asv3 @ 2:24 pm

People often use Images for buttons in UI for visual feel and capability of pictures/images to convince the message within given space. Say, for example thumbs up and down buttons, to have then lied out in text take minimum 100px (width) each, where as using image buttons we can do that with 16×16 icon, hence we started using images as background for buttons and having same text with CSS text-indent to cover accessibility concerns. But here comes most nightmarish browser for front-enders, IE6, text-indent on submit buttons doesn’t work in IE6, but luckily we don’t have to change our approach or sweat over it, just add font-size:0 and line-height:0 for that button, you will achieve desired look and functionality.so that code look like this.

.image_submit_button{
background: transparent url(image url); width:16px; height:16px; /* background position if you are using sprites */
font-size:0; line-height:0; /* add a ‘*’ before font-size/line-height if you want to hide this from other browsers */
}

October 7, 2009

Wrapping long words using CSS

Filed under: Uncategorized — Tags: , , , — asv3 @ 10:46 pm

one of my colleague came up with this problem, he wanted a long word to be wrapped within given width. overflow hidden was helping us to hide un-wrapped part the big word, finally I figured out using word-wrap:break-word will do the trick. It did work in Firefox and IE6 browsers but not in Opera, so we decided to use overflow:hidden with word-wrap, so that in Opera we hide un-wrapped part of that word, and it wraps neatly in other browsers.

October 6, 2009

CSS1 vs CSS2

Filed under: css — Tags: — asv3 @ 11:19 pm

CSS2 has many  improvements and enhancements over CSS1, here I listed some of them.

Positioning: Even though CSS1 handled some aspects of positioning, CSS2 took it to next level. Relative and absolute positioning determines object’s position depending on parent element or user agent, Fixed position creates watermark kind of effect. Here is list of positioning attributes with values accepted.

Property Description Values CSS
bottom Sets the bottom margin edge for a positioned box auto
length
%
inherit		 2
clip Clips an absolutely positioned element shape
auto
inherit		 2
cursor Specifies the type of cursor to be displayed url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help		 2
left Sets the left margin edge for a positioned box auto
length
%
inherit		 2
overflow Specifies what happens if content overflows an element’s box auto
hidden
scroll
visible
inherit		 2
position Specifies the type of positioning for an element absolute
fixed
relative
static
inherit		 2
right Sets the right margin edge for a positioned box auto
length
%
inherit		 2
top Sets the top margin edge for a positioned box auto
length
%
inherit		 2
z-index Sets the stack order of an element number
auto
inherit		 2

Font Selection: Apart from name matching system supported with CSS1, CSS2 support

  1. Intelligent matching: user agent forced to use font similar to requested font, when it is not available
  2. Font synthesis: where user agent creates font that matches metrics of requested font
  3. Font download: where user allowed to download font over the web

Table Display Styles: CSS2 support display styles like, table, table-cell, table-row to make not table elements to behave like table elements in document flow.

Cursor: with CSS2 you can define cursor attributes to html elements, which allow you to change cursor as per requirements.  Here is the table with list of cursors supported by CSS2

Value Description
URL A comma separated of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
auto Default. The browser sets a cursor
crosshair The cursor render as a crosshair
default The default cursor
e-resize The cursor indicates that an edge of a box is to be moved right (east)
help The cursor indicates that help is available
move The cursor indicates something that should be moved
n-resize The cursor indicates that an edge of a box is to be moved up (north)
ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east)
nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west)
pointer The cursor render as a pointer
progress The cursor indicates that the program is busy (in progress)
s-resize The cursor indicates that an edge of a box is to be moved down (south)
se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west)
text The cursor indicates text
w-resize The cursor indicates that an edge of a box is to be moved left (west)
wait The cursor indicates that the program is busy
inherit Specifies that the value of the cursor property should be inherited from the parent element

Media Types: CSS2 allows you to define style sheets for different medias with @media tag, you can define different style sheets for tv, screen, print, aural etc. here are the media types supported in CSS2

Media Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices

Apart from above, CSS2 support multiple list styles, bidirectional text, language sensitive quotation marks, text-shadows, new pseudo classes, use of system colors and dynamic outlines.

Here is list pseudo classes introduced in CSS2

Pseudo name Description CSS
:first-child Adds a style to an element that is the first child of another element 2
:focus Adds a style to an element that has keyboard input focus 2
:lang Adds a style to an element with a specific lang attribute 2

PS: All tables are copies from http://www.w3schools.com/CSS/

September 27, 2009

Position and Z-index

Filed under: css — Tags: , , , , , , , , — asv3 @ 3:21 am

Possible values for "position" attribute are static, relative, absolute, fixed and inherit. The default value of position attribute is "static". Elements are positioned in browser depending of the position attribute; all elements are placed relative to the next parent element which has absolute or relative position declared.

Static is default value and respects normal document flow, absolutely positioned elements removed from document flow, it does not flow around content of other elements, and content from other elements doesn’t flow around absolutely positioned element. Absolutely positioned elements can overlap other elements or get overlapped.

Z-index in CSS works only when you have set position to relative, absolute or fixed. IE-6 treat position as z-index reset, you should specifically declare position of parent element of Z-indexed element to "static" to have them respond to Z-index correctly.

Display of display attribute in CSS

Filed under: css — Tags: , , , , , , , , — asv3 @ 3:11 am

block, inline and none are the only 3 values supported by all browsers, inline-block is not supported in IE5.5 and FF2, and IE6/IE7 respect inline-block only when it’s assigned to natural inline elements. list-item is supported in all browsers except IE5.5, run-in is buggy in almost all browsers except IE8+ and Opera 9.62+

I suggest you block, inline and none freely where-ever you can, and inline-block if you are targeting IE8+ and FF3+, it’s better not to use rest of the values. Also note <img> is an inline element.

display:block

The element displayed as a block, like <p>, <div>, <h[1-5]>. Block level elements have default display set to block. Block-level elements and elements that have display set to block, always starts from new line/block, unless you float it.

display:inline

inline used to make an block level element behave like an inline element.  width attribute of inline elements are often ignored, whichever element need to support width attribute that should not have display set to inline.

display:none

used to remove an element from document flow, browser skips rendering all elements set to display none, often used to hide/unhide elements in page.

display:inline-block

used when you have to specify width to an inline elements. Refer to the limitations of this property said above.

Others, run-in, list-item, compact, table, table-row, table-cell, table-caption. but if you not just trying to experiment its good avoiding these values.

September 20, 2009

Case Sensitivity in CSS

Filed under: css — Tags: , , , — asv3 @ 9:00 pm

In CSS remember that font family names and URLs can be case sensitive, but so far I never tried differentiating two CSS class names by different case (upper and lower), hence never got to deal with case sensitivity of CSS, but on of my friends got this question in an interview, later figured out, but default CSS is not case sensitive, but XML or XHTML DOCTYPE declaration can make CSS class names case sensitive.

Always we should follow standards, but it’s good to know sub-standard implications as well. because you don’t know, some day you might end up using code written by other programmers.

So next time when some body ask you about case sensitivity of CSS, blame DOCTYPEs.

Older Posts »

Create a free website or blog at WordPress.com.