WelcomeWelcome

Web Designing BUGS Web Designing BUGS

TopicsTopics

What is a Bug?What is a Bug? List of BrowsersList of Browsers Deprecated Tags and AttributesDeprecated Tags and Attributes Most Common BugsMost Common Bugs

What is a Bug?What is a Bug? The design bug is basically arrived from a bad The design bug is basically arrived from a bad

CSS code or from the programming code. CSS code or from the programming code. Actually what a bug exactly means a div or a Actually what a bug exactly means a div or a table or any other HTML tag is behaving table or any other HTML tag is behaving differently with the corresponding browsers.differently with the corresponding browsers.

We write styles for an element through using We write styles for an element through using CSS but when we are writing the styles we have CSS but when we are writing the styles we have to follow the CSS coding standards carefully. to follow the CSS coding standards carefully.

Need to follow some web standard rules while Need to follow some web standard rules while converting a mockup into CSS. (validating)converting a mockup into CSS. (validating)

List of BrowsersList of BrowsersWhat is a browser, and what browsers are What is a browser, and what browsers are available? available?

A browser is software that accesses and A browser is software that accesses and displays web pages.displays web pages.

Commonly-used web browsers, in order of Commonly-used web browsers, in order of market-share.market-share.

Firefox 2, 3 & 3.5Firefox 2, 3 & 3.5Internet Explorer 6,7 & 8Internet Explorer 6,7 & 8Safari 3.2 & 4.0Safari 3.2 & 4.0Chrome 2 and 3Chrome 2 and 3Opera 9.6 and 10.0Opera 9.6 and 10.0

Netscape Navigator 9.0Netscape Navigator 9.0

Deprecated Tags and AttributesDeprecated Tags and Attributes In HTML 4, some tags and attributes are defined In HTML 4, some tags and attributes are defined

as deprecated. as deprecated. DeprecatedDeprecated means that they will means that they will not be supported in future versions of HTML and not be supported in future versions of HTML and XHTML. Avoid the use of deprecated tags and XHTML. Avoid the use of deprecated tags and attributes. attributes.

Most Common BugsMost Common Bugs

Centering a Layout. Centering a Layout. Floated Elements.Floated Elements. Double Margin on Floated Elements. Double Margin on Floated Elements. CSS Min-Height Bug.CSS Min-Height Bug. Layout Misbehaving.Layout Misbehaving.

Centering a Layout.Centering a Layout.

When we making a layout to the center, the Firefox When we making a layout to the center, the Firefox and other exist able browsers take the layout to the and other exist able browsers take the layout to the center except Internet explorer. we are using center except Internet explorer. we are using margin:0px auto;margin:0px auto; attribute to center a layout in all attribute to center a layout in all browsers but when coming to IE some times it may not browsers but when coming to IE some times it may not take the page to the center.take the page to the center.

Centering a Layout.Centering a Layout.The cause for this problem is when we making a The cause for this problem is when we making a project our self with our CSS it will not arise because project our self with our CSS it will not arise because we will write the CSS to exist the layout fix to the we will write the CSS to exist the layout fix to the center in all web browsers. Once we are modifying the center in all web browsers. Once we are modifying the others(the projects given by client) CSS, we are facing others(the projects given by client) CSS, we are facing this type of problems the solution to fix this problem.this type of problems the solution to fix this problem.

margin:30px 0 0 30px;margin:30px 0 0 30px;

Floated Elements Floated Elements What is float and why we are using this?What is float and why we are using this?

Float is an CSS element used to fix a block Float is an CSS element used to fix a block to left or right or to fix some bulk of related to left or right or to fix some bulk of related blocks side by side with in a HTML tag. blocks side by side with in a HTML tag.

A floated list in standards compliant browsers.A floated list in standards compliant browsers.

In IE If we are not applying float:left then it will show In IE If we are not applying float:left then it will show like this. This can be fixed by specifying float:left like this. This can be fixed by specifying float:left attribute for each DIV.attribute for each DIV.

How Internet Explorer renders it.How Internet Explorer renders it.

Rules to RememberRules to Remember

1. If you want to have a right-floated box, you 1. If you want to have a right-floated box, you need to put the HTML for the floated box before need to put the HTML for the floated box before the non-floated content (not after as you might the non-floated content (not after as you might expect). expect).

2. You must specify a 2. You must specify a widthwidth for all floated for all floated elements. (though the width can be relative, elements. (though the width can be relative, such as a percentage width) such as a percentage width)

3. If you need to have a content after a float 3. If you need to have a content after a float that shouldn't run along side the float, use the that shouldn't run along side the float, use the clearclear property. property.

CLEARCLEAR

The clear property is way of saying “ Make sure The clear property is way of saying “ Make sure this element dose not run along side a previous this element dose not run along side a previous float “. By putting a div with float “. By putting a div with clear:bothclear:both after our after our floated columns, we're saying “ don't run this floated columns, we're saying “ don't run this div , or anything after it, along side our floated div , or anything after it, along side our floated columns ” . columns ” .

Double margins on floated Double margins on floated elements elements

When we want to make a block a little to the When we want to make a block a little to the left we will use “margin-left” property. This left we will use “margin-left” property. This style will make a block to the left with some style will make a block to the left with some specified value in the existed browsers . But specified value in the existed browsers . But when coming to the IE it will take the value as when coming to the IE it will take the value as DOUBLE. DOUBLE.

Display : inline Display : inline

Block vs. inline level elements

Most of the HTML elements are block or inline elements. What is the different between them?

Block :• Always begin on a new line. • Height, line-height and top and bottom margins can be manipulated. • Width defaults to 100% of their containing element, unless a width is specified. • Example <div>, <p>, <h1>, <form>, <ul> and <li>

Inline Elements :• Always begin on the same line. • Height, line-height and top and bottom margins can’t be changed. • Width is as long as the text/image and can’t be manipulated. • Example <span>, <a>, <label>, <input>, <img>, <strong> and <em>

CSS Min-Height BugCSS Min-Height Bug

Some times we need to create some blocks with Some times we need to create some blocks with a small height for ex:- 2px. As it is necessary we a small height for ex:- 2px. As it is necessary we will fix that to 2px it will take 2vpx height only will fix that to 2px it will take 2vpx height only in existed browsers .but in IE it will definitely in existed browsers .but in IE it will definitely take double value. take double value.

There are two simple solutions To fix this bug.There are two simple solutions To fix this bug.

v

Fix 1Fix 1

IE will not take the small height rather than the IE will not take the small height rather than the font-size as we specify in the body tag or the font-size as we specify in the body tag or the main container div itself. If we fix main container div itself. If we fix font-sizefont-size as as “0” in the style attributes to that specified block “0” in the style attributes to that specified block you can keep the height for that as you like to you can keep the height for that as you like to keep.keep.

Fix 2Fix 2

Simly keep Simly keep “overflow-hidden”“overflow-hidden” to the style to the style attributes to that specified block.attributes to that specified block.

Layout MisbehavingLayout MisbehavingOne of the important concepts of building table-One of the important concepts of building table-less layouts using CSS is floating elements. If less layouts using CSS is floating elements. If we are keeping an unbreakable text in an fixed we are keeping an unbreakable text in an fixed width block, the text will come outside width block, the text will come outside exceeding the specified width in all the existed exceeding the specified width in all the existed browsers. But in case in IE the fixed width block browsers. But in case in IE the fixed width block will prolong with the unbreakable text.will prolong with the unbreakable text.

FirefoxFirefox IE (IE (overflow:hiddenoverflow:hidden))

Thank You Thank You