Here's the deal; I need someone to convert a simple xhtml/css template into HTML tables. I am not at all good at HTML table layouts, so it will take far too long for me to do. I would like to exchange services with a HTML table coder. You do this conversion for me and I will do equal amount of work for you; Valid XHTML/CSS work. PM if you are interested, I need to get this done soon. The conversion is only one days work.
hee hee, I write simple html tables (for my own use, never professionally), but I don't know CSS. I learned HTML in one day. I can't get my brain wrapped around CSS. It seems like they should tie together better. I don't think you really want me to do it, but if you don't find anyone else, I'll throw it together.
They do tie in together, contentedhousewife. How familiar are you with HTML semantics? CSS is a pain in the neck because of the various browser bugs (not all of which are associated with Internet Explorer) and because people advocate coding for the current version of Browser X (usually Firefox, sometimes Opera) and hacking for Browser Y (usually Internet Explorer). This is a bad practice. If you like, I can help you learn how to code with HTML and CSS (and learn a thing or two about objects as well, which will really help should you take the leap into JavaScript later on). Now, as for the original poster's request, how deep do you need your HTML tables to go? I'm presuming this will be for layout purposes, so will you be needing the tables as a baseline, with CSS handling the rest, or will this be a full-blown 1998 style table based layout?
Dan, that's an opinion and not a very commonly held one. You aren't coding for firefox just because it's a great browser, you're doing it because it has the best, consistent, CSS implementation for layout (advanced features notwithstanding) so it means your code is generally to CSS spec. How else are you meant to code it? For example your excellent 3 column layout you sent over contains plenty of hacks for IE. How did you code that? Did you start in IE then correct it in firefox?
Adam, the example I sent you via PM the other day contains only two hacks (a hack in my opinion is a block of code given to one browser that is hidden from the others), the first one was to compensate for IE's inability to understand min-height (through version 6), and the second was the simplified box model hack, which I also noted (rather underhandedly of course via CSS comments) could be avoided entirely by not setting a padding on the sidebar. For the benefit of everyone else, here's the code that Adam and I are talking about (the hacks have been highlighted for the sake of clarity): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Three Column CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="keywords" content="Keywords go here" /> <meta name="description" content="A description of this page goes here." /> <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" /> <style type="text/css" media="screen"> /* Stylesheet written by Dan Schulz on 28 January 2007. Stylesheet last modified by Dan Schulz on 30 May 2007. Stylesheet embedded into the HTML file for educational purposes only. */ * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #FFF; color: #000; } #container { margin-bottom: -3em; min-height: 100%; } [b]* html #container { height: 100%; /* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */ }[/b] html>body #container { height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */ min-height: 100%; /* squashes an IE 7 bug */ } h1 { background: #FCF; color: inherit; padding: 0.25em 0; } #menu { float: left; list-style: none; position: relative; /* this is needed to set the z-index */ width: 8em; z-index: 1; /* this is needed to fix a depth-sorting error */ } #menu li { float: left; /* IE 5.x bug fix */ width: 8em; /* this is needed since the LI is being floated */ } #menu a { background: #F66; color: #FFF; display: block; height: 1%; /* IE 5.01 bug fix */ text-decoration: none; text-indent: 0.25em; width: 100%; } #menu a:hover { background: #FF5; color: #000; } #content { float: left; margin: 0 -13em 0 -8em; width: 100%; } #content .section { background: #CCF; color: inherit; margin: 0 13em 0 8em; padding: 0 1em; } #content p { text-indent: 1.5em; } #sidebar { background: #FFC; display: inline; /* IE 5 and 6 bug fix */ float: right; padding: 0 1em; /* this is what causes the box model problem in IE 5.x */ width: 11em; } [b]* html #sidebar { /* IE 5.x Box Model Hack */ width:13em; w\idth: 11em; }[/b] #sidebar p { padding: 0.25em 0; } #clear-footer { /* needed to make room for the footer */ clear: both; height: 3em; } #footer { background: #6CF; clear: both; color: inherit; height: 3em; } #footer p { padding-top: 1em; text-align: center; } </style> </head> <body> <div id="container"> <h1><span></span>Main Heading</h1> <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <div id="content"> <div class="section"> <h2>Section Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus. </p> </div> <div class="section"> <h2>Section Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus. </p> </div> </div> <div id="sidebar"> <h2>Sidebar Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. </p> </div> <div id="clear-footer"></div> </div> <div id="footer"> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </div> </body> </html> Code (markup): If you don't want the SBMH in the stylesheet, then remove the padding from the sidebar DIV and apply it to its children instead (though due the presence of the heading, you'll either have to use another value such as px or wrap the contents in another container). Note that everything else which people normally "hack for iE" is not only sitting alongside the other style declarations in their rules, but are also not interfering with the rendering in other browsers. That's what I like to refer to as "variable initiation" rather than hacking. Also bear in mind that the stylesheet is also a work in progress, and that some portions of the code (such as the Gilder/Levin image replacement technique I plan to use in the header) currently are not present, as I am working on this in my spare time as a personal exercise. Oh, and to answer your question about how I code, I test in IE, Firefox, and Opera as I go along, giving Safari and Konqueror a cursory check every once in a while to make sure that everything works fine there as well too.