Web Development

Web Development http://webdevbook.wordpress.com Just another WordPress.com weblog Thu, 18 Mar 2010 10:18:14 +0000 en hourly 1 http://wordpress.com/ http://s2.wp.com/i/buttonw-com.png Web Development http://webdevbook.wordpress.com Significant Bugs and Incompatibilities in IE6 and IE7 http://webdevbook.wordpress.com/2009/10/15/significant-bugs-and-incompatibilities-in-ie6-and-ie7/ http://webdevbook.wordpress.com/2009/10/15/significant-bugs-and-incompatibilities-in-ie6-and-ie7/#comments Thu, 15 Oct 2009 05:58:35 +0000 abhidevmumbai http://webdevbook.wordpress.com/?p=49 ]]> Following is a brief description of various bugs that occur in IE6 and IE7 that are not described or alluded to above. This list does not include items that lack support in all three browsers.

IE6 Bugs

Doesn’t support styling of the <abbr> element
Doesn’t support classes and IDs that begin with a hyphen or underscore
<select> elements always appear at the top of the stack, unaffected by z-index values
:hover pseudo-class values are ignored if anchor pseudo-classes are not in the correct order (:link, :visited, :hover)
An !important declaration on a property is overridden by a 2nd declaration of the same property in the same rule set that doesn’t use !important
height behaves like min-height
width behaves like min-width
Left and right margins are doubled on floated elements that touch their parents’ side edges
Dotted borders appear identical to dashed borders
line-through value for text-decoration property appears higher on the text than on other browsers
List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number “1″
List items don’t support all possible values for list-style-type
List items with a specified list-style-image will not display the image if they are floated
Offers only partial support for @font-face
Some selectors will wrongly match comments and the doctype declaration
If an ID selector combined with a class selector is unmatched, the same ID selector combined with different class selectors will also be treated as unmatched

IE7 Bugs

List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number “1″
List items don’t support all possible values for list-style-type
List items with a specified list-style-image will not display the image if they are floated
Offers only partial support for @font-face
Some selectors will wrongly match comments and the doctype declaration

Some IE bugs not mentioned here occur only under particular circumstances, and are not specific to one particular CSS property or value. See the references below for some of those additional issues.

]]> http://webdevbook.wordpress.com/2009/10/15/significant-bugs-and-incompatibilities-in-ie6-and-ie7/feed/ 2 abhidevmumbai CSS Differences in Internet Explorer 6, 7 and 8 http://webdevbook.wordpress.com/2009/10/15/css-differences-in-internet-explorer-6-7-and-8/ http://webdevbook.wordpress.com/2009/10/15/css-differences-in-internet-explorer-6-7-and-8/#comments Thu, 15 Oct 2009 05:56:18 +0000 abhidevmumbai http://webdevbook.wordpress.com/?p=46 ]]> It becomes very difficult for the developers because of the different rendering by each of the browser in the market.

As we know about 65% of the market is acquired by the Microsoft Internet explorer. So it becomes compulsory for the developers to do cross browser testing in order to deliver the product to their client as desired.

Now we have IE6,IE7 and IE8…let us see the differences in the css for these browsers

Selectors & Inheritance

Child Selectors

Example

body>p {
color: #fff;
}

body>p {
	color: #fff;
}

Description

The child selector selects all elements that are immediate children of a specified parent element. In the example above, body is the parent, and p is the child.

Support

IE6
No

IE7
Yes

IE8
Yes

Bugs

In IE7, the child selector will not work if there is an HTML comment between the parent item and the child.

Chained Classes

Example

.class1.class2.class3 {
background: #fff;
}

.class1.class2.class3 {
	background: #fff;
}

Description

Chained classes are used when the same HTML element has multiple classes declared, like this:

<div class=”class1 class2 class3″>
<p>Content here.</p>
</div>

<div>
<p>Content here.</p>
</div>

Support

IE6
No

IE7
Yes

IE8
Yes

Bugs

IE6 appears to support this property, because it matches the last class in the chain to an element having that class, however, it does not restrict the class to an element that has all the classes in the chain, like it should.

Attribute Selectors

Example

a[href] {
color: #0f0;
}

a[href] {
	color: #0f0;
}

Description

This selector allows an element to be targeted only if it has the specified attribute. In the example above, all anchor tags that have href attributes would qualify, but not anchor tags that did not have href attributes.

Support

IE6
No

IE7
Yes

IE8
Yes

Adjacent Sibling Selectors

Example

h1+p {
color: #f00;
}

h1+p {
	color: #f00;
}

Description

This selector targets siblings that are adjacent to the specified element. The example above would target all paragraph tags that are siblings of, and come directly after, primary heading tags. For example:

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

In the code above, the CSS styles specified would target only the first paragraph, because it is a sibling to the <h1> tag and is adjacent. The second paragraph is a sibling, but is not adjacent.

Support

IE6
No

IE7
Yes

IE8
Yes

Bugs

In IE7, the adjacent sibling selector will not work if there is an HTML comment between the siblings.

General Sibling Selectors

Example

h1~p {
color: #f00;
}

h1~p {
	color: #f00;
}

Description

This selector targets all siblings that appear after a specified element. Applying this selector to the HTML example given in the previous section will select both paragraph tags, however, if one of the paragraphs appeared before the heading, that paragraph would not be targeted.

Support

IE6
No

IE7
Yes

IE8
Yes

Pseudo-Classes and Pseudo-Elements

Descendant Selector After :hover Pseudo-Class

Example

a:hover span {
color: #0f0;
}

a:hover span {
	color: #0f0;
}

Description

An element can be targeted with a selector after a :hover pseudo class, similar to how any descendant selector works. The above example would change the font color inside all <span> elements inside of anchor elements while the anchor is hovered over.

Support

IE6
No

IE7
Yes

IE8
Yes

Chained Pseudo-Classes

Example

a:first-child:hover {
color: #0f0;
}

a:first-child:hover {
	color: #0f0;
}

Description

Pseudo-classes can be chained to narrow element selection. The above example would target every anchor tag that is the first child of its parent and apply a hover class to it.

Support

IE6
No

IE7
Yes

IE8
Yes

:hover on Non-Anchor Elements

Example

div:hover {
color: #f00;
}

div:hover {
	color: #f00;
}

Description

The :hover pseudo-class can apply a hover, or rollover state, to any element, not just anchor tags.

Support

IE6
No

IE7
Yes

IE8
Yes

:first-child Pseudo-Class

Example

div li:first-child {
background: blue;
}

div li:first-child {
	background: blue;
}

Description

This pseudo-class targets each specified element that is the first child of its parent.

Support

IE6
No

IE7
Yes

IE8
Yes

Bugs

In IE7, the first-child pseudo-class will not work if an HTML comment appears before the targeted first child element.

:focus Pseudo-Class

Example

a:focus {
border: solid 1px red;
}

a:focus {
	border: solid 1px red;
}

Description

This pseudo-class targets any element that has keyboard focus.

Support

IE6
No

IE7
No

IE8
Yes

:before and :after Pseudo-Elements

Example

#box:before {
content: “This text is before the box”;
}
#box:after {
content: “This text is after the box”;
}

#box:before {
	content: "This text is before the box";
}

#box:after {
	content: "This text is after the box";
}

Description

This pseudo-element places generated content before or after the specified element, used in conjunction with the content property.

Support

IE6
No

IE7
No

IE8
Yes

Property Support

Virtual Dimensions Determined by Position

Example

#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}

#box {
	position: absolute;
	top: 0;
	right: 100px;
	left: 0;
	bottom: 200px;
	background: blue;
}

Description

Specifying top, right, bottom, and left values for an absolutely positioned element will give the element “virtual” dimensions (width and height), even if width and height are not specified.

Support

IE6
No

IE7
Yes

IE8
Yes

Min-Height & Min-Width

Example

#box {
min-height: 500px;
min-width: 300px;
}

#box {
	min-height: 500px;
	min-width: 300px;
}

Description

These properties specify minimum values for either height or width, allowing a box to be larger, but not smaller, than the specified minimum values. They can be used together or individually.

Support

IE6
No

IE7
Yes

IE8
Yes

Max-Height & Max-Width

Example

#box {
max-height: 500px;
max-width: 300px;
}

#box {
	max-height: 500px;
	max-width: 300px;
}

Description

These properties specify maximum values for either height or width, allowing a box to be smaller, but not larger, than the specified minimum values. They can be used together or individually.

Support

IE6
No

IE7
Yes

IE8
Yes

Transparent Border Color

Example

#box {
border: solid 1px transparent;
}

#box {
	border: solid 1px transparent;
}

Description

A transparent border color allows a border to occupy the same space as would be occupied if the border was visible, or opaque.

Support

IE6
No

IE7
Yes

IE8
Yes

Fixed-Position Elements

Example

#box {
position: fixed;
}

#box {
	position: fixed;
}

Description

This value for the position property allows an element to be positioned absolutely relative to the viewport.

Support

IE6
No

IE7
Yes

IE8
Yes

Fixed-Position Background Relative to Viewport

Example

#box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}

#box {
	background-image: url(images/bg.jpg);
	background-position: 0 0;
	background-attachment: fixed;
}

Description

A fixed value for the background-attachment property allows a background image to be positioned absolutely relative to the viewport.

Support

IE6
No

IE7
Yes

IE8
Yes

Bugs

IE6 incorrectly fixes the background image in relation to the containing parent of the element that has the background set, therefore this value only works in IE6 when its used on the root element.

Property Value “inherit”

Example

#box {
display: inherit;
}

#box {
	display: inherit;
}

Description

Applying the value inherit to a property allows an element to inherit the computed value for that property from its containing element.

Support

IE6
No

IE7
No

IE8
Yes

Bugs

IE6 and IE7 do not support the value inherit except when applied to the direction and visibility properties.

Border Spacing on Table Cells

Example

table td {
border-spacing: 3px;
}

table td {
	border-spacing: 3px;
}

Description

This property sets the spacing between the borders of adjacent table cells.

Support

IE6
No

IE7
No

IE8
Yes

Rendering of Empty Cells in Tables

Example

table {
empty-cells: show;
}

table {
	empty-cells: show;
}

Description

This property, which only applies to elements that have their display property set to table-cell, allows empty cells to be rendered with their borders and backgrounds, or else hidden.

Support

IE6
No

IE7
No

IE8
Yes

Vertical Position of a Table Caption

Example

table {
caption-side: bottom;
}

table {
	caption-side: bottom;
}

Description

This property allows a table caption to appear at the bottom of a table, instead at the top, which is the default.

Support

IE6
No

IE7
No

IE8
Yes

Clipping Regions

Example

#box {
rect(20px, 300px, 200px, 100px)
}

#box {
	rect(20px, 300px, 200px, 100px)
}

Description

This property specifies an area of a box that is visible, making the rest “clipped”, or invisible.

Support

IE6
No

IE7
No

IE8
Yes

Bugs

Interestingly, this property works in IE6 and IE7 if the deprecated comma-less syntax is used (i.e. whitespace between the clipping values instead of commas)

Orphaned and Widowed Text in Printed Pages

Example

p {
orphans: 4;
}
p {
widows: 4;
}

p {
	orphans: 4;
}

p {
	widows: 4;
}

Description

The orphans property specifies the minimum number of lines to display at the bottom of a printed page. The widows property specifies the minimum number of lines to display at the top of a printed page.

Support

IE6
No

IE7
No

IE8
Yes

Page Breaks Inside Boxes

Example

#box {
page-break-inside: avoid;
}

#box {
	page-break-inside: avoid;
}

Description

This property specifies whether a page break should occur inside of a specified element or not.

Support

IE6
No

IE7
No

IE8
Yes

Outline Properties

Example

#box {
outline: solid 1px red;
}

#box {
	outline: solid 1px red;
}

Description

outline is the shorthand property that encompasses outline-style, outline-width, and outline-color. This property is preferable to the border property since it does not affect document flow, thus better aiding debugging of layout issues.

Support

IE6
No

IE7
No

IE8
Yes

Alternative Values for the Display Property

Example

#box {
display: inline-block;
}

#box {
	display: inline-block;
}

Description

The display property is usually set to block, inline, or none. Alternative values include:

inline-block
inline-table
list-item
run-in
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group

Support

IE6
No

IE7
No

IE8
Yes

Handling of Collapsible Whitespace

Example

p {
white-space: pre-line;
}
div {
white-space: pre-wrap;
}

p {
	white-space: pre-line;
}

div {
	white-space: pre-wrap;
}

Description

The pre-line value for the white-space property specifies that multiple whitespace elements collapse into a single space, while allowing explicitly set line breaks. The pre-wrap value for the white-space property specifies that multiple whitespace elements do not collapse into a single space, while allowing explicitly set line breaks.

Support

IE6
No

IE7
No

IE8
Yes

Other Miscellaneous Techniques

Media Types for @import

Example

@import url(“styles.css”) screen;

@import url("styles.css") screen;

Description

A media type for an imported style sheet is declared after the location of the style sheet, as in the example above. In this example, the media type is “screen”.

Support

IE6
No

IE7
No

IE8
Yes

Bugs

Although IE6 and IE7 support @import, they fail when a media type is specified, causing the entire @import rule to be ignored.

Incrementing of Counter Values

Example

h2 {
counter-increment: headers;
}
h2:before {
content: counter(headers) “. “;
}

h2 {
	counter-increment: headers;
}

h2:before {
	content: counter(headers) ". ";
}

Description

This CSS technique allows auto-incrementing numbers to appear before specified elements, and is used in conjunction with the before pseudo-element.

Support

IE6
No

IE7
No

IE8
Yes

Quote Characters for Generated Content

Example

q {
quotes: “‘” “‘”;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}

q {
	quotes: "'" "'";
}

q:before {
	content: open-quote;
}

q:after {
	content: close-quote;
}

Description

Specifies the quote characters to use for generated content applied to the q (quotation) tag.

Support

IE6
No

IE7
No

IE8
Yes

]]> http://webdevbook.wordpress.com/2009/10/15/css-differences-in-internet-explorer-6-7-and-8/feed/ 0 abhidevmumbai Building Applications for the iPhone with Flash http://webdevbook.wordpress.com/2009/10/06/building-applications-for-the-iphone-with-flash/ http://webdevbook.wordpress.com/2009/10/06/building-applications-for-the-iphone-with-flash/#comments Tue, 06 Oct 2009 06:45:48 +0000 abhidevmumbai http://webdevlopers.wordpress.com/?p=44 ]]> This morning during the day 1 keynote at Adobe Max 2009, Adobe announced that the next version of Adobe Flash (Flash Professional CS5) will include support for creating stand-alone applications for the Apple iPhone and iPod Touch.

]]> http://webdevbook.wordpress.com/2009/10/06/building-applications-for-the-iphone-with-flash/feed/ 0 abhidevmumbai Creative Use of PNG Transparency in Web Design http://webdevbook.wordpress.com/2009/10/05/creative-use-of-png-transparency-in-web-design/ http://webdevbook.wordpress.com/2009/10/05/creative-use-of-png-transparency-in-web-design/#comments Mon, 05 Oct 2009 13:10:21 +0000 abhidevmumbai http://webdevlopers.wordpress.com/?p=41 ]]> With proper PNG support in Internet Explorer 7, and some handy JavaScript and CSS tricks to account for older browsers, we can use PNG images to greatly enhance our design vocabulary.Click Here

]]> http://webdevbook.wordpress.com/2009/10/05/creative-use-of-png-transparency-in-web-design/feed/ 0 abhidevmumbai Triadic Background Setting with CSS http://webdevbook.wordpress.com/2009/10/05/triadic-background-setting-with-css/ http://webdevbook.wordpress.com/2009/10/05/triadic-background-setting-with-css/#comments Mon, 05 Oct 2009 13:05:28 +0000 abhidevmumbai http://webdevlopers.wordpress.com/?p=38 ]]> The Silverback web site uses three background images to create the illusion of 3D with simple CSS. No documentation is provided, however the source code is quite intuitive.Click here

]]> http://webdevbook.wordpress.com/2009/10/05/triadic-background-setting-with-css/feed/ 0 abhidevmumbai An awesome tool for HTML beginners http://webdevbook.wordpress.com/2009/10/05/an-awesome-tool-for-html-beginners/ http://webdevbook.wordpress.com/2009/10/05/an-awesome-tool-for-html-beginners/#comments Mon, 05 Oct 2009 11:36:11 +0000 abhidevmumbai http://webdevlopers.wordpress.com/?p=32 ]]> Follow this link to the tool:-

http://htmlplayground.com/

]]> http://webdevbook.wordpress.com/2009/10/05/an-awesome-tool-for-html-beginners/feed/ 0 abhidevmumbai CSS Bar Graphs (CSS For Bar Graphs) http://webdevbook.wordpress.com/2009/10/05/css-bar-graphs-css-for-bar-graphs/ http://webdevbook.wordpress.com/2009/10/05/css-bar-graphs-css-for-bar-graphs/#comments Mon, 05 Oct 2009 11:23:25 +0000 abhidevmumbai http://webdevlopers.wordpress.com/?p=24 ]]>

CSS-Technique

]]> http://webdevbook.wordpress.com/2009/10/05/css-bar-graphs-css-for-bar-graphs/feed/ 0 abhidevmumbai CSS-Technique Demos of the Flash CS4 workspace http://webdevbook.wordpress.com/2009/10/03/demos-of-the-flash-cs4-workspace/ http://webdevbook.wordpress.com/2009/10/03/demos-of-the-flash-cs4-workspace/#comments Sat, 03 Oct 2009 07:55:13 +0000 abhidevmumbai http://webdevlopers.wordpress.com/?p=14 ]]> Over at the Flash Developer Connection at adobe.com you can find a collection of five video demos explaining the Flash CS4 workspace. These video demos are aimed at helping people understand and learn the new Flash workspace. I will briefly discuss each video demo in turn.

The first demo starts by discussing the workflow layouts and different Flash file types. Then the demo shows the general Flash CS4 workspace which consist of the stage, timeline and properties panel.

The second demo shows how to navigate and use the timeline in both the main timeline and inside a movie clips timeline.

The third demo explains the library panel, symbols and instances. The library panel basically holds objects for use on the stage. These objects are called symbols, the symbols or instances can be reused many times.

The fourth demo shows how to create simple motion tween animations with the new tweening feature in Flash CS4.

The final demo discusses buttons, Actionscript and interactivity. You will learn how to create a simple button and add Actionscript to the button.

]]> http://webdevbook.wordpress.com/2009/10/03/demos-of-the-flash-cs4-workspace/feed/ 0 abhidevmumbai Using scenes in Actionscript 3 http://webdevbook.wordpress.com/2009/10/03/using-scenes-in-actionscript-3/ http://webdevbook.wordpress.com/2009/10/03/using-scenes-in-actionscript-3/#comments Sat, 03 Oct 2009 07:08:03 +0000 abhidevmumbai http://webdevlopers.wordpress.com/?p=10 ]]> Moving between two different scenes in Actionscript 3.0 is a little different to the Actionscript 2.0 version. In AS3 you need to use an event listener, but apart from that everything else is the same as the previous AS2 version.

Below is basic code for moving between two scenes using a button:

stop();
button1_mc.addEventListener(MouseEvent.MOUSE_DOWN,goNext);

function goNext (event:MouseEvent):void {
nextScene();
}

The code above assumes you have two scenes, and a button with the instance name ‘button1_mc’. You will also need a ‘stop();’ function in the second scene. If you want to move back to the previous scene you will need to use the ‘prevScene()’ function.

If you want to move to a particular frame within a scene then you can use the following code below:

stop();
button1_mc.addEventListener(MouseEvent.MOUSE_DOWN,goNext);

function goNext (event:MouseEvent):void {
gotoAndStop(10, “Scene 2”);
}

The code above stops at frame 10 within ‘Scene 2’. You could also use the ‘gotoAndPlay’ which would play from the frame instead of stopping.

]]> http://webdevbook.wordpress.com/2009/10/03/using-scenes-in-actionscript-3/feed/ 0 abhidevmumbai Flash shortcut keys http://webdevbook.wordpress.com/2009/10/03/flash-shortcut-keys/ http://webdevbook.wordpress.com/2009/10/03/flash-shortcut-keys/#comments Sat, 03 Oct 2009 07:06:21 +0000 abhidevmumbai http://webdevlopers.wordpress.com/?p=8 ]]> If you’re a regular user of Flash, you will be frequently using all the tools in the toolbar. It is sometimes very time consuming and annoying if you have to constantly switch between two or more different tools, or if you constantly go into the menu structure to select a function.

The shortcut keys can improve the usability by providing specific keys on the keyboard which link to the tools and functions used in Flash. It is often much faster to use the shortcut keys rather than the interacting with the mouse on the interface.

The shortcut keys I use the most in my projects are: F5 (Add frame), F6 (Add key frame), F8 (Convert to symbol) and Ctrl + Enter (Test movie). These particularly shortcuts can save you a lot of time, especially if you use them repeatedly. It is good to memorise the shortcut keys you use the most often, as it will allow you to use the Flash program much faster and easier.

A list of the all the Flash shortcuts can be found here: http://kb2.adobe.com/cps/121/tn_12105.html. These shortcuts apply to both Windows and Mac machines. You can also customise the keyboard shortcuts to your own preference by selecting Edit > Keyboard.

]]> http://webdevbook.wordpress.com/2009/10/03/flash-shortcut-keys/feed/ 0 abhidevmumbai