It is often forgotten that the Internet and Web Pages are still new technology, still growing and evolving. As with all new technology, there will be problems.
Internet browsers, such as Microsoft Internet Explorer, Netscape, and Firefox, read and interpret the code of a web page so it displays a pretty visual interface. The code that instructs the browser on how the page should look is the Presentation, more commonly known as Cascading Style Sheets (CSS). While there are web page standards, guidelines for consistent codes for presentation and layout, not all browsers "see" the same page equally.
To keep up with the evolution of web page design and development, and deal with the problems that come with the various Internet browsers, the following information may help you learn more about web page layout using CSS and solve your web page design problems.
The following sites feature cutting edge web page design issues and set the standards for web page design and development.
Understanding how different browsers work and the CSS features they support may help you discover the reason behind your layout bug.
Before standards became the norm, a designer would have to design their web pages to accommodate all the different browsers out there and the different ways they handle code. Today, a few designers are still designing for older browsers, but most people have gotten the clue and updated their Internet software. Still, even today's browsers have some bugs and here are some fixes to deal with the ones in Microsoft Internet Explorer, the most common Internet browser in the world.
Internet Explorer computes the margins and padding differently than other browsers and the web standards convention. This results in a bug involving text, boxes, lists, and images. In the graphic example to the right, notice how the box overlaps the list bullets on the right side. Tom Gilder's Internet Explorer Bugs page has a good example of how these bugs work. Other bugs include one where the content will be invisible on the page until you scroll down the page and then it magically appears and disappears. Sometimes images and containers will appear to be jumping around. The links below offer some fixes for these bugs:
Languages can also screw up the layout of a web page. International users of the Internet and Web are increasing at rates faster than the US, Canada, and Europe. As more international users come on, the need to pay attention to the impact your page will have on foreign computers and Internet browsers, especially ones with right-to-left languages, the more you need to pay attention to the international standards for web compliance.
Older operating systems and browsers wouldn't recognize a page's coding layout and right-to-left languages would force a right-justified margin, scrambling your layout in whatever language you wrote it in. These include Hebrew and Arabic, two of the fastest growing international Internet user groups.
There are some solutions to override the directional preference of a user's computer operating system, preventing a web page layout scramble. First, newer operating systems like Windows XP, improves the interpretation of web pages and English. Second, there are HTML coding techniques to override directional preference on newer browsers. Older browsers ignore these codes and the page ends up with right aligned text and graphics going all over the place, but they tend to still be viewable, if not pretty. Keeping your browser and operating system updated and the HTML layout as simple as possible overcomes these display problems.
To enforce the language direction and styling, for the United States or what is known as "American English", add the following to your HTML tag:
<html dir="ltr" lang="en-US">
Here are a few of the English language codes for other versions of English:
If you have a lot of users from places using right-to-left languages and you want to seriously reinforce the direction structure of your site, in your style sheet, add the following direction declaration in your HTML and BODY selectors and the bidirectional code below to help align your content appropriately. It's a bit overkill, but until this problem is easily solved, exaggerated code ensures a proper layout when challenged by a foreign language.
html, body {direction:ltr}
/* begin bidirectionality */
bdo[dir=ltr] {direction:ltr; unicode-bidi:bidi-override}
bdo[dir=rtl] {direction:rtl; unicode-bidi:bidi-override}
*[dir=ltr] {direction:ltr; unicode-bidi:embed}
*[dir=rtl] {direction:rtl; unicode-bidi:embed}
/* block-level in msie4 */
address, blockquote, body, dd, div, dl, dt, fieldset,
form, frame, frameset, h1, h2, h3, h4, h5, h6, iframe,
noscript, noframes, object, ol, p, ul, applet, center,
dir, hr, menu, pre, li, table, tr, thead, tbody, tfoot,
col, colgroup, td, th, caption
{unicode-bidi:embed}
The following links may help you learn more about how different browsers interpret CSS and HTML: