Solved

Easy Transparent GIF question

Posted on 2001-06-27
7
182 Views
Last Modified: 2010-04-09
What is the difference between inserting a transparent gif in a table to control placement of text over background graphics instead of simply using an empty cell to control it?
0
Comment
Question by:panrob
7 Comments
 
LVL 4

Accepted Solution

by:
CF_Spike earned 50 total points
ID: 6231362
The difference is in the way different browsers render the HTML. Netscape for example will not necessarily render a table in exactly the same way as Internet Explorer. They will both, however render a gif the same way which is why a transparent gif is often used to ensure precise positioning. This is less true for modern browsers (versions 4,5 and 6) than it was for the older ones. If you know that you are supporting only version 4 browsers and above you may be able to do all the positioning with style sheets rather than tables or transparent gifs.

Spike
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6231400
Empty cells never use their set widths (especially not in Netscape...

There have been several solutions for this in the past and sometimes people still use them...amongst them is the tag <spacer> which was especially introduced for Netscape....

But because this is not browser independent people thought of the idea to use an image that is completely transparent....that way you can stretch a cell as far as you want it to without there being any contents....

When you leave the cell empty....it will be ok sometimes...but just imagine you need a line of 2px....you won't be able to get that using a non braking space....

Max.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6231730
If you don't put something in a cell, Netscape collapses it -- you get no background image (if you set one), no background color, nothing -- basically, it's a hole in the table. If you have an entire row/column like that, for all intents and purposes it doesn't exist.

You can use a nbsp to hold the cell, but often that's too large either in height or width. So a transparent gif is used instead, because it can be set to an exact pixel size.
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6231787
There is not really a single answer to the question. A cell in isolation
really has no context.  All of the suggestions may be appropriate for a
given circumstance.  What technique is best is dependent on the whole
table or even the whole page.  You cannot answer the question definitively
without reference to the context that the cell will be in, and what the
intended use of the cell is.

Cd&
0
 

Expert Comment

by:AlexisP
ID: 6244916
I use all of the above based depending on the circumstance.  I use the non-breaking space when I have a larger cell that I need to keep open, the small gife when I am trying to create a single line within the document in a cell (makes good verticle lines by coloring the background of the cell and putting a 1X1 holder in.  I also reccommend using the older version of width and height allocation as well as a css version:
<td width="300" height="200" style="width:300px; height:200px">
still include atleast one non-breaking space in larger boxes to potentially elliminate collapse in older browsers.
0
 

Author Comment

by:panrob
ID: 6291732
Thanks to everybody.   Great comments!
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6292571
You're welcome panrob...

Max.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question