Download and try the trial of Adobe Dreamweaver and see if you have a similar experience.

I would agree that "best practice" css and div based web development can be much harder than the old table based layout. It requires a different way of thinking about page layout...if you try to apply the table mindset to a css layout, you are going to have a hard time.

Also, I'm a believer that the WYSIWYG tools, including Dreamweaver, aren't great at "pixel perfect" CSS layouts. For some layouts...if you need pixel perfect...you may may need to hand code. I've seen some great CSS layouts I'd never be able to create in Dreamweaver.

If you are asking this type of question, which you are...I would suggest you go with a design where minor pixel differences does not make or break the design.

Divs don't conform to 'WYSIWYG'

I understand your frustration with CSS (not Divs) but divs are not designed to conform to WYSIWYG. What WYSIWYG editor are you using?

I keep hearing people saying 'oh Tables are so yesterday, you should be using DIVs instead'

Tables are PERFECT for tabular data

Please help, because DIV are unavoidable and I have to start using them sooner or later. What am I missing? how should I work with them? Is the problem with FrontPage itself?

Yep... in all probabilty the problem is with FrontPage...

Note that the term WYSIWYG is a MYTH - and FrontPage is perhaps the worst offender! (for a rather humourous take on the issue, see [ars.userfriendly.org...]

If you want to maximise the likelihood that your files will be compatible across all browsers, platforms and media, then use a text editor

Sure, with text editors there's a steep learning curve - at the outset. However, if you're designing sites with maintenancein mind, then you'll save heaps of time in the long run - mainly cos when (not if) something 'breaks' you'll have a much better idea of where to look when you want to fix it

:)

WYSIWYG editors aren't best suited to CSS designing. Although they should be getting better. A WYSIWYG preview screen is only able to "mimic" one browser, that browser is usually IE, although I haven't used a WYSIWYG for years so it may be possible to adjust your settings so it uses the browser of your choice.. whichever you choose it is still not a perfect browser compatible view.

As has been said previously CSS design is a different mindset and Dreamweaver used to (does it still?) use Absolute Positioning as a default, if that is what you're generating then yes it will very probably be giving you headaches, as that is not the proper way to use CSS for an entire page design. I've seen some real nightmare pages generated this way, as the source code can actually be all over the place just to show a pretty picture on the screen. Not good for those that may be viewing your page on smalldevices, in RSS Readers, Text browsers etc.

Absolute Positioning is basically like taking a sticky note and sticking it onto the page, then you need the z-index to make sure they stack up properly. If your "sticky notes" or divs do not overlap then you should not need to use any z-indexes, the default will do, it's only really useful if you are actually trying to create a visual overlap effect or creating drop menus or tabbed boxes.

Anyway, I usually tell anyone starting off with CSS to not use their favourite editor until at least they've learnt enough about CSS to teach their WYSIWYG how they want it to code for them. A WYSIWYG should only be a tool to help you make your life easier it will not however teach you how to properly use DIVs, or any other HTML element for that matter ;)

The thing with CSS and DIVs is that the page should be able to be read in a logical format, heading, paragraphs, lists etc.. or even better imagine listening to it or see if you can get a free screen reader trial.. listen to your page with the table design, see if still makes sense, or if those TD's are hindering the understanding of the page (if it does this might apply to SE's, text browsers too)

Then imagine rewriting the page with proper page elements <p>, <hx> and splitting the sections of the page into logical DIVisions, (a DIV = a logical on page division) say header, sidebar, etc, then try listening to that that page again (no design needed yet!)

Once you have a page that you can understand and can be easily read/listened to then in comes the CSS which is no more than a suggestion to the visual browsers as to how to you might like it to look.. I agree with post#2 that pixel perfection should be avoided. There should be no need at all to Absolutely Position every element because for example the header should logically be at the top. This is called going with the natural document flow, floats and margins can be better used to avoid changing the source order of your logically coded page.

I'm not anti WYSIWIG I just get on better without one, others will say the opposite but most of them will still possibly agree they only use them to enhance their workspeed/coding speed not to create beautiful CSS designs.

sorry, probably not what you wanted to hear, but please don't give up on CSS just because FP can't cope with it. Any WYSIWYG is just a tool and not all tools suit all jobs ;)

You are using a progam that is about 10 years out of date and was discontinued years ago, not sure why you would expect it to conform to current standards.

I have seen none of the problems you describe when using the current version of Expression Web. And like others said, forget pixel perfect - if you try to design like that, then you will see problems no matter what editor you use.

Don't give up on div's too quickly (CSS really). The cool thing with divs is that you can put all your top header navigation into a div and then put that code right at the bottom of your page, even though the menu displays at the top... Now why would you want to do that? Well, apparently it helps somewhat with SEO. The search engines believe that the nearer content is to the top of your document, the more important it is.

So, by moving your menus, etc, down, you can move your content up in code, but the display is still the same....

Of course there are other benefits like being more adequately able to make changes to your whole site through one css files, etc....

John

[edited by: tedster at 12:33 am (utc) on Jan. 8, 2010]
[edit reason] no personal links, please [/edit]

The cool thing with divs is that you can put all your top header navigation into a div and then put that code right at the bottom of your page, even though the menu displays at the top...

Well, to be fair, you can do that with tables, too...

I reckon it's only valid to argue against using tables for non-tabular data... which, of course, is pretty much everything on teh interwebs... so it's a common argument

Front Page has been superceeded by Microsoft Expression Web. That works fine for me using DIVs and CSS. And as far as I can see it does give pixel perfect results.

@lavazza...

You can do that with tables too? I'm trying to imagine how, and I just can't. I thought that tables we're pretty set in their display order.

Do you have an example, I'd love to see how its done?

Thanks..

John

I cant help but add to this discussion, I stopped using front page soon after it crashed on me for the umpteenth time. I then went to dream weaver and after about a month of it telling me that it knew best, and kept altering things to *its* default settings, I have gone back to basics, and now only use a text editor(TextPad, though others suit other people, thats my preference), and the F5 key for previews.

As for divs/css, I personally did have difficulty with them for a couple of hours, and then, the penny dropped and all became clear to me, and since that day I have been a purist and make a concious effort not to use tables.

I will point out though, that if it had not have been for the experts here, I would probably still be struggling.

MRb

@ SoftSmart:

Google <thead> and <tfoot> tags.

Just be aware they have some... odd... interactions with margins depending on your browser.