To all you CSS Pros,

I have designed a layout in ImageReady, exported it as CSS/XHTML and edited it in Dreamweaver. (Info: I am not using any tables).

Here is the source URL: www.bionicmedia.us

My problems:

1.During the editing process something happened and my left_spacer image doesn't lign up correctly in the following browsers: Netscape7.1 + Safari on a Mac.

I tried to look over the style sheets but couldn't find any error. Also I am still very new to CSS and XHTML.

2. In regards to text sizes I would like to inquire about the ideal solution to ensure the text looks
as close as possible to the intended size across browser families, which should be about 10 px.
Right now I defined it as x_small but don't know if that's the right thing to do.

3. Last but not least I would like to center the entire layout that I imported. I tried several things but nothing seemed to work.

4. Is there a way to define a border of the entire layout? I went into each layer style and defined the
borders that way, but there must be an easier solution...

I would greatly appreciate some advice on how to fix these nasty problems...
Thanks guys!

I'm not sure what the left_spacer image is you're referring to, so I'm afraid I can't help with that one.

There's no fool-proof way to guarantee text size as this is usually controlled by the browser settings set by the user and toggled with manually when the viewer wants to resize type. Your only sure-fire solution is to create a GIF or JPEG image of your text rasterized in ImageReady, which is is slower and heavier to load than text, but allows to choose size, color or typeface.

Centering your layout can be tricky. I usually like my layouts centered. First, make sure your content can fit inside a standard browser window (usually 640x480 or 800x600). Then in Dreamweaver, set up your page properties to have to no margins and place a 1 row x 1 column table that is 100% width and 100% height in the properties inspector.

Next, make sure this master table (your can call it 'browserwindow') has its content centered horizontally and vertically. In here, you'll need to nest a second table sized large enough to accomodate your content. The contents of your second table should now be centered in the browser window. Your can then specify a border size and color for this second nested table as desired.

Let us know how it works out.

The site is quite compelling. I also designing a site template in Photoshop/Image Ready and trying to find out what elements should be put in CSS sheet(s). Do you have an info source for the basics on that issue?

As long as you don't mind excluding the very small number of old browsers that have a hard time handling CSS, technically your entire layout can be done in with Cascading Style Sheets. There are some more sophisticated CSS techniques that even modern browsers are incompatible with, but if you keep to the most basic elements like images, type, positioning, et cetera, it will most likely work fine.

Centering your CSS layout inside a browser window apparently involves the combination of CSS and JavaScript, which can be figured out with right resources.

Right now, I'm reading the excellent 'DHTML and CSS for the World Wide Web: Third Edition' by Jason Cranford Teague in the Visual Quickstart Guide series from Peachpit Press. This will give lots of easy to understand information and works as a great reference manual with plenty of tables of CSS standards, values and compatibilities.

Great online resources that I've also found useful:

CSS Layout Techniques: for fun and profit
glish.com/css/

CSShark
www.mako4css.com/

Web Page Design For Designers
www.wpdfd.com/

Webmonkey
webmonkey.wired.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html

Hope that helps!