Web Designing Bugs - Fixes By Nyros Developer
Download as PPT, PDF0 likes1,155 views
The document discusses common web design bugs across different browsers. It begins by defining what a bug is in web design and lists some of the most common browsers. It then discusses deprecated HTML tags and attributes and lists some of the most frequent bugs, including issues with centering layouts, floated elements, double margins, CSS min-height bugs, and layouts misbehaving. Specific solutions and workarounds are provided for resolving each of these common bugs across different browsers.
Web Designing Bugs - Fixes By Nyros Developer
- 1. Welcome Web Designing BUGS
- 2. Topics What is a Bug? List of Browsers Deprecated Tags and Attributes Most Common Bugs
- 3. What is a Bug? The design bug is basically arrived from a bad CSS code or from the programming code. Actually what a bug exactly means a div or a table or any other HTML tag is behaving differently with the corresponding browsers. We write styles for an element through using CSS but when we are writing the styles we have to follow the CSS coding standards carefully. Need to follow some web standard rules while converting a mockup into CSS. (validating)
- 4. List of Browsers What is a browser, and what browsers are available? A browser is software that accesses and displays web pages. Commonly-used web browsers, in order of market-share. Firefox 2, 3 & 3.5 Internet Explorer 6,7 & 8 Safari 3.2 & 4.0 Chrome 2 and 3 Opera 9.6 and 10.0 Netscape Navigator 9.0
- 5. Deprecated Tags and Attributes In HTML 4, some tags and attributes are defined as deprecated. Deprecated means that they will not be supported in future versions of HTML and XHTML. Avoid the use of deprecated tags and attributes.
- 6. Most Common Bugs Centering a Layout. Floated Elements. Double Margin on Floated Elements. CSS Min-Height Bug. Layout Misbehaving.
- 7. Centering a Layout. When we making a layout to the center, the Firefox and other exist able browsers take the layout to the center except Internet explorer. we are using margin:0px auto; attribute to center a layout in all browsers but when coming to IE some times it may not take the page to the center.
- 8. Centering a Layout. The cause for this problem is when we making a project our self with our CSS it will not arise because we will write the CSS to exist the layout fix to the center in all web browsers. Once we are modifying the others(the projects given by client) CSS, we are facing this type of problems the solution to fix this problem. margin:30px 0 0 30px;
- 9. Floated Elements What is float and why we are using this? Float is an CSS element used to fix a block to left or right or to fix some bulk of related blocks side by side with in a HTML tag. A floated list in standards compliant browsers.
- 10. In IE If we are not applying float:left then it will show like this. This can be fixed by specifying float:left attribute for each DIV. How Internet Explorer renders it.
- 11. Rules to Remember 1. If you want to have a right-floated box, you need to put the HTML for the floated box before the non-floated content (not after as you might expect). 2. You must specify a width for all floated elements. (though the width can be relative, such as a percentage width) 3. If you need to have a content after a float that shouldn't run along side the float, use the clear property.
- 12. CLEAR The clear property is way of saying “ Make sure this element dose not run along side a previous float “. By putting a div with clear:both after our floated columns, we're saying “ don't run this div , or anything after it, along side our floated columns ” .
- 13. Double margins on floated elements When we want to make a block a little to the left we will use “margin-left” property. This style will make a block to the left with some specified value in the existed browsers . But when coming to the IE it will take the value as DOUBLE. Display : inline
- 14. 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>
- 15. CSS Min-Height Bug Some times we need to create some blocks with a small height for ex:- 2px. As it is necessary we will fix that to 2px it will take 2vpx height only in existed browsers .but in IE it will definitely take double value. There are two simple solutions To fix this bug. v
- 16. Fix 1 IE will not take the small height rather than the font-size as we specify in the body tag or the main container div itself. If we fix font-size as “0” in the style attributes to that specified block you can keep the height for that as you like to keep. Fix 2 Simly keep “overflow-hidden” to the style attributes to that specified block.
- 17. Layout Misbehaving One of the important concepts of building table-less layouts using CSS is floating elements. If we are keeping an unbreakable text in an fixed width block, the text will come outside exceeding the specified width in all the existed browsers. But in case in IE the fixed width block will prolong with the unbreakable text. Firefox IE ( overflow:hidden )
- 18. Thank You