DIV tags replacing layout tables

Adv of DIV tags over borderless tables?

[Gordon2004]

Hi all,

I'm a very new web designer (just upgraded from FrontPage to writing my own HTML) and so am pretty inexperienced and would like some help.

I am designing a site using a borderless table to keep my links on the left and content in the center. I did this as I read everywhere that it is the best method. But now I'm reading about people creating table-less websites using CSS. Is there a reason for this besides maintainability? And so if I just use DIV tags to poisition the content?

Thanks for your help!

[Gordon2004]

Hey Photon,

Thanks for your reply. I've spent pretty much the whole day trying to master CSS, and I'm happy to say I'm finally getting there. I really am impressed by their capabilities!

The only concern I have is compatibility. Can most browsers use them? My site looks fine in IE6 and Opera7, but I haven't tried it in any older browsers. Would you suggest just assuming most of visitors will have CSS compatible browsers?

PS. Notepad kicks FrontPage's butt for designing webpages, I'm so glad I've seen the light ;)

[photon]

Most modern browsers (versions after 4.x) will handle CSS pretty well; older versions can have major issues with it. Another great bone of contention is whether you should go through the hoops of trying to get things to work in the older browsers. Personally, I don't worry about them. Depending upon the type of users you're building your page for, you may have to be more forgiving. Most browser statistics show the older browsers to be less than 5% of the total; some people in this forum have reported that figure to be greater than 20% on some of their sites.

Having said that, there are still some issues with modern browsers. The most popular ones (IE5 & 6) are perhaps the least CSS compliant of the modern browsers. You can do searches on "box model hack" and "peekaboo bug", just for examples, to get an idea of some of the issues and the workarounds.

Don't let any of that discourage you though. In practice I've found that encountering such bugs is relatively rare (and having a correctly formed DOCTYPE helps a bunch), and well-written CSS will generally allow a page to be readable in an older browser, even if it doesn't look as "pretty" as in a more capable one.

I would suggest that you use Opera (my preference) or Mozilla Firebird (go download it if you haven't yet) to look at your pages as you're coding. Once you get a section working in them, check at out in IE and make any necessary tweaks. Pages that look great in Opera or Firebird will generally look the same (or close to it) in IE; the reverse isn't necessarily true. Your approach may differ depending on whther you see IE's rendering of CSS as "forgiving" or "sloppy". ;)

<added>
Check out HTML-Kit for your coding. It's a Notepad that's on steroids, just for HTML (and CSS, and PHP, and ASP, and...) coding.
</added>

[SuzyUK]

Hi Gordon2004 - (nice forward thinking nick there ;))

photon is quite right and has given you some great advice..

can I just say (without starting the "holy war"... hehe) that using a "borderless table" may very well be the best way to start.. you can still learn CSS by styling the content/elements that appear inside your table before learning some of the major issues/discrepancies that come with CSS-P

I've spent pretty much the whole day trying to master CSS

I've spent the best part of 4-5 years and I'm still learning ;)

Suzy

[Gordon2004]

Hi Suzy,

Thanks for your comments. I actually spent the last two weeks making a borderless table site, but now I'm re-doing it using CSS instead.

But I've run into a problem:
My page displays fine on IE6 & Opera7. In Mozilla1.5 however, it doesn't load the background. The background is loaded using an external CSS file like so:

body {
margin: 0;
padding: 0;
background-image: url("back.gif");
background-repeat: repeat-x;
}

I'd really appreciate it if anyone has any solutions. Like I said I am new to this so don't be afraid to suggest some simple solutions ;)

[photon]

<div id="Oops" style="posting:double;"></div>

[edited by: photon at 1:10 am (utc) on Dec. 2, 2003]

[photon]

Here's a previous thread on the subject: [webmasterworld.com ]. And here's a discussion on another site: http*//www.mezzoblue.com/tests/mozilla-bg-bug/.

If none of those help, let us know.

So see, it's not only IE that has CSS bugs! ;)

It just has the most.

[Gordon2004]

Thanks for the suggestions Photon, unfortunately none of them worked ;(

My background is a gif, but it doesnt use transparency. I tried using a jpg background instead but this didnt help either. I was confused by your first post:

<div id="Oops" style="posting:double;"></div>

How would I use that (sorry - I'm a bit slow)...

If I use HTML to insert the background it looks the same in IE and Opera, but Mozilla displays the background and messes up the placing of my other images I positioned using CSS...

I'm stumped...

[photon]

Don't worry--the people who are smarter than me will be along shortly....

<added>
This is a long shot, but try removing the quotes around the image name.
</added>

[Gordon2004]

Yeah, I've removing the quotes, tried pretty much everything do with altering the background. It just doesnt display it all. If I look at the stats of visitors to my current site only 3% use Mozilla. I think I'll just ignore it for now and carry on developing the site. If there is a fix I'm sure it'll be in the CSS which I can always change later.

In the meantime if you happen across anything please let me know.

Thanks for all your help. This site kicks ass!

[Gordon2004]

One more request:

Do you know any good tutorials on converting HTML to XHTML. At the moment I'm using CSS with plain old HTML, which doesn't really allow me to use it to its full potential.

Thanks man

[Gordon2004]

I fixed it!

I just realised I forgot to take off <style type="text/css"> tag when I converted from internal to external CSS. So Mozilla ignored my first statement (which was my body one).

So in a way Mozilla was actually the only browser to display it correctly...

Anyway, if anyone sees any HTML --> XHTML tutorials I'm still on the lookout.

Thanks guys!

[SuzyUK]

So in a way Mozilla was actually the only browser to display it correctly...

in my experience that is definitely, usually the case ....

You might not like what you see but it (Moz!) is usually right ;)

Suzy

[MatthewHSE]

You might not like what you see but it (Moz!) is usually right ;)

One of the first things I learned when I switched to coding in plain text was to use Mozilla for testing purposes, then work out the kinks for IE. Much easier than to test in IE and then fix your mistakes in Mozilla. A little rhyme I made up and found useful:

If you test in IE and it works,
Then test in Mozilla and it breaks,
You'll normally find that it's not kinks at all,
But is instead your own mistakes.

And I know you already know that, Suzy, but I mention it for any others here who might just be starting out! :)