css question

[johnlmoran]

i am just now learning css and i had a question (don't look at the site in my signature and critique my efforts, it was designed before i began trying to learn css).

here is my question. does css positioning replace using tables for design? by css poistiong i am refering to this:

http://www.w3schools.com/css/css_positioning.asp

am i to understand that if i set the absolute position of the elements in a page, they will be more compatible in various browsers? meaning, if i set everything with an absolute position ni pixels, will it look the same across firefox, opera, ie, etc.?

if i am offtrack, how exactly do you handle the layout of your page with css?

thanks for any help, it is very valuable to me,
john

[vwebworld]

Hi,

Yes and no

It is argued that CSS can replace the need for tables,
and indeed a lot of great site designs use CSS rather
than tables.

I use a combination of both.

As far as cross browser support for CSS...
if you look at the link you provided you'll see
what bowsers/versions support specific CSS properties. In general, there is wider support for
CSS1 properties (vs CSS2).

~Roland
properties

[vwebworld]

Browser Notes: Notes in IE 4.0+:
Absolute positioning does not work with inline elements, lists, and table cells
If Absolute positioning is used you must specify the "top" and "left" properties
Relative positioning does not work with table cells

Notes in IE 5.0:
Absolute positioning works with inline elements, lists, and table cells

Notes in Netscape 4.0+:
Relative positioning does not work with list items, form fields, hyperlinks, images, table, or table cells
Absolute positioning does not work with list items, hyperlinks, or form fields
If Absolute positioning is used you must specify the "top" and "left" properties

[johnlmoran]

hi roland, thanks for the reply.

after some thought, reading the various postings here in the forum, and articles on the web, i think that i would rather err on the side of being too advanced than behind the times (not that i am in any danger of being too advanced yet). from the soudns of it, css will be the standard eventually.

so i guess the question is changed to this, if i use absolute positioning in css, will it look the same in ie 4, nav 4, and beyond? i realize that ie5.x has some unusual behaviors (the box model problem, float model, etc.), which hopefully i can navigate around (at least the box model anyway). i am just trying to figure out how i can make my pages appear equal in the browsers without using outdated methods. hey, if i'm going to learn something, it might as well be the new way to do it right?

thanks again,
john

[vwebworld]

Hi John,

Well, I wouldn't call tables outdated just yet ;-)

if i use absolute positioning in css, will it look the same in ie 4, nav 4, and beyond?

If you look at my prior post, you'll see some "differences"
in how various browsers handle certain positioning
properties. And w3schools is a good resource for
that information.

~Roland

[matauri]

John

You do good to look forward & not backwards. But you still have to cater to the past a little.

You can achieve it and in all browsers, but it does take some fiddling in some cases (and I dont mean hacks!)

Here is one page of an upgrade I am doing to my site. I decided to take this on as a bit of a project & try different ways. It's tablesss/xhtml/css, and pretty sure I have covered most of the browsers in being compatable. And for those pre CSS its still in legible format. And it shrinks pretty well too.

It was a search to find some bits & pieces to making the code read better, but eventually it got there. So now I have one working model for other sites.

I think the trick is in getting that first one that will be 'right' :-)

[johnlmoran]

(and I dont mean hacks!)

this may sound naive, but is this a reference to the box model? is this kind of thing frowned upon? it seems to me like a simple solution to handle width of elements in various browsers, but maybe i am not seeing the big picture.

also, the basic gist i am getting from the responses is that if you don't spend a lot (read: months and months) of time perfecting it and trying to fix the small differences between browsers, it is not really something that a novice like myself should be undertaking. i am not afraid of a little work, but it seems the jury is still out on css v. tables and that very few are designing solely in css.

thanks for your replies,
john

[Niko Holopainen]

I have to agree with Matauri about making one set that works and then modifying it some =) It took me quite a while to perfect the current layout so that it works compatibly and renders similarly if not absolutely the same on various new browsers and downgrades neatly.

I for one use purely css tayout but then again, our layout is quite simple =)

Regards,

[speed]

From my point of view I avoid all hacks, such as the box model hack, that rely on bugs in a browsers parsing ability. I simply believe that it is bad practice to rely on a bug to fix a bug!

As for the question of time, the first layout will seem to take forever but the more you do and the more you learn the quicker you will get.

We were all novices once so don't let that put you off. Just start simple, learn the techniques and like matauri said get the first layout and use that as the basis for the next.

I use pure CSS for layout and would never choose to go back to tables. A pure CSS example

[johnlmoran]

Thanks for the input everyone.

I guess I will take some time over the next few months to attempt a purely css site and have it reviewed here on the forum to see how I am doing. Even if it doesn't end up being my final design, I suppose I would probably be pretty decent at css by the end.

I did not realize that using the box model fix was a hack or frowned upon. I guess I will just keep all my borders thin or non-existent and that will take care of the difference in width between browsers.