Topic: Positioning and transparent gifs (Page 1 of 1)

Some say that using transparent gifs and tables to achieve exact positioning of text and images is a thing of the past... CSS techniques should be used instead to achieve the same result, they say. What do you say?

Personally I've always found the above mentioned technique very useful to get the flexibility I want. As long as you make sure you have an empty alt tag in there it's okay by me.

Definately a thing of the past. Use CSS.

I use CSS too. However there are situations where I rely on older techniques.
Let me give you a simple example of a scenario where I don't use them:

I have two columns with text and a nice thin line between them. The line has to stretch with the text and be as long or short as the longest text in either of the columns. (Eg. implementation: 3 cells with 2 for text and one for the line - done by either by inserting a 1x1 px transparent gif in a cell with a background/bgcolor value or setting the height of a gif to 100% and placing it in the cell.)

How would you do this without using tables and small gifs?
I'm open to ideas.

Without using tables and img's it could've been done using two divs with float: right respectively left and a 1px border between.

Don't you find that div's cause problems with overlapping?
Personally I'd rather take a stretched layout over overlapping layers any day. Stretched is just as ugly but at least you can still see the content, you know?

Divs are great for exact positioning... just as long as you feel confident that the content of the div never exceed what you had in your original design. (That's true for tables too of course. If you set the width to 300 and somebody inserts a 500 px wide image you're screwed either way. :-/)

CSS is a lot more powerful than people believe it to be.

Nonetheless, table layout algorithms are very helpful to designers. This is why things like display:table-row and display:table-cell are very helpful - we can write markup that makes sense (using div or p tags or whatever) and then give them table properties via CSS to make them display the way we want.

Unfortunately, IE 6 doesn't support this. =( So I support the use of *simple* tables in some circumstances. Zeldman's design of Fox Searchlight Pictures is a good example of a simple table layout where the page still primarily uses CSS for formatting.

The problem with the train of thought going on here is that people tend to view the use of CSS in terms of the old concepts.

You can't.

CSS layouts are such a completely different animal than oldstyle tabled layouts, and web technology in general is so far beyond what it was then, that you need to start from 0 with CSS if you want to understand how to make it work.

A properly coded set of DIVs will not overlap.

quote:

---

A properly coded set of DIVs will not overlap.

---

I think you mean "in modern browsers if you incorporate all the established 'elegant workarounds'" right?

Jason

Perhaps, but those workarounds are a lot more elegant than table tricks. =)

At least CSS workarounds maintain the separation of style from markup (95% of the time).

I've found that a table layout in combination with CSS works quite well. I'm always open to new ideas though. Just don't like the attitude that tables are out completely and CSS is the quintessential answer to everything. People who reason like that must not be burdened with having to make designs that also have to work with NS4.6 and other nightmare browsers. I envy those people but I don't agree with them. ;-)

[This message has been edited by BlueHarvest (edited 12-03-2002).]

What you use depends on your brief for the site - if it has to work in NS 4.x and older browsers then you need to use tables (unless you get really lucky), however, there is usually very little excuse for complex nesting of tables and other coding horrors.

___________________
Emps

FAQs: Emperor

Yup, these days...

The projects I work on must all be pretty unusual since almost all of them have the compatibility with NN4 requirement. If you look at general statistics of browser usage it looks like the 4.x series is all but extinct, but when you look at the statistics for the individual sites I've built or helped to build there's a surprisingly large amount of Jurassic browsers out there. :-/

Well if it has to look indentical in NN4x, obviously you can't use the same techniques. but that type of support for obsolete browsers is problematic in and of itself.

There is no reason why a page can't be coded to degrade respectibly in older browsers. Coding in a way that is counterproductive to web standards in order to support NN4x is a big part of what ensures that such browsers remain in use, and further impedes the advancement of cross platform/browser/device web design.

JK - feel free to interpret "properly coded" as you wish But I tend to try to setup layouts that won't need such workarounds (when I have such a choice of course).




[This message has been edited by DL-44 (edited 12-03-2002).]

DL-44 is right: supporting an old browser requires nothing more than making sure your page degrades well. What you need to do is write a standards-based page that can be viewed and used from even the simplest text browser. That, of course, will work in NN 4. Then add CSS that will work in NN4. At *that* point, you can go ahead and add functionality through scripting and/or additional CSS - just make it so that it has no effect in NN 4. Then NN 4 users get a simple page that looks halfway decent, while users with recent browsers will get a page that works just as well, but is more fun or visually appealing.

BlueHarvest: I know exactly what you're talking about with the site specific nn4 instances. In the cases I've seen they relate to the target audience. This is something that a lot of designers forget about as they're normally preaching CSS layouts and nn4 degradation to a crowd that is using the latest browsers (in forums of their peers especially). When you're redesigning a site that's getting a ton of visits from the purchasing agents and engineers at ABC Co. and ABC Co. uses NN4.7 as a corporate standard, well, you tend to make it look real nice for that crowd, degradation is not an option, and tabled layouts will work the same for all browsers. Server side tools are going to give you your seperation of style and content (as well as the fabled ease-of-update) in this case.

DL: "properly coded"? I agree, but you may have missed my not-so-subtle jab at CSS elitists who are not afraid to use the terms "table hack" and "elegant workaround" in the same breath when talking about oldgen vs newgen layout techniques in the context of support for 'standards'.

Slime: I like your committment and approach as layed out in that last post, indeed it's perfect. Unless you're still looking at a target audience that has a chunk of v4 browsers in it. In this case degrading is not an option from the point of view of the people writing the checks, they want that chunk to have the same lovely experience as the rest of the visitors

As for transparent GIFs and hairy nested tables and such? who needs em? who ever did? Psst, they were never really necessary.

Jason

JK - picked it up but wasn't positive it was a jab it was so subtle Agreed.

And of course, under such circumstances as you describe, you do what needs to be done. =)

As you said though, ugly nested tables and spacer gifs were *never* needed for a tabled layout.

DL: Hehe, I like that expression "degrade respectibly". That's usually what you have to shoot for when your audience is equiped with both the latest browsers and the old dreaded ones.

JK: Tell me about it! At least the situation now isn't as bad as it was a couple of years ago when everyone was so eager to show off the latest techniques that they completely ignored people who didn't have the very latest browser and adjusted their settings to accept all cookies, javaapps etc.
Makes me think of a time when I had a brand new computer and had to download a servicepack... which of course I couldn't do because the site I was trying to browse required that the servicepack was installed already for their navigation to work.
That's thinking things through for ya. ;-)