Browser Bugs & Validation SIPB Introduction to Web Design Wednesday, January 20th Jonté Craighead & Cathy Zhang.

Slides:

Advertisements

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

Advertisements

Slide 1. Murach's HTML5 and CSS3, C6 Slide 2 Layout Control is a critical issue in any website/pages design. Traditionally and conveniently (but not satisfactorily)

Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.

CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.

HTTP Request/Response Process 1.Enter URL ( in your browser’s address bar. 2.Your browser uses DNS to look up IP address of server.com.

The Client-Server Model for the Web 1. A Web Client (usually in the form of a web browser) makes an HTTP request to a specific web server. 2. The Web Server.

HTML5 new elements. The tag specifies independent, self- contained content. An article should make sense on its own and it should be possible to distribute.

Interface Design 2 Week 9. Interface Design 2 :: Week 9 :: Calendar.

Interface Design 2 Week 10. Interface Design 2 :: Week 10 :: Calendar.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.

MWD1001 – Website Production Web Browsers Week 11.

Create a Web Site with Frames

XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.

HTML Overview for Proofreading. HTML layouts are divided into sections, and created in tables separating the images & content sections.

IMAGES Controlling size of images in CSS Aligning images in CSS Adding background images.

INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

Creating a Simple Page: HTML Overview

WRA /16/13 HTML VALIDATION & HTML5. TODAY’S AGENDA Overview of new objects: lists, tables Overview of metadata: meta tags, comments History of the.

DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.

HTML Essentials Frames and Frame Tags. Introduction A frame used to be an effective design tool Utilized space effectively by subdividing screen One idea:

By Jonathan French. What is CSS? Cascading Style Sheet Style sheet language Used for the look and formatting of a document written in a markup language.

Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.

Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.

XP Using Frames in a Web Site Ali Alfayly. XP Tutorial Objectives Create frames for a Web site Control the appearance and placement of frames Control.

Introduction to XML cs3505. References –I got most of this presentation from this site –O’reilly tutorials.

INTRODUCTION TO HTML5 Styling with CSS3. Round Border Corners  You can modify any element that supports the border property and render rounded borders.

HTML Structure & syntax

The Internet BTEC 149. What is it? Internet: A network of connected computers and computer networks located around the world ◦An international community.

Web Programming: Client/Server Applications Server sends the web pages to the client. –built into Visual Studio for development purposes Client displays.

CIS67 Foundations for Creating Web Pages Professor Al Fichera Reference for CIS127 and CIS 137.

Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.

Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.

Introduction to HTML. What is HTML? Hyper Text Markup Language (HTML) is a language for describing web pages. HTML is not a programming language, it is.

Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.

Internet Web Publishing III. Intro to Cascading Style Sheets Patricia Roberts.

CSS. HTML: Looking Back HTML dictates order, structure, and function Does very little to specify layout or visual rendering.

CSS = Cascading Style Sheet CSS consists of rules to display, style and decorate HTML elements Why CSS ? – Separate decoration from HTML markup (Ex :,,…)

Browser Wars Mark Bailey Written By Oliver Hurley.

XHTML and CSS Session 1 Intro, (X)HTML, CSS, W3C, browsers, webpage, structure, tags, attributes, elements, web development process, basic XHTML elements.

COINS OA W3C Tim Armitage. Microsoft Internet Explorer IE6 August 2001 IE7 October 2006 (XP+) IE8 March 2009 (XP+) IE9 March 2011 (Vista+) IE10 September.

HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.

XHTML By Trevor Adams. Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)

Chapter 7 Web Design.. HTML  Hypertext Markup Language  Using HTML, text is formatted by wrapping it in a tag.  The tags provide instructions to the.

Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.

1 Introduction to XML XML stands for Extensible Markup Language. Because it is extensible, XML has been used to create a wide variety of different markup.

ALBERT WAVERING BOBBY SENG. Welcome  Introductions  Existing knowledge?  Laptops?  Course goals  Introduction to several topics  Encourage creativity.

Lesson 9. * Testing Your browser * Using different browser tools * Using conditional comments with * Dealing with future compatibility problems.

Introduction to Web Design Lecture #2: Look & Feel Jonté Craighead & Cathy Zhang January 13th, 2009 Student Information Processing Board (SIPB)

HTML A brief introduction HTML1. HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup.

Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.

Web Development in Microsoft Visual Studio 2013 / 2015.

Cascading Style Sheets CSS2 - a bit more advanced.

May 6, 2009 Browser Compatibility Testing Definition It is a non functional type of testing where web based applications are tested on various browsers(IE.

History of the Browser WorldWideWeb 1991 (Tim Berners-Lee, Cern) Mosaic 1993 (Marc Andreessen, NCSA) Netscape Navigator 1994 (Marc Andreessen) Opera 1994,

The richest experience on the web Web Slices Accelerators Visual Search InPrivate Users Develop, test and debug without leaving the browser Built-in developer.

Web Page Design The Basics. The Web Page A document (file) created using the HTML scripting language. A document (file) created using the HTML scripting.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.

Laying out Elements with CSS

Pattern Library Project

Introduction to Internet Programming

Browser Support for HTML5

CSS and Box Model.

WEB PROGRAMMING JavaScript.

Cascading Style Sheets (Introduction)

Browser Engine How it works…..

Pertemuan 1 Desain web Pertemuan 1

Interface Design 2 Week 11.

Positioning Boxes Using CSS

Presentation transcript:

Browser Bugs & Validation SIPB Introduction to Web Design Wednesday, January 20th Jonté Craighead & Cathy Zhang

Lecture Overview A Brief Review: Layout Design Browser Bugs Validation Accessibility Site Infrastructure & Organization

The Rendering Issue W3C produces specifications for CSS Defines valid properties and values Defines how properties/values affect final rendering Does not specify how to generate rendered page Each browser implements own rendering methods ➡ Potential for rendering errors CSS 2, recommended in 1998 has just recently been fully supported

Rendering Engines Trident Gecko WebKitPresto

Browser Market Share #1#2 #1 #3 #4 Source: Net Applications #5

A Bit of History With IE 6, Microsoft won the browser wars Microsoft allowed IE development to lapse IE pre-installed on Microsoft Windows ➡ Large default market share Firefox Developed as open-source alternative from Netscape Webkit Open-source engine used by Safari & Google Chrome

Internet Explorer Bugs Expanding Box Problem Width: Outer box will always expand to fit contents Height: Outer box’s height acts as minimum height Float Model Problem I Non-floated content beside float does not flow Float Model Problem II (a.k.a “Escaping Floats”) Incorrect rendering of multiple floats

Dealing with Browser Bugs Ensure that your markup and CSS are valid Develop in a standards-compliant browser Test in other compliant browsers Test last in IE, make changes as appropriate Conditional comments to apply IE-specific fixes Avoid using Javascript to determine browser

Conditional Comments Proprietary IE method for conditionally parsing content Target code is wrapped within a comment block Parsed by browser based on condition given Can be used to include non-valid or IE-specific CSS Included in comments ➡ Ignored by other browsers ➡ Valid markup & CSS (Ignored by validator)

Conditional Comments Why are you using IE? A Basic Example A Practical Example ➡ Include stylesheets only for IE (or a specific IE version)

Validation Why validate? Ensures document is well-formed and functional ➡ Best starting point for cross-browser support Enables potential forward-compatibility Assists in finding document errors How? Using official W3C validators

W3C Validation Service Validators for both HTML & CSS Allows for validation by link, upload, and direct input Provides list of validation errors and suggestions Page is not valid even if there is only one error Links to validation results can be included on pages