Solved

Easy Transparent GIF question

Posted on 2001-06-27
7
184 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

789 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