Solved

Easy Transparent GIF question

Posted on 2001-06-27
7
186 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

738 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