Tabeless CSS design 101? How to...?

Tabeless CSS design 101? How to learn fast?
Please, help.

Hi, I know I can 'Google it'

• HTML tables allow me to 'put things exactly where I want'
• 'Modern CSS' & 'DIV's' waste my time since I don't know how to use them
• I learn by 'trial & error' much more than any other way
• So far, Trial & Error isn't working so well with DIV's compared to 'good old tables'
• Tables are really easy to modify size, location, etc...
• Changing DIV's "breaks the layout & makes a mess"
• What are the key(s) to easy modification & precise control of layout, please.

Any advice on a fast, easy way to break the table habit and learn the more modern 'right ways?'

Thank you very much

 

I learnt by asking, trial & error, and reading up on the subject vi purcashing books etc. Also it helps to get opinions on layouts if you are just starting, there are many example of simple css layouts throughout the Internet.

You will encouter errors, mutiple browsing rendering issues, but dont give up. Have a break or post on a forum which will allow more experinced members to point out isuess.

Learn the standard three column layout first, and progress from their.

Ash

 

So why haven't you?

• Yeah, maybe, with enough convoluted code that's impossible to maintain.
  
  
  Whose fault is that?
  
  
  It's good to learn from your mistakes. It's better to learn from other's mistakes and from their good example.
  
  
  If you don't have a knowledge base, how could it? Are you going to build a hi-def TV by trial and error if you don't even know about electricity?
  
  
  Yeah, right. Change the width of a single td and watch the whole construct change with it.
  
  
  No, it doesn't, unless you haven't bothered to learn anything about html and css.
  
  
  Short answer? Learn css. The Google search you so disdain will lead you to any number of tutorials to get you started and to fixes for the issues you'll run into. And "precise control of layout"? Puh-leeze. That's a print concept. The web is dynamic. How can you talk precise layout when the end user has the total power to override anything you do? Will that precise layout survive a font-size increase? Or, your client may change the amount of content every day.

Yes. Study two or three html tutorials to learn well structured, semantic markup. If you use table layouts, you cannot be semantic nor well structured. You'll have to unlearn all your bad habits. Skip the parts about table layouts, iframes, frames, and font or center tags. They're obsolete.

Then, when you've learned to mark up your content perfectly semantic and without any presentational/layout related elements or attributes, do the css tutorials. Skip the parts about absolute and relative positioning. You won't need them or know how to use them until you've become at least an advance intermediate coder.

Now, for a prime directive: IE, including v.7, either doesn't support, or screws up more than half of css2. If you want to write good code, you will use a modern browser such as Firefox, Opera or Safari as your primary test bed. Right now, Firefox is the best of the bunch. If you develop in IE you will learn bad habits and turn out crap for code. It is often impossible to make IE based code works for modern browsers. It is a simple matter to start with good code, written for those modern browsers, and apply hacks and work-arounds, or just plain dumb things down for IE.

The ball's in your court, now. You may adopt a professional attitude and make the effort to learn your craft, or remain a dilettante.

cheers,

gary

 

dilettante

Definition:
"An amateur, someone who dabbles in a field out of casual interest rather than as a profession or serious interest."

• A very valid point, Gary.
• Thanks, for the big effort (I gave you green rep)
• Internet 'skills' are a fun hobby for me & I'm taking the effort to learn (many things) every day.

...prime directive?

Star Trek: Next Generation did you used to watch it (or the re-runs)?
The other later series went downhill, but Star Trek: Next Generation had some great episodes.
Are you a fan?

Sweet
I'll assume your advice is accurate and do this (please, feel free to debate)

• I can use 'the evil tables' & make my layouts look (almost) exactly the same in FF & IE
• Within reason I can place everything 'exactly where I want to'.
• Even if table layout code is 'somewhat bloated' modern hosting servers can handle the load just fine.
• Keeping in mind all the 'nasty, yet true' things you say about IE...
• What is really all so bad about tables?
• I'm a 'semi-advanced hobbiest', and...
• ...you tried real hard, yet pretty much convinced me to stick with tables for now.

Summary:
I'm aware many people 'despise tables', your scathing review of IE (combined with modern CSS) leaves me still wondering why?

Thank you very much,
MGH

 

This is a nice toturial:
http://meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html

 

Thanks for the responses people. You have helped me out aswel.

To the op: Just keep going at it, read heaps of tutorials, learn about the box model layout and join an irc channel that helps people with this sort of thing

 

I'm writing one up for the OP right now, give me some time.

 

Very detailed, looks good.

I have 'way too many' bookmarks.
This one went in a special folder, where I'm sure to get back to it.
Thanks
~~~~~~~~~

/BTW:

Approach HTML size CSS size Page weight
HTML-only 10.36KB -- 10.36KB
HTML+CSS 4.30KB 2.33KB 6.63KB
Savings 6.06KB -2.33KB 3.73KB

The % savings on file size is pretty 'huge' (HTML: 58.5% reduction)

• The actual 'transfer' saved is ~6.06KB
• IMO, Seven years ago, this (6KB) would be a huge factor
• In 2007 I see it more this way:
• HTML doesn't crash servers (very often), PHP does.
• I seek a 'healthy debate' & for now...
• Several of my 'table-rich' designs are still 'heading towards the Information Highway' pretty soon.

• As a 'semi-serious' hobby-level webmaster...
• ...tables tend to serve me really well.

• There's so many other cool things to learn
• CSS and DIV's might be for some people, but I still don't view them as 100% necessary (or really understand the people who do).

 

That tutorial is extremely helpful thank you.

 

Your bandwidth savings are understated. If you save x amount on the initial download of the document + css, ensuing requests do not include the css as it has been cached. For a reasonably busy site, you may be easily talking gigaBytes difference. But its not just total transfer, it's also about transfer rates. With reduced requirements for bandwidths, the requests per unit time increases, giving a lower latency. Read that as quicker response times. With high bandwidth rates, speeding server response times and reducing the number of requests (not reloading that cached css file that only the first page needs) is a significant improvement on the total download wait.

HTML never crashes the server, and what does PHP have to do with the discussion? If you have an SSI or PHP error, you just get an error message. That's not a crash, that's a Good Thing.

No, you're being a troll.

Being a webmaster has nothing to do with web development. The webmaster is the site's caretaker. And, no, tables are not serving you well; you're just getting by. That something does not cause you specific harm does not mean it is good.

That you lack understanding is obvious. For people who do care, it is, as I said before, a matter of professionalism. The professional uses best practice in his work.

I care not a fig if you want to use tables and otherwise continue on your ignorant way. I do care that you do the community a disservice by spreading your ignorance as if it had value.

cheers,

gary

 

Using HTML and CSS requires literally un-learning everything (and I do mean everything) you know about HTML, so you'll want to start the fire sale now while the store's intact.

HTML elements have meaning; for example, a DIV is a division of a page, a heading is a section title (or sub-title), and a P is a paragraph. Tables are meant for tabular data (which in some cases can include forms), while lists have their own uses (among them menus, since a menu is just a list of links at its very core). This is called semantics.

Now, looking at a simple Web page from a semantic point of view leads to a whole new perspective on things. Take the following for example (warning: may not look perfect cross-browser):

========================================
|                                      |
========================================
|         |                            |
|         |                            |
|         |                            |
|         |                            |
|         |                            |
|         |                            |
|         |                            |
|         |                            |
========================================
|                                      |
========================================

Code (markup):

This is a typical two column layout. In most cases, the top would be the header, the left side would be the menu, the right side would be the content, and below that would be the footer. Using semantic HTML, this is best coded like so (I'm just going to concentrate on what's between the <body> and </body> tags here):

<h1>Page Title</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>
	<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 Title</h2>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
	</div>
	<div class="section">
		<h2>Section Title</h2>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
	</div>
	<div class="section">
		<h2>Section Title</h2>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
	</div>
</div>
<div id="footer">
	<ul>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
		<li><a href="#">Footer Link</a></li>
	</ul>
	<p>
		Copyright &copy; 2007, The Monster Under the Bed.
		All Rights to Scare Unsuspecting Children Reserved.
	</p>
</div>

Code (markup):

The H1 element is used as the page title (though it is often used as the site title). The UL with the ID of menu is the site's main menu, and is given an ID value of "menu" to identify it as the site's main menu (many tutorials use "nav" instead, but I prefer "menu" since anybody should be able to know what a menu is). As I said earlier, a menu is a list of links, so why not mark it up as such?

After that is the first use of a DIV. It's given an ID of content, since it will hold all the main page content. Its contents are further broken down into other DIVs, which are given class names of "section" (section of the page content in this case). Each "section" DIV has a H2 that identifies what that particular block of content is (a title basically) about. If you have a sub-section, you could easily add H3s into the content, like so:

	<div class="section">
		<h2>Section Title</h2>
		<p>Page Content.  Page Content.  Page Content.</p>
		<h3>Sub Section Title</h3>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
		<h3>Sub Section Title</h3>
		<p>Page Content.  Page Content.  Page Content.</p>
		<p>Page Content.  Page Content.  Page Content.</p>
	</div>

Code (markup):

H1 should be used no more than once per page (since it is the page title), while the others (H2-H6) should be used at least twice if possible (I'm sure you remember outlines from school - it's the same premise here).

Following the content DIV is the footer. It contains an unordered list for the footer menu (copyright stuff, legal info, FAQ/Help, the usual footer stuff) and the copyright notice. This isn't going to change from page to page, so there's no need to add an ID to the menu or the paragraph inside it, and a H2 isn't necessary.

Turning to the stylesheet, things begin to become (somewhat) complicated (I'll walk you through it). I start by using something caled the "universal selector" to remove all the margins and padding from the Web page (the margins and padding are the only properties you need to adjust with this selector):

* {
    margin: 0;
    padding: 0;
}

Code (markup):

This gives me total control over the margins and padding of every element on the page (since browsers will use their default values otherwise - with lists for example, some browsers will apply 16px margins to indent the list items, while others will use padding to achieve the same effect). The next thing I do is style the BODY element. This is where my font declarations for the page go:

body {
    background: #FFFFFF;
    color: #000000;
    font: 100%/1.2 "Lucida Console", Verdana, Arial, Helvetica, sans-serif;
}

Code (markup):

Internet Explorer uses a dull grey background if a background color isn't specified, so I had to fix that by giving it a white background color. The text needs some good contrast as well, and what better contrast for a white background color can you have than to use black text? I set the font properties for the entire page using the font shorthand, since it saves space (and typing). I set the font size and leading (line-height) to 100% and 1.2 since I have no idea how large or small the user's font size is going to be set to. Internet Explorer (up through version six) also cannot reisze text if anything other than a percentage or EM value is used (I'll cover EM in just a second). Since I'm going to be using EM for the page's layout, I need to use the largest font I can for testing purposes. I don't know what fonts will be on a person's computer (though I do have a good idea), so I went with Lucida Console. When I'm done, I'll remove that font from the stylesheet, but I won't change the EM values (why give room for fonts to settle in if I'm going to change the dimensions?).

The next thing I take care of are the headings.

h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, Garamond, "Times New Roman", Times, serif;
}

h1 {font-size: 1.75em;}

h2 {font-size: 1.5em;}

h3 {font-size: 1.05em;}

h4 {font-size: 0.95em;}

h5 {font-size: 0.85em;}

h6 {font-size: 0.75em;}

Code (markup):

Ok, you got my attention. You're probably wondering, "Dan, what about my logo? Where does that go?" If you were thinking that, I'm glad you asked. Up until this point, I've used as little HTML and CSS code as possible to create the layout (which isn't even "laid out" yet). This is one of those times where an extra element has to be added, and no it's not an IMG tag either. It's a SPAN. Yes, the humble, lowly span. I'm going to stick it in between the opening H1 tag and the heading text. I'm not going to put anything in there, nor will I assign a class or ID to it (since there's no need to - there's only one H1, so I can use that as the reference point). The trick I'm about to show you is commonly known as the Gilder/Levin Image Replacement Technique. Here's the HTML for it:

<h1>span></span>Page Title</h1>

Code (markup):

Now, in the stylesheet, I reference the H1 style rule, and make a few changes to it:

h1, h1 span {
    background:url('/images/header.jpg') no-repeat;
    height: 80px;
    width: 750px;
}
    h1 span {
        display: block;
        margin-bottom: -80px;
        position: relative;
        z-index: 1;
    }

Code (markup):

The first thing I did was specify a background image, height and width (of course they're all example values) for the H1 element and the span inside it. I also prevented the background image from repeating since some browsers apparently don't quite understand that you can't repeat something if a size has been set for the image's container and the image is the exact same size as its container. I then styled the span inside the H1 some more and gave it some unique styles. I set its display to "block" so it becomes a block level element (this is the best way to get the span to accept the width and height values that were already given it). Next I set the bottom margin to be the same as the SPAN's given height (in this case 80 pixels) so it would be pushed up into the same space as the heading. After that, I gave it a relative position so I could apply a z-index to it; the z-index is then used to place the span ABOVE the heading text. You will have to use an image with a solid background (no transparency) for this to work; combined with the extra SPAN, the background requirement is the only real drawback to this method.

Now comes the list. The first thing I'm going to do is remove the bullets from the list. This is best done using the list-style property and setting it to none. As in nothing, zero, zip, zilch, nada. I'm also going to give the list a border, a width, and then use a float to make the content DIV wrap around it.

#menu {
    border-top: 1px solid #000000; /* older versions of FireFox don't quite understand EM on border heights, so I'm using pixels here */
    border-left: 0.1em solid #000000;
    border-right: 0.1em solid #000000;
    float: left;
    list-style: none;
    width: 7.8em;
}

Code (markup):

The border, when added to the width, will cause the list to be 8 EM wide (7.8 + 0.1 + 0.1). This is known as the box model. The box model takes the base width and adds the width of the borders, margins and padding to an element. For example, if you had a box that was 150px wide, with 15px of padding on the left and right sides, your box would now be 180px wide (150 + 15 + 15). Add in 10px of margins to each side and it would now be 200px wide. Microsoft Internet Explorer does the opposite when you're not using a proper DOCTYPE in IE 6 or 7 (called "quirks mode"), and does the same in IE 5 regardless of what you tell it to do. If you say that box is 150px wide, IE (when in quirks mode, or if using IE 5) will say that box is 150px wide, no matter what you add on to it. This is important to know, since a lot of problems are caused by people not understanding what the box model really is.

Following the list itself will be the list items (if you're copying and pasting this as you go, don't worry about how the rest of the page looks just yet; I'll show you how to "fix" the "problems" in a bit). Internet Explorer 5 has been known to mess up list based menus, so applying a float and a width to the list items will cure the problem in that browser version - and no hack is necessary since the code can co-exist peacefully with modern browsers! Here's the code:

#menu li {
    border-bottom: 1px solid #000000;
    float: left;
    width: 7.8em;
}

Code (markup):

Styling the menu links is easy. You're going to want to give them a background color and a text color. Removing the underline will also be a good idea, and you may want to indent the links a bit. Perhaps you'd also like to make the entire link clickable. Here's how you do it (the colors are just examples, of course).

#menu a {
    background: #FF6666;
    color: #FFFFFF;
    display: block;
    height: 1%;
    text-indent: none;
    text-indent: 0.25em;
    width: 100%;
}
    #menu a:hover {
        background: #FFFF55;
        color: #000000;
    }

Code (markup):

The background and color are self-explanitory. The display of the links were set to block, so they'd behave like block-level elments. Internet Explorer has a "has-layout" problem, which is easily fixed by adding a height or width (in this case, both) to the style rule. The text-decoration (set to none) removes the underline from the links, and the indent allows the text to be off-set without having to add padding, which can break the layout. For the hover state, all you have to do is add :hover to the end of the A selector, and then put in a new background and text color. There are five main psuedo-selectors (which is what :hover is called): :link :visited: hover: active and :focus. They MUST appear in this order if you use them. "A" is also a short-hand, and will apply to all states if they're not explicitly stated (like in my example).

Ok, let's head to the content. The "content" DIV is already being floated to the left, but I'm sure you don't want the content to wrap around the menu, right? Applying a left margin equal to the (adjusted) width of the menu will fix this:

#content {
    margin-left: 8em;
}

Code (markup):

That's all you have to do for the content DIV. The section DIVs and the child headings are where the rest of the styling will go:

#content .section {
    margin-left: 0.5em;
    padding: 0.25em;
}

Code (markup):

The first thing to do is set the margins on the .section class. A left margin of 0.5em should do the trick. This will provide some space between the sections and the left edge of the content DIV (it can be used to create some interesting visual layouts). If you don't want it, feel free to get rid of it. The padding on the other hand is set to 0.25em on all four sides. Since the width is already set to 100% by default (in the browser's style sheet) you don't have to worry about this declaration breaking your layout, especially since the section DIVs' container happens to be the content DIV.

The H2-H6 tags can be further styled, but I like to set them apart by just telling the ones inside the content DIV what to do (in case you were to add a right column to the mix later). What I do is reference the content ID, then the element I want to modify. In this case, the H2.

#content h2 {
    padding: 0.25em 0;
    text-align: center;
}

Code (markup):

In this example, I set the text to center, and then set the top and bottom padding to 0.25em (or 25% of the current font size), while leaving the left and right sides alone. Just an example.

The paragraphs need some space as well, and what I do is add top and bottom margins to them. I also like to indent my paragraphs as well, which is done like so:

#content p {
    margin: 0.5em 0;
    text-indent: 1.5em;
}

Code (markup):

Which leaves us with the footer. The footer will need to have the float cleared, so I'm going to take care of that first. I also like centered footer text, so I'm going to add that as well.

#footer {
    clear: left;
    text-align: center;
}

Code (markup):

The next thing I'll do is style the footer list. I'm going to want this to be a horizontal list, so I'm going to have to change a few things. Knowing that there's only one unordered list in the footer DIV, I can just call it directly by referencing the footer DIV's ID and the UL element.

#footer ul {

}

Code (markup):

Of course, I have to remove the bullets, so for the second time, list-style: none comes to the rescue.

#footer ul {
    list-style: none;
}

Code (markup):

The list items are going to be floated, but Internet Explorer just doesn't quite get it, so I have to use display: inline as well.

#footer li {
    display: inline; /* Internet Explorer fix */
    float: left;
}

Code (markup):

Then style your links to taste. (This will probably just mean changing the link text color and other minor stuff.)

The copyright paragraph will also be styled as well. But I'll leave that up to you.

So, here's what our completed stylesheet looks like (I've indented it a bit to better show the relationship and the document structure):

* {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF;
	color: #000000;
	font: 100%/1.2 "Lucida Console", Verdana, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, Garamond, "Times New Roman", Times, serif;
}

h1 {font-size: 1.75em;}

h2 {font-size: 1.5em;}

h3 {font-size: 1.05em;}

h4 {font-size: 0.95em;}

h5 {font-size: 0.85em;}

h6 {font-size: 0.75em;}

h1, h1 span {
	background:url('/images/header.jpg') no-repeat;
	height: 80px;
	width: 750px;
}
	h1 span {
		display: block;
		margin-bottom: -80px;
		position: relative;
		z-index: 1;
	}

#menu {
	border-top: 1px solid #000000; /* older versions of FireFox don't quite understand EM on border heights, so I'm using pixels here */
	border-left: 0.1em solid #000000;
	border-right: 0.1em solid #000000;
	float: left;
	list-style: none;
	width: 7.8em;
}
	#menu li {
		border-bottom: 1px solid #000000;
		float: left;
		width: 7.8em;
	}
		#menu a {
			background: #FF6666;
			color: #FFFFFF;
			display: block;
			height: 1%;
			text-indent: none;
			text-indent: 0.25em;
			width: 100%;
		}

		#menu a:hover {
			background: #FFFF55;
			color: #000000;
		}

#content {
	margin-left: 8em;
}
	#content .section {
		margin-left: 0.5em;
		padding: 0.25em;
	}
		#content h2 {
			padding: 0.25em 0;
			text-align: center;
		}

		#content p {
			margin: 0.5em 0;
			text-indent: 1.5em;
		}

#footer {
	clear: left;
	text-align: center;
}
	#footer ul {
		list-style: none;
	}
		#footer li {
			display: inline; /* Internet Explorer fix */
			float: left;
		}
	
	#footer p {
		/* style to taste */
	}

Code (markup):

Oh, and one last thing. If you're wondering what 1em is equal to, it's equal to whatever the font size currently is. Here's a handy resource you're going to want to refer to if you choose to use it. http://riddle.pl/emcalc/ (Pixel to EM Calculator).

[Edit: It's past 1am here, and I have to be up in a few hours. I didn't test this, so if there are any errors, please forgive me. I'm sure Gary or someone else can kick me in the posterior for my unintended mistakes if there are any present.]

 

A very nice walk through, Dan.

cheers,

gary

 

You have an obvious passion for your ideas, as do I.
~~~~~
~~~~~~~
The thread (which I started) is called "Tabeless CSS design 101? How to...?"

• I'm only a bit by the spelling error.
• 101= Basic, beginner, build a foundation, looking to learn (not blindly follow?)
• The best learning, IMO, sometimes requires asking questions of, and even debating with 'teachers'.
• I might care that you do the community a mildly humorous 'disservice' by calling me a troll

Edit: Some of your advice has already helped me a lot.
Thank you.

 

Dan, you (and others) have provided a huge wealth of info.

I've given out so much green today (I'm recently re-addicted to DP) the system won't let me give out more.
The 'how to?' question seems to be fully answered.
I'm glad to get so much help, for me and others.

Thanks

 

gemini, the reduce in size of the page is very significant, one of the reasons that Google is so successful is because it loads very fast, compare it with Yahoo or others. The amount of time your application responses has direct effect on user experience. You might have a very fast connection but not all of the users on the Internet have.
PHP executes very fast on the server, a well written, rich PHP application does it's job on every request in less than a second.

DIVs are fun too, when you design with tables, if your design is complex, you will have to write nested tables, with DIVs instead you have a clear way to go, like you wrap the whole page in a DIV, you have a DIV for your header, if you want a 3 column page, you have 3 DIVs next to each other and then you have a DIV for your footer.
It's easier to understand later when you want to make changes and it's certainly looks nicer.

I assure you all the professionals are using table less design and when you start learning it, you will understand why.

I also have another bookmark that I want to share here:
http://www.stopdesign.com/

It's the guy who designs most of the Blogger's templates, it's definitely fun and inspiring for me.

Good Luck!

 

Just a quick correction (since I can no longer edit my own post):

	#menu a {
			background: #FF6666;
			color: #FFFFFF;
			display: block;
			height: 1%;
			[b]text-indent: none;[/b]
			text-indent: 0.25em;
			width: 100%;
		}

Code (markup):

should be

	#menu a {
			background: #FF6666;
			color: #FFFFFF;
			display: block;
			height: 1%;
			[b]text-decoration[/b]: none;
			text-indent: 0.25em;
			width: 100%;
		}

Code (markup):

 

Very good information.

I want to change my website to table-less too, so I will study those informations..

Thanks!

 

i gave up on this crazy idea. i already has some css done, then i realized i couldnt get it copatible with ie6, ie7 and ff at the same time, one of the bowsers always fucked up. and its even harder if you want some features like "100% height" for the main content. switched to tables because i had to stick to the designers template.

advice of the day: NEVER accept a flash designers template for html/css websites, hey come up with the craziest ideas ("but you could just use some flash navigation with rollover effects...!")

 

OH... Is it true? I just think css will have same result in cross-browser... This make me not sure to change my layout or not...

 

I always achieve the same result in IE7, IE6, FF, Opera with CSS.