Home arrow Style Sheets arrow Page 4 - Designing Web Pages without Tables

Designing Web Pages without Tables

Many "tricks" were developed before the days of CSS in order to display neat-looking web pages. The main trick is to use tables (with the property border = 0) in order to put menus and other similar content on the page. This article will teach one how to stop using those messy tables and enter the world of design with CSS.

Author Info:
By: Sasha Slutsker
Rating: 3 stars3 stars3 stars3 stars3 stars / 81
August 09, 2004
  1. · Designing Web Pages without Tables
  2. · No Tables for Layout
  3. · Absolute Positioning, Add Borders and Margins
  4. · Lack of Browser Support

print this article

Designing Web Pages without Tables - Lack of Browser Support
(Page 4 of 4 )

Lack of Browser Support

One problem with developing in CSS is lack of browser support. Mozilla and Opera both have excellent up to date support, but Internet Explorer is lagging behind. Everything discussed in this article is supported by the newest version of each browser, but old versions of Internet Explorer and Netscape Navigator do not necessarily support CSS. (Mainly Version 4 of both browsers.) It is easy to detect these browsers with PHP and send them different content. (How to actually do it is out of the scope of this article.)

Also, as I noted before, there are a couple more ways to position an element. However, these other methods have little or bad support by browsers. A very good way to position an element would be position: fixed, but the lack of support by Internet Explorer is a major turn-off for that. Otherwise, absolute positioning will pretty much get the job done since it is more flexible than other methods of positioning.

Inconsistencies Between Browsers

Most people are updated with the latest versions of their browser, so you should not be as concerned there. Different browsers will actually render your same CSS code differently. The main browser to do this is Internet Explorer which may render your borders incorrectly or interpret your "top" attribute strangely. Basically, just test your code in all browsers. I have been known to give different CSS code to Internet Explorer and Mozilla on some occasions, although you should try to avoid this if at all possible.

Add the <div>'s in

Adding in the <div> tag to tie all this together is simply accomplished using this:

<div class = "leftnav">

// Insert Links


That's it! There is no other secret to writing the (X)HTML part of the page. Most of the work is done in the CSS file. Also, remember that with proper absolute positioning, you can put the <div> tags anywhere on the page. (A lot of people put there content before there layout links because it makes the site look better on the search engines.) Here is a simple XHTML page which will have a three column layout with the right CSS code.

<div class = "content">

// Content


<div class = "leftnav">

// Links


<div class = "rightnav">

// Links


Now, if that isn't simple, I don't know what is.


Well, I hope you learned something about designing web pages with CSS and I hope you decide to implement it on your site. CSS is a great tool and offers a lot of flexibility in how your website is displayed.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials