Absolute Positioning

Introduction – Getting started

Where do we start? Well, if we follow the advice of our wise old ancestors, we should “start at the beginning.” This book starts somewhere in the middle. The middle may be a good place to start if you know what went before and understand the direction you want to head.

Because you picked up this book to read, we assume that you know what went before and what is to come afterwards. Nevertheless, we must begin at the beginning if we want to identify and root out misconceptions about web design. Otherwise, we may wind up with difficulties.

We may not understand or appreciate the problems of positioning elements and the throes of positioning them absolutely. Therefore, following the dictums of our ancestors, we will begin this introduction to the book with some study of the fundamentals before we start the major topic of the book—absolute positioning in web-page design.

The web page is a derivative of a physical paper document. However, it does not suffer from the limitations of a physical document. Using paper is all about taking control. Its page size is fixed. The reader cannot change its fonts. They will remain the same at the point of creation and at the point of distribution. The readers have no options but to accept what they get!

Web pages are different. Their dimensions are changeable, as are their fonts and look and feel. They are dynamic, pliable, and fully capable of adapting themselves to the visualization of web designers. Moreover, users can customize them according to their needs. Designers can make them accessible to the blind or cater to those who can see and hear. Software could read the page for the visually impaired or adapt itself to Braille for those who read with the fingers. The presentation is limited only by the vision of programmers and determined by the needs of users.

Unfortunately, the web page seems to have broken all bounds and has become uncontrollable. The designer cannot ensure that the web page remains the same at the point of creation and distribution! It takes on the shape of the window that displays it and distorts the positioning of the elements that the designer so carefully laid out on the page!

The chameleon-like quality of the web page has exercised the minds of the web designer and the end user alike. The novice and the experienced alike encounter a common nagging concern in web-design discussion forums and books and cry themselves hoarse over the problem of control in web pages.

“How do we control the look and feel of the web page with the multitude of browsers and desktop resolutions?”

“How do we ensure that the positions of the elements we designed in the final output are what appear before the user?”

Web designers must acknowledge the sad fact that they have no control over the display of their pages. The reality they encounter is a far call from the ideal that they want! They can at best attempt to direct the user experience. They will have to second-guess the platform differences and resolution logic. They will have to try to render every page pixel perfect.

Therefore, before we start on this book about absolute positioning, it is important to understand that (a) positioning of elements is a challenge and (b) absolute positioning of elements is an absolute challenge.

Designers are not Gods. They need to rethink their roles and to abandon control and seek a relationship with the page that has little to do with the what-we-see-is-what-we-get (WYSIWYG) world. They must accept that they need to create adaptable pages in which content and appearance are two distinct elements. They must appreciate that it is the nature of the web to be flexible. Therefore, they must begin the journey by letting go of concepts of control of web pages and accepting that flexibility is the first mantra web design.

If the dreams of a killer website have taken a beating, it is time to say that you have no cause to despair. You can create killer web pages despite these problems. However, concerted efforts are being made to discipline web pages. You may soon find that you have tools that enable you to create web pages that look the same and display the same whatever the browser, the platform, or the device!

Microsoft, Firefox, Safari, Google, and Opera have rallied forces to deliver standards-compliant browsers. While these standards do not provide you with complete control, they at least help you create web pages that look good on desktops and palmtops alike. The expectation is that you separate structure from presentation using semantic XHTML and CSS layout and are not carried away with false convictions that backward compatibility with older browsers is a possibility. Web designers must understand that bygones will be bygones, and they must let go of those browsers and push the new ones that are taming the world of web design for them.

Now that the decks have been cleared of all misconceptions, you are ready to get started. So, let us tell you what this book is all about.

This book is about web designing as you have guessed. It is also about the problem of control. It is about positioning elements and advantages of absolutely positioning them. It is all about the challenge you are about to take up and the truths you are going to be forced to accept. So if you are ready, read on and begin your journey of discovery.

About this Website from a book “Absolute Positioning”

This section briefly describes the contents of the individual chapters in this website book.

Part I: Discovering positioning

Chapter 1: Deep positioning

The Web is an application that uses the infrastructure of the Internet to display text, images, video, and audio. Tim Berners-Lee conceived it in 1989 for a specific purpose. It has grown to be a complex, international, cross-platform, cross-language, and cross-cultural mesh of servers, clients, users, and databases—all searching, talking, viewing, accessing, downloading, and working endlessly 24/7/365.

Note: This book generally refers to the Internet as being the web—usually no longer capitalized nowadays, such as in web designer or website.

The most important technological development was the creation of graphical browsers in the early 1990s. NCSA’s Mosaic developed into the Netscape Navigator and Microsoft’s Internet Explorer and led to the browser revolution. All these developments helped in the creation of user-friendly environments that made the web a “fun” place to be.

The standards devised by web developers for communication are in a layer above operating systems, computer languages, or Internet transmission protocols that provide a basic medium of communication. HTTP and HTML are the most important standards used on the web. HTTP is less important for the web designer or HTML programmer.

HTML was not designed with desktop publishing in mind. The precise layout of elements is not its primary focus. The control over elements is very limited. Tables help position the elements slightly. CSS allows precise control over how designers format each element on web pages. Style sheets separate presentation directives from structural markup and are explicitly designed to address the presentation issues.

Chapter 2: Browsers! Browsers! Browsers!

Usability is about the aspects of a site that are not always noticeable but seriously influence the ease with which the user is able to accomplish a task of using the site.

The positioning of elements in different kinds of browsers provides a challenge. The placement of elements on the site and the navigation design visualized by the web designer determine the control over the website.

Graphical user interface design has long followed a variety of standards developed by operating system vendors. Standardized conventions determine the placement of elements. Menus are at the top. The close box is always at the upper-righthand corner and so on. The web has not been able to develop well-understood conventions. The set of conventions is loosely defined. Generally straying away from the common interface conventions established by heavily used sites is not encouraged.

The web browser is the interpreter of the website. Designers need to consider web browser support and browser capabilities when defining the position of elements on a web page. There are several browsers and versions of browsers in use across the Internet. While it is nearly impossible to design a web page that looks good in every browser, designers need to consider the capabilities of at least two or three of the important and frequently used browsers while designing their web pages and designing their websites. Remember that users do not blame browsers for the problems with elements on a page. They blame the designer.

Server-side programming comes in many flavors, including CGI scripts and server-API programs, as well as java servlets and server-side scripting environments, such as ASP and ColdFusion. Client-side programming provides less control because one can never be sure of the browser that is used or what features are active (on or off).

Chapter 3: A voyage of discovery

The transition from a command-line interface (CLI) to a graphical user interface (GUI) carries with it a significant cost. Wrapping GUI front ends around CLI programs is a common way to support both ease-of-use and scriptability. Many integrated development environments (IDEs) follow a pattern in which the graphical user interface invokes the compiler, linker, and other tools using command-line interfaces.

Particularly relevant was the Commando dialog box system in the Macintosh Programmer’s Workshop for the early (classical) Macintosh operating systems. Others have investigated wrapping HTML interfaces around command-line programs on a web server, but not on the client computer. Newer tools include Microsoft Office FrontPage (or Microsoft Expression Web and Sharepoint Designer since 2006), Adobe Dreamweaver, and Adobe ColdFusion. Object-oriented web-design tools, such as ASP.NET 3.5, are further advances in the world of web design.

Part II: Conceptualizing “My Space”

Chapter 4: Taking position

Positioning is the process of placing components into containers in a graphical user interface using positioning; coordinates within the containers specify the positions of components. By default, elements flow one after another in the same order in which they appear in HTML. The size and position of an element depends on the type of element, the contents of the element, and its display context. However, the default mode does not provide control for placement of elements on the page.

CSS elements provide some control by giving exact coordinates or specifying placement relative to other objects of the page. You could use scripting languages to dynamically change, recalculate, and redraw the elements without redrawing the page. Other layout controls also allow control over the positioning of elements on a page. Positioning can be static, absolute, relative, or float. Layers can determine the positioning of elements and tables, and frames have an impact on them.

Chapter 5: Absolute positioning? Absolutely not!

Absolutely positioned elements are always positioned relative to either the next positioned parent or the body, by default. Values for the top and left edges are relative to the upper-left corner of the next positioned element in the hierarchy. Setting an absolute position pulls the element out of the normal flow of the document and positions it regardless of the layout of its surrounding elements. Nor is an absolutely positioned element affected by the position of other elements. The type of positioning to use depends on the layout of the content and the purpose of the document. It is possible to nest an absolutely positioned element within a relatively positioned element.

Chapter 6: Elements and audience positioning

The kind of positioning that is used depends on the type of website and its purpose. The navigation needs of the site visitor, the accessibility, and usability of the site all determine how to place elements. Sites may be static or dynamic; commercial or informative. The idea of picking the correct site structure and organizing information into the collection of web pages is information architecture.

While novice users would prefer standard positioning of elements, power users would want greater control over the site and will favor structures that will provide more navigation choices. The kind of website that is being designed determines the absolute positioning of elements on the website.

Chapter 7: Site organization and element positioning

Logical site organization models can be linear, grid, hierarchy, and web. The needs of the model and the users’ logical site organization models determine the positioning of elements on each of these models. Tables and frames have an impact on the way to place elements on the web page. Absolute positioning of elements on a table or frame is a challenge.

Chapter 8: Pages, page sizes, and positioning of elements

The page is the heart of the website. The size and length of the page will determine how to place elements on the website. Theoretically, the page can be infinitely long and wide. The page size will have to be set to fit the purpose and content in hand. Designers should avoid resolution-restriction entries. Do not assume a page size , but instead make efforts to detect the page size. All these will have a bearing on the positioning of elements on the website and determine whether it is possible or necessary to place elements absolutely.

Chapter 9: Concept of templates

Templates help maintain the look and feel across the website with ease. The web designer has to place the elements only once and define the page as a template. The concept has evolved over time. The recent development of object-oriented approaches to position elements on web pages has taken the concept of templating to the next higher level of web design.

Part III: Discussing absolute positioning

Chapter 10: Getting around the problem of positioning elements in style

Web popularity brought with it an awareness of problems associated with positioning of elements. The way web browsers displayed elements was not within the designers control. Initial efforts were to control elements using tables. As a reaction to tabled web design, CSS emerged as a standard. Styles were defined as rules and properties of elements and helped place them accurately on the page. Visual Studio and allied software help designers visually place their elements on the pages, while the software generated code automatically at the backend to take care of the rules and the style. This chapter studies the concept of absolute positioning in this scenario.

Chapter 11: Using layout managers

A layout manager is an object that implements the LayoutManager interface and determines the size and position of the components within a container. Although components can provide size and alignment hints, a container’s layout manager has the final say on the size and position of the components within the container. A number of layout styles such as flow layout, grid layout, gridbag layout etc help position elements in a web page. The absolute positioning of elements within a layout manager is interesting.

Chapter 12: Layers and positions

A designer could use layers to position elements on a web page and to control the visibility or invisibility of an element. When a designer positions an element absolutely on a layer and converts the layer into a table, the position of the columns and rows of the table controls the position of the element.

Chapter 13: Tables and absolute positioning

While there is much hyped literature about why not to employ tables to position elements and about the disadvantages of tables, it is important to remember that tables have an important role to play in web design and in the positioning of elements on a page. An example of how to use absolute positioning in the context of rows and tables provides useful insights into web design.

Chapter 14: Absolute positioning and frames

Frames enable the display of multiple independently scrollable views on a single screen, each with its own distinct URL. Frames can point to different URLs, or other URLs could target frames—all within the same screen. Views may be independent windows or sub windows. Multiple views allow designers to keep certain information visible, while scrolling or replacing other views. For instance, to use three frames, a web page could employ:

• a static banner,
• a navigation menu, and
• a main view to scroll through or to replace by clicking on an item in the navigation frame.

Alternatively, a user can submit search queries in one frame and receive back results in another. Positioning elements absolutely in the frames is similar to positioning elements in each of the pages displayed in the frames as if it were a complete web page.

Part IV: Drilling down

Chapter 15: Text positioning—absolutely impossible

The type of site you design determines the quantity and quality of text. Text design can be thematic, metaphoric, fancy text layouts, wrapping around images or overlapping them. The nature of the facts it needs to convey or the link it has to provide will again determine the positioning of the text. The context in which it is used determines the absolute positioning of text.

Chapter 16: Menus, navigation bars, and navigation elements

Positioning of navigation elements is what makes the site user friendly or user unfriendly. Absolute positioning of menus and other navigational elements can be used to an advantage.

Chapter 17: Graphics, images, video, and audio

Graphics, images, video, and audio add color to a website. Absolute positioning of these elements can be advantageous in certain circumstances.

Chapter 18: When absolute positioning does not work!

Absolute positioning does not work all the time. There are designers who swear that relative positioning is a better option. Moreover, in some instances it is better for the designer to use other kind of positioning techniques. Examples highlight problems relating to absolute positioning.

Chapter 19: Future standards for absolute positioning

Object-oriented layouts are the future of web design. Visual Studio provides tools such as web parts to position elements on a web page. The visibility, invisibility, and z-ordering indexes are redefined to provide a flexible and user-friendly layout.

Part V: Resources

The story of the Web

The world has come a long way from CERN. The Web as Tim Berners-Lee conceived it is hardly recognizable in its reach today. It is no longer a minor network of communication among scientific communities located in a single building or a few buildings across the square. It is a complex, international, cross-platform, cross-language, cross-cultural mesh of servers, clients, users and databases all talking, searching, viewing, accessing, downloading, and working relentlessly 24 x 7 x 365. No one knows how many servers are out there and the volume of information bandied back and forth across the continents.

While the dimensions of the web have changed and has expanded, not much has changed in the conceptualization. Tim Berners-Lee was concerned that three technologies must be incorporated if the web has to work. He identified the language, the protocol, and the browser as fundamental requirements for the web. The type of language, the protocol used, and the number of browsers available for display have changed, but the belief that they are essential has remained unchanged. Web designers are still very concerned that their pages should display consistently across a variety of browsers and computers! Trillions of pages of material have been written on the subject, and it is the raison d’être for this book.

The first user interface designed for the Internet was a line-mode interface called the World Wide Web (www). It appeared in a minor network in March 1991 and provided for information sharing using HTML and HTTP. It became fully operational on the multiplatform computer network at the CERN laboratories in Switzerland. Marc Andersen developed the first graphical browser, Mosaic, in NCSA in 1993. This later developed into the Internet Explorer and the Netscape Navigator. The driver of this innovation was the need to discover and create user-friendly environments that would make web usage a pleasurable task.

The intent was laudable and the achievement commendable. However, the pendulum has swung to the other extreme, and today a multitude of browsers, sitting on a variety of operating systems, confront web designers with a mish-mash of their web pages and distort their efforts when displayed in different browsers. They may well wish for a platform-independent, nonbrowser-based world wide web that displays their pages in the way they intended them to display!

HTML frustrations

Frustration is the genesis of innovation in web design. The language of the web started out as simple HTML. It is an acronym for hypertext markup language. Tim Berners-Lee used that language in his CERN. He had a very limited requirement. He wanted a technology and a program that would help him interpret HTML and convert it into screen-based text. He wanted a browser that enabled the viewing of this text from a range of different computer platforms uniformly. It served his purpose.

A design goal of HTML was to pass the layout functions to the end user. The original HTML standard forced designers to creatively use it if they felt the need to control the layout.

Formatting text in HTML is not like formatting text for print. The text just refuses to stay where the designers put it. One method adopted by designers was to establish a general structure of the document by adding HTML tags that create paragraphs and heading levels in raw text.

By default, it is a series of boxes stacked one after another linearly or contained within one another. The top-level box is the page itself. It is the container for the other boxes, which can be <p></p> box or a <h1></h1> box. These can be box-level (block) elements or inline elements. Whereas box-level elements begin and end the line, inline elements are contained within box level elements. The greatest weakness of HTML is its inability to define a variety of properties for all these boxes. The boxes cannot be taken out of normal flow.

Designers have to specify line breaks deliberately in HTML; otherwise, the language will, by default, break the lines at different places for a user in accordance with the size of the type and the browser window. Moreover, HTML does not object to laxity in coding and does not insist that everything is neatly parceled into tags.

HTML displays headings in bold typeface with automatic line breaks and extra space above and below. There are six levels of headings available and are expected to be used in the order of hierarchy. However, creative designers use or misuse these heading sizes to give some sense of formatting to the web page. With newer tools being available for formatting, this feature is more or less redundant. However, it was one of the major potentially creative style elements of the early HTML web page.

As mentioned earlier, HTML text tags indicate style or structural information for inline elements. They affect the appearance of the enclosed text without adding line breaks or extra space. Closing tags are required to turn off the style attribute whenever required.

However, HTML does not allow the separation of style from content. It also does not provide for greater typographical and page-layout controls. Site maintenance also becomes an issue if you go over and edit the HTML code every time any small stylistic element of the web page needs tweaking.

Distinctions between the logical and physical style also, really did not make much sense at this stage of development of web design. Nevertheless, designers regarded logical style as a purer method of going about style.

Designers used logical styles or content-based styles to describe the enclosed text’s meaning, context, or usage and leave the rendering issues to the discretion of the browser. This style enabled the designer to specify that selected text should be emphasized or displayed as code. Most browsers were also designed to adhere to the conventions of logical style.

You could use physical styles to provide specific instructions to the browser to display text as italic or strike through. They also could control the size of the text.

Other inline elements that offer some scope for manipulation and creativity were the font tag and the ordered and unordered lists. However, the potential for creativity was very limited and often frustrating to designers who could not translate their imagination into their web pages.

One method that helped get over the limitations of text display in HTML was the use of preformatted text. The preformatted text could display in the browser, exactly as the designer typed it into the HTML code. It always displayed in monospace font, and this allowed columns of characters to line up correctly. The source text was coded <pre> text and teletype <tt>. It naturally became a favorite cheat for controlling alignment of text in the browser.

The no-break (<nobr>) tag was developed to ensure that the text was displayed in a single line and did not wrap over in the browser window. This had obvious disadvantages as the text flowed beyond the browser window if the string was too long.

The <wbr> was an esoteric word-break tag used in conjunction with the no-break tag to indicate a potential word break in conjunction with a no-line-break tag.

Centering of text elements was another attempted innovation in positioning. The align attribute was used to align text elements horizontally on a page at the block level.

Indentations were a problem in HTML. There was no specific function for creating indented text in HTML. Therefore, creative web designers make use of existing tags to indent text on a web page. One such element is the use of the <blockquote>, and the other is the use of list elements.

The Mosaic browser developed in 1993 had a very different aim. It built in capabilities of displaying text and graphics, which was something that users wanted. Unfortunately, technological restrictions of the additional time imposed limitations on this browser.

Slow modem connections, monochrome monitors, top-to-bottom layouts and left-to-right sequencing of text and images, and interspersed layouts with carriage returns and data stream separators did not provide much scope for innovation or imagination. The layout was linear. The HTML itself could only provide a teletype model for layout of pages. Edge-to-edge text with blank spaces for separators followed headline banners in websites. It imitated the paper document on the screen with none of its flexibility. There was much dissatisfaction among the web designers and an outcry for a language and a browser that would give more flexibility and scope for innovation.

However, the Mosaic browser, made designers more aware of the shortcomings of the HTML language. Graphical inline images were part of the flow of an HTML document, but were extremely difficult to control. A few innovative designers began controlling graphics using transparent graphics to create white space on the page. This led to thoughts on how to define the height and width of the graphic and all the issues relating to x, y, and z indexes that were later resolved in cascading style sheets.

In 1994, the W3C consortium was established with the view to set goals and standards for future development of the language of the Web—HTML. W3C churned out several versions of HTML—each version was an improvement over the other. However, no standardization norms were adhered to. This resulted in a hot debate over the merits of the different versions and the need to implement standardization norms.

Microsoft and Netscape meanwhile forged ahead, adopting HTML 3.0 as their standard and developed their browsers, forcing compliance on web designers. They responded to the market demand for structures that will help designers format their web pages more precisely. They also did not hesitate to violate the standard generalized markup language (SGML) content rules in the process. HTML 3.2 acknowledged these deviations and brought in some standardization of the language.

NOTE: SGML was in existence before HTML but was not very popular because it was not designed for easy implementation. HTML adopted SGML for content formatting.

Web technologies too improved during this period, and several new design features began to emerge. Icons replaced words, tiled images appeared in backgrounds, bevelled buttons with edges adorned the pages, banners were used in place of titles, and top-to-bottom, bullet-list menu-driven systems emerged, enabling the presentation of hierarchical information.

However, web designers were more obsessed with technology rather than content. The web page was a battlefield of flashy banners, buttons, colors, and objects! Very few web designers made efforts to create well-structured layouts for their pages. The revolution happened only when table tags were introduced into HTML for statistical purposes and remained to service the designers who wanted to bring order into the chaos of their pages. Positioning of elements within tables became a very important aspect of web design.

The table brought context and structure to the table data and provided for systems for incremental display and display for nonvisual display agents (Braille-based browsers). At a very basic level, tables contained cells arranged into rows and columns. Display characteristics can be controlled at the table level or cell level or row/column level. The HTML tags provide for many tags for controlling the display characteristics.

However, browsers still continue to have their own methods of interpreting tags, and, hence, the display of web pages differs from browser to browser. HTML 4.0 deprecated many table-formatting tags in favor of achieving the same effects with style sheets. Browsers nevertheless continue to support those tags.

Tables come with their own frustrations and headaches. The code becomes potentially complex, and a single missing tag can destroy the table display and cause chaos. Tables that display in one browser well, begin to look like a jigsaw puzzle in another browser. The text size can also wreak havoc on the table display, which varies from user to user, and the designer has very little control over it. Form elements too display erratically in browsers, depending on the settings preferred by the user. Another major problem encountered is the “unwanted white-space creep” in tables.

In addition, Netscape Navigator has a predilection to collapse empty cells, and it will not render the background color of the collapsed cell. Therefore, designers who want to use empty-cell spaces for design purposes would have to fill it with something if the page has to render perfectly.

Netscape Navigator 2.0 introduced frames back then. Frames allowed designers to divide the browser window into multiple smaller windows—each displaying a different HTML document. This also worked well in Internet Explorer 3.0 and higher. This new methodology of presenting elements on a web page had its advantages as well as disadvantages.

The main advantage of frames was that they enabled one part of the web page to remain static while others could scroll. They unified the resources from separate servers, and alternative content could be added with ease using the <noframes> tag. However, older browsers did not support this construct. It made the web page design more complicated and users could not bookmark individual pages. The number of pages on the browser window also increased the load on the server and resulted in low download speeds. These framed documents also became a problem for the search engines, and the pages could not be tracked if they were a part of a framed document.

While Netscape Navigator and the Internet explorer attempted to define their own rules of the game, standardization remained a distant dream. Resolutions of different monitors could only be second-guessed. Color schemes continued to be diverse, and downloading time was extensive. While font and typeset could be defined on the browser, the vertical and horizontal spread of the text also could not be controlled completely by the designer. As a result, web designers still could not deliver text that was legible, readable, and clear on the monitor, and the web page could not attractively display graphics.

This limitation prompted many designers to adhere to the philosophy that browsers must present information from the designer’s point of view, as compatibility with the different browsers was a technology issue that must be handled by the designer.

Closely allied to this was the belief that the site’s objectives were of paramount importance, and the site must aim to draw the visitors in and inform them instantly of the reason for its existence. Therefore, techniques of presentation assumed importance. Navigation systems and site structure gained focus. It was felt that web design must evolve to use the rapidly changing technologies, such as multimedia, animation, database integration, ecommerce, and 3D worlds (VRML).

Therefore, dynamic HTML marked this phase of development of the web page. Positioning techniques and use of cascading style sheets in dynamic HTML offered more flexibility to the designer.

HTML 4.0 appeared in 1997. It added style sheets and support for internationalization (such as left-to-right alignment of text and the lang attribute, among others). HTML 4.0 introduced richer tables and forms, incorporated scripts and object tags for multimedia, and indicated the flavor of HTML (Transitional, Strict, or Frameset) at the beginning of the document to enable the browser or validator to parse the code.

In 1999, HTML 4.01 prepared for integrating XHTML into its warp and woof of HTML. XHTML resulted in cleaner HTML. It properly formatted a document and well-nested tags, and it made it easier to introduce changes to the document. XHTML combines the flexibility of HTML and the extensibility of XML.

Tags can be defined and deployed on the fly. With XHTML, if you find a need for a new markup tag, you simply define it in an XHTML module and use it in your page as you would any other HTML tag. You can also use XHTML to mark-up the code, as appropriate for the (XHTML-compatible) browser that is viewing it. You are also in a better position to understand the different types of degradations that happen in different browsers due to unsupported tags. Standards are being evolved to handle the degradation gracefully by turning off the tags and providing alternatives for those browsers that could not parse the tags.

XHTML code generation

Unless otherwise stated, the code snippets, blocks, or programs in this book use XHTML 1.1—not HTML. XHTML 1.1 is very similar to XHTML 1.0 Strict, and both XHTML 1.0 or 1.1 are somewhat similar to HTML 4.01 Strict. However, XHTML has some major differences from HTML 4.01 Strict.

XHTML syntax

Three major differences exist between HTML and XHTML:

1)      XHTML requires lowercase names in markup tags for all elements and attributes, such as <body>. Using an uppercase or mixed-case name, such as <BODY> or <BoDy>, (which are perfectly acceptable for HTML 4.01) will trigger a syntax error when verifying any XHTML code with the W3C Validator. (More about the W3C code validators later in this chapter.)

2)      The designer must properly close all XHTML tags. A nonempty element, such as <p> must have a </p> tag. An empty element, such as the HTML <br> tag must have either a <br/> or <br /> tag in XHTML (<br /> is recommended, due to nonstandard performance with some browsers).

3) Some HTML 4.01 elements or attributes are currently deprecated (made obsolete) in XHTML. You could confer the handy HTML 4.01 / XHTML 1.0 Reference in the w3schools.com XHTML tutorial for viewing the current or now deprecated HTML 4.01 / XHTML elements and attributes.
(http://www.w3schools.com/tags/default.asp).

W3C validators

After generating the XHTML / CSS code, you could verify whether or not if its syntax is valid by using validators. W3C has some free validators available for use online at its website or on a number of mirror websites hosting the validators. You could even install validators on your own system.

Three W3C validators:

1)      W3C MarkUp Validator—also known as the HTML validator. It helps check web documents in formats like HTML and XHTML, SVG, or MathML:
(http://validator.w3.org/)

There are three ways to enter the XHTML information into the HTML validator:

• Enter the URL for an existing online website.
• Browse an XHTML (or HTML) file on your local system and upload the file to the validator.
• Paste or type the XHTML (or HTML) code directly into a text box on the W3C validator.

The validator could be set to detect automatically the HTML or XHTML DOCTYPE and character set for the website or you could explicitly enter whatever one you specifically programmed for the website.

2) W3C Link Checker—checks anchors (hyperlinks) in an HTML / XHTML document. Use it to find broken links, among other things. Check your code with the MarkUp Validator first:
(http://validator.w3.org/checklink)

3)      W3C CSS Validator validates CSS style sheets or documents using CSS style sheets:
(http://jigsaw.w3.org/css-validator/)

Or better yet, you could incorporate all three of the above validators by using the handy all-in-one tool—the W3C Log Validator (http://www.w3.org/QA/Tools/LogValidator/)—to improve the quality of a whole site, step by step, by finding the most popular documents that need to be fixed in their priorities. You can learn more about this method in the Web Standards Switch document:
(http://www.w3.org/QA/2003/03/web-kit).

Cascading style sheets to the rescue

Cascading style sheets were a welcome relief to the web designers who were frustrated by the control over design provided by HTML. The style sheets for the first time allowed the designer to apply typographical styles and spacing instructions for elements on the page. The term cascading refers to a situation where several sources of style information compete for control over the elements on a page.

Cascading style sheets were first created and integrated with web design with the laudable intention of separating style from content. The style in cascading style sheets refers to the definition of colors, fonts, and positioning of elements on a web page. The selector defines each style with a unique name, and this name invokes and activates the specific style in the XHTML (or HTML) document.

W3C devised a hierarchical system for assigning weights to each type of style element in CSS. These sets of rules resolve conflicts between different style sheets that simultaneously affect the presentation of a single document. Rules that are more specific could override the general rules set for the site in order to modify particular pages to suit the theme therein.

CSS enables the web designer to define the look and feel of the page in one place. Thereafter, it is easy to change the look and feel by changing the attributes in the style sheet. Font sizes and other text attributes can be defined accurately, as in a word-processor document. CSS also can redefine HTML tags, customize links, or build layers into the web page. The web pages also load faster because the CSS code only loads once when the visitor enters your site, while the HTML gets loaded for each page.

HTML, by default, produces a linear style of positioning elements known as “static” positioning. Elements could not be taken out of this “normal flow” and positioned elsewhere on the page. Nor could specific properties be defined for the various containers or boxes that make up the HTML page. A change in the style of presenting any one element on the web page required plowing through volumes of code. CSS codes were written independently of XHTML code and were called up from within the code. Styles could then be independently and globally edited without plowing through volumes of code.

CSS enabled designers to specify traditional typographical attributes, such as font size, line spacing, and letter spacing and offered methods for specifying indentation, margins, and element positioning. It separated style from content and enabled the creation of potentially smaller documents that downloaded quickly. It made for easier site maintenance.

One major drawback for CSS was the possible lack of browser support. Versions of browsers earlier than Internet Explorer 3.0 and Netscape Navigator 4.0 do not support style sheets. Also, there is no consistency of support among browsers that claim that they do support CSS. However, web designers still see a lot of advantage in using style sheets.

CSS provides a number of rules that allow the designer to specify the x and y coordinates for an element or its attributes. Designers can apply these rules to XHTML documents, as inline style directions, as styles embedded at the top of XHTML files, or as external files that can be linked to or imported into the documents.

Inline style information can be added to an individual element by adding the style attribute, which is a standard style declaration. This is equivalent to the <font> tag. They are still attached to individual elements and are as cumbersome to modify as the <font> tag of HTML. Below is a sample of the inline style:

<h1 style=”Color: black”>This heading will be shown in black</h1>

The embedded style sheet is a more compact method. The style element is placed in the head section at the top of the XHTML document, as shown below:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<style>
<!–
h1 {color: black}
p {font-size: 14pt; font-family: “Times New Roman”}
–>
</style>
<title>Style Sheets</title>
</head>
<body>
</body>
</html>

The <!– and –> tags hide the style element from browsers that do not support style sheets.

External style sheets are the most powerful of the three types of style sheets. This enables the web designer put all style elements together in a single style sheet document and reference it from all pages in a website. You could insert this reference either by linking to the style sheet using the <link> tag in the <head> of the web page or by importing the style sheet into the <style> element using the @import function.

Sample of linking

<head>
<link rel=”stylesheet” href=”/pathname/stylesheet.css” type=”text/css” />
</head>

Sample of importing

<style>
@import url(http://pathname/stylesheet.css);
</style>

Note: All @import statements must occur at the start of a style sheet. Any rules specified in a style sheet will override conflicting rules in an imported style sheet. In the event of conflicting rules in two or more imported @import statements, any conflicting rule in last @import statement listing the conflicting rules will override any other (earlier) rules.

An important aspect of style sheets was the inheritance concept. A parent element passes its style properties down to a child element or to any element contained with the child element. This enabled designers to define attributes for the parent elements and override them, wherever required, for the child elements. This made for more efficient style specification.

In 1997, W3C came up with a working draft of specifications for style sheet properties for positioning elements on the page and in three-dimensional spaces. Netscape and Microsoft initiated this effort. CSS 2 (first released in 1998) took this further.

Positioning in style sheets is a rich and complex topic and the later chapters of this book will take this up in detail. For the present, we shall briefly look at the concepts of positioning at 35,000 feet. The positioning of an element could be fixed, absolute, or relative to the containing blocks and could be independent of a containing block.

A fixed element will remain at the same location on the window while an absolutely positioned element is taken out of the normal flow of the document, and the space it occupied in the original static flow is given up. The relatively positioned element appears as part of the normal flow, and it is positioned based on specifically defined coordinates, while its location is retained in the static flow.

The type of positioning that you must use will depend on the layout of the content and the purpose of the document. Combinations of positioning properties may also give you advantages of manipulating multiple items on the page.

DHTML, which developed later, was a combination of HTML, Javascript, CSS, and document object model (DOM). Several visual editors enable you today to create both CSS and DHTML.

The XML / CSS combination will bring simplicity back into web design. While the former will help web designers create powerful content, the latter will help them create attractive styles! However, Jon Bosak made observations on the limitations of CSS in the context of HTML in his presentation on 11 April 1997 at WWW6:

• CSS cannot grab an item (such as a chapter title) from one place and use it again in another place (such as a page header).
• CSS has no concept of sibling relationships. For example, it is impossible to write a CSS style sheet that will render every other paragraph in bold.
• CSS is not a programming language. It does not support decision structures, and the stylesheet designer cannot extend it.
• CSS cannot calculate quantities or store variables. This means, at the very least, that it cannot store commonly used parameters in one location that is easy to update.
• CSS cannot generate text (page numbers, etc.).
• CSS uses a simple box-oriented formatting model that works for current Web browsers but will not extend to more advanced applications of the markup, such as multiple column sets.
• CSS is oriented toward Western languages and assumes a horizontal writing direction.

However, the W3C working group that is committed to XML is attempting to develop a simplified version of the DSSSL standards. They aim to provide more layout and document presentation features for CSS 2. Nevertheless, there is a hot debate on whether designers should use XML in combination with CSS or with XSLT because CSS cannot modify the XML document structure, whereas XSLT enables designers to do just that!

W3C working group responsible for the XML standard is concentrating its efforts on the implementation of a simplified version of the DSSSL standard, DSSSL online (DSSSL-O). DSSSL-O promises to provide far more layout and document presentation features than CSS, but is a considerably more complex standard and may prove difficult to implement.

CSS is independent of scripting language, but you could use CSS in combination with a number of scripting languages. W3C has worked to establish CSS 2 and CSS 3 as interoperable style-sheet languages for the web and to establish an interface with scripting languages and to take advantage of some of the positioning features of both CSS and scripting languages.

Web design has finally arrived. Today the new versions of browsers provide the controls that designers yearned for. The designers have more flexibility and can position their elements with greater accuracy than they could in the original HTML using CSS, XML, or XHTML.