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
</div>
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>
<div class = "leftnav">
// Links
</div>
<div class = "rightnav">
// Links
</div>
Now, if that isn't simple, I don't know what is.
Conclusion
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. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
