Images with borders

**contestcen** · 10-10-2012, 04:49 PM

I have spent 3 days trying to do something that I thought would be simple and straightforward, surely less than an hour's work. I wanted to display a list of icons (small images) with a border of contrasting color around each one. Preferably there would be a small space between each image and border. I finally hit upon a coding using nested tables that ALMOST accomplishes what I wanted, and which displays the same in the 3 browsers that I tried. This is the code

Code:

<table> <tr>                                                                                                                                 
 <td> <table onclick="Place(0)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="bl.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(1)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="th.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(2)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="rh.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(4)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="bh.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(8)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="lh.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(10)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>  
  <tr> <td style="padding:0; margin:0"> <img src="hl.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(5)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="vl.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(6)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="ul.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(12)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>  
  <tr> <td style="padding:0; margin:0"> <img src="ur.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(3)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="ll.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(9)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="lr.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
</tr> </table>

As I said, this almost works, except that there is a gap of about 5 pixels between the bottom of the image and the bottom border. The other 3 borders line up correctly.

Is there any way around this? Is there some way I can specify that there should not be any bottom padding? This happens in IE, Firefox and Chrome with and without specifying

Code:

<!DOCTYPE html>

**coothead** · 10-10-2012, 06:15 PM

Hi there contestcen,

that is a very convoluted way to code, and has "Twentieth Century" stamped all over it.

Try it like this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>icons all in a row</title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#icons {
/* width value is to 11x( img width + total border width + total li margin width) */
    width:792px;
    padding:0;
    margin:0 auto;
    list-style-type:none;
 }
#icons li {
    float:left;
    margin:0 2px;
    box-shadow:2px 2px 2px #666; /* this can be removed */
 }
#icons img {
    display:block;
    width:60px;    /* edit this value to suit */
    height:40px;   /* edit this value to suit */
    border:4px solid aqua;
    cursor:pointer;
    background-color:#000; /* this can be removed */
 }
</style>

<script type="text/javascript">

function init(){

   num=[0,1,2,4,8,10,5,6,12,3,9];
   ims=document.getElementById('icons').getElementsByTagName('img');

for(c=0;c<ims.length;c++) {
ims[c].number=num[c];
ims[c].onclick=function() {
   Place(this.number);
   }
  }
 }
function Place(n) {
   alert(n); /*replace the alert with  your function  */
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

</script>

</head>
<body>

<ul id="icons">
 <li><img src="bl.gif" alt=""></li>
 <li><img src="th.gif" alt=""></li>
 <li><img src="rh.gif" alt=""></li>
 <li><img src="bh.gif" alt=""></li>
 <li><img src="lh.gif" alt=""></li>
 <li><img src="hl.gif" alt=""></li>
 <li><img src="vl.gif" alt=""></li>
 <li><img src="ul.gif" alt=""></li>
 <li><img src="ur.gif" alt=""></li>
 <li><img src="ll.gif" alt=""></li>
 <li><img src="lr.gif" alt=""></li>
</ul>

</body>
</html>

...and then, if you want to join the "Twentieth First Century", read some of the following links...

coothead

**contestcen** · 10-11-2012, 10:32 PM

Thank you for your quick response to my post. I was able to get the format I wanted without too much effort. Your code contains several good ideas, and some poor ones. Your approach let me get rid of the nested tables, which, frankly, was a desperation move on my part. The idea of moving the common code for each image into one place, rather than repeating it, is helpful. On the other hand, the idea of using a JavaScript loop to generate the 11 table entries, rather than just listing them, is overly complex. Some might say "convoluted." The need to explicitly code the table width is a recipe for future problems. What happens when I add or change entries, especially if the new entries are not the same width? That field could need frequent manual updating.

I think it is regrettable that you chose to turn your answer into a broad criticism of my coding style. It took me several hours of examining those 120 lines of code before I discovered the kernel of code that made your solution work. It was the style attribute display:block That allowed the images to have the desired border. Thank you for that key idea.

I thought you might like to see the final result, all cleaned up. It is now down to just 21 lines of code, most of them short and straightforward. It produces the correct format on all 3 browsers that I tried.

Code:

<style type="text/css">                                               
img.border                                                            
{ display:block;                                                      
  width:20px;                                                         
  height:20px;                                                        
  border:4px solid aqua;                                              
  cursor:pointer; }                                                   
</style>                                                              
                                                                      
<table bgcolor=white> <tr>                                            
  <td onclick="Place(0)" > <img class="border" src="bl.gif"> </td>    
  <td onclick="Place(1)" > <img class="border" src="th.gif"> </td>    
  <td onclick="Place(2)" > <img class="border" src="rh.gif"> </td>    
  <td onclick="Place(4)" > <img class="border" src="bh.gif"> </td>    
  <td onclick="Place(8)" > <img class="border" src="lh.gif"> </td>    
  <td onclick="Place(10)"> <img class="border" src="hl.gif"> </td>    
  <td onclick="Place(5)" > <img class="border" src="vl.gif"> </td>    
  <td onclick="Place(6)" > <img class="border" src="ul.gif"> </td>    
  <td onclick="Place(12)"> <img class="border" src="ur.gif"> </td>    
  <td onclick="Place(3)" > <img class="border" src="ll.gif"> </td>    
  <td onclick="Place(9)" > <img class="border" src="lr.gif"> </td>    
</tr> </table>

Now, if you would like to have a discussion of the deficiencies of my coding style, this is the time. Feel free to repond, and blast away if you so choose.

**contestcen** · 10-12-2012, 02:30 AM

Forget the HTML code from my last post. I suddenly had a flash of insight. I can get exactly the format I want without using tables or lists, with this code

Code:

<style type="text/css">                  
img                                      
{ display:inline;                        
  width:20px;                            
  height:20px;                           
  border:4px solid aqua;                 
  cursor:pointer; }                      
</style>                                 
<img src="bl.gif" onclick="Place(0)">    
<img src="th.gif" onclick="Place(1)">    
<img src="rh.gif" onclick="Place(2)">    
<img src="bh.gif" onclick="Place(4)">    
<img src="lh.gif" onclick="Place(8)">    
<img src="hl.gif" onclick="Place(10)">   
<img src="vl.gif" onclick="Place(5)">    
<img src="ul.gif" onclick="Place(6)">    
<img src="ur.gif" onclick="Place(12)">   
<img src="ll.gif" onclick="Place(3)">    
<img src="lr.gif" onclick="Place(9)">

**contestcen** · 10-14-2012, 07:16 PM

Originally Posted by coothead

Hi there contestcen,
...
...and then, if you want to join the "Twentieth First Century", read some of the following links...

coothead

First, I want to thank you for a quick and lengthy reply. I know you went to a lot of effort to show me a style of coding that you believed was modern and beneficial. I appreciate that.

I read all of the references that you gave. At first I thought they were making some solid points, and giving some good reasons to avoid tables. But after a while I realized that they were talking only about using tables for the overall layout of a webpage. If you do that, then you get the problems that they mention, slow loading, displaying poorly on small screens, and so forth.

Unfortunately, they then took those valid points and generalized them to all tables. Yet they didn't give any reasons to support that generalization. In truth, tables are a good way, often the best way, to lay out areas of a webpage into rows and columns.

I am reminded of the arguments in the 1970's against GoTo's. There were many programs written in the 1960's where GoTo's were badly overused. In many cases this was the result of poor text editors, which allowed changing lines of code, but not inserting new lines of code into the middle, and of patches made to object code, which, again did not allow for changing the size of the program being patched.

In both cases, programmers were forced to add new code at the end of a program or module, and insert GoTo's to branch to the new code, then back into the middle of the old code. This is not what the programmers wanted to do, but what they were compelled to do, given the inadequate tools they were working with. It made updating that code very difficult.

Obviously such overuse of GoTo's was bad, and it led people to generalize that all GoTo's were bad. You can still find people today who believe that. But the truth is that in some cases you can simplify and improve code by using GoTo's. That's why JavaScript has so many GoTo constructs such as continue, break, else, else if, switch, return and do-while.

This type of over-generalization is the same mistake that people are now making about tables. If some uses of tables are bad, they say, let's avoid all tables. It almost sounds logical.

Instead, let's learn from the past and not repeat the same mistakes.

**coothead** · 10-15-2012, 03:31 AM

Hi there contestcen,

The "table element" is the semantic element for tabular data,
as the " p element" is the semantic element for paragraphs.

You are either concerned about semantic coding or you are not.

If you believe that...

"In truth, tables are a good way, often the best way, to lay out areas of a webpage into rows and columns."

...then far be it from me to try and change your mind.

When replying to forum coding problems, though, I would be failing the
poster if I did not point out that certain methodology had moved on.

coothead

**contestcen** · 10-17-2012, 01:51 AM

You said,

---Quote---
"In truth, tables are a good way, often the best way, to lay out areas of a webpage into rows and columns."
---End Quote---
...then far be it from me to try and change your mind.

When replying to forum coding problems, though, I would be failing the
poster if I did not point out that certain methodology had moved on.

Apparently you feel there is a better way than using tables to lay out parts of a webpage in rows and columns. I'd be interested to know what you have in mind. I saw how you reformatted a list to make it horizontal instead of vertical, but I can't see how that could be better than using a table. If there were several rows, how would you get the columns to line up? By hard-coding the width of every element?

**coothead** · 10-17-2012, 03:20 AM

Hi there contestcen,

"You can lead a horse to water but you can’t make it drink."

I gave you a code example for the original problem in this thread, and it only
took ten minutes rather than three days.

The images you had constituted a list, so the appropriate semantic element
was used in the replacement code.

If, during your future coding exercises, you require help with a non semantic
table layout, members here and at other forums will be more than willing to
provide you with a semantic alternative.

You may find that a stroll through the...

Zen Garden

...could have a rather therapeutic effect, though, on your intransigence.

coothead

**contestcen** · 10-19-2012, 02:45 AM

I've been around computers a long time now, pretty much for as long as they have existed. There's a fair chance that I was programming before you were born, and conceivably before your parents were born. I've seen a lot of hot ideas come and go. I remember when flowcharting was supposed to solve all of our problems. Then it was symbolic coding, AutoCoder, Nassi-Schneiderman diagrams, pseudocode, PL/I, code inspections, APL, structured programming, certificates, structured walk-throughs, correctness proofs, Visual Basic, object-oriented programming, Delphi, TurboVision, Java, Linux, etc.

Every one of these had its adherents making exaggerated claims about how wonderful their darling technology was. Most of them still have diehard fans. Sometimes I adopt a new technology the minute it becomes available. Sometimes I try the new idea for a time before deciding. Sometimes I just ignore it. It all depends on whether I perceive the advantages outweighing the drawbacks.

So I'm not easily impressed by the claims of "semantic markup" language. And I'm not swayed by your suggestion that I'm not leaping to adopt this new paradigm because I am "intransigent" and that I need therapeutic time in the Zen Garden.

What I detest is having a new concept forced on me. The very idea that W3 is planning to drop support for all of the appearance tags, FONT, CENTER, B, I, etc. is arrogant and abhorrent. This is the epitome of hubris.

How on earth could I ever go through and convert all of my thousands of webpages? It would take a full year of doing nothing else. What happens to my businesses while I'm doing all this unproductive work? Will I be able to revive them afterwards? Would I still have an income?

**coothead** · 10-19-2012, 04:13 AM

Hi there contestcen,

"There's a fair chance that I was programming before you were born"

If you check...

coothead's profile

...you will find that there is a fair chance that you were not.

"What I detest is having a new concept forced on me."

Let me remind you of what I suggested in a previous post....

If you believe that...

"In truth, tables are a good way, often the best way, to lay out areas of a webpage into rows and columns."

...then far be it from me to try and change your mind.

"The very idea that W3 is planning to drop support for all of the appearance tags, FONT, CENTER, B, I, etc. is arrogant and abhorrent.
This is the epitome of hubris."

Truly, you have no need to worry about that.

If you are as old as you profess, then you will have shaken off your mortal coil long before that
plan becomes actuality and the perpetrators of that diabolical deed have met their nemesis.

coothead

**Calman** · 10-19-2012, 11:19 AM

Hi folks,

Sorry to step into this discussion, but I myself am a "self taught" coder. Most of my learning came from the table based structure of HTML coding, but recently, I am trying to get my head around CSS and a lot of the new tags. I consider myself an old"ish" head, trying to learn new ideas, so I am always open to listening to experienced coders (young and old) ... to achieve the proper results. Typically, there is no real wrong way of doing things, just diffirent approaches.

All the best,
Cal

**contestcen** · 10-21-2012, 01:35 AM

Hi there contestcen,

"There's a fair chance that I was programming before you were born" If you check...�coothead's profile
...you will find that there is a fair chance that you were not.

That's why I said "there's a fair chance" and not "probably". However, I wrote my first program in Sept 1958, and I'm pretty confident that was before you wrote yours.

"What I detest is having a new concept forced on me." Let me remind you of what I suggested in a previous post....

I was not talking specifically about tables, but broadly about W3 forcing the concept of "semantic markup" on all HTML users by dropping all support for a wide range of tags and attributes.

If you believe that...

"In truth, tables are a good way, often the best way, to lay out areas of a webpage into rows and columns." ...then far be it from me to try and change your mind.

Trust me, you won't shake my belief in tables. I understand now that the entire webpage should not be laid out as a table because it takes longer to load, but the I don't think I have ever design a webpage that way, so it really doesn't change anything.

"The very idea that W3 is planning to drop support for all of the appearance tags, FONT, CENTER, B, I, etc. is arrogant and abhorrent.
This is the epitome of hubris." Truly, you have no need to worry about that.

If you are as old as you profess, then you will have shaken off your mortal coil long before that
plan becomes actuality and the perpetrators of that diabolical deed have met their nemesis.

Sometimes students ask me if I was around in the punch card era. They are amazed when I explain that I was around in the era BEFORE punch cards. I wrote some of my first programs on punched paper tape using a Friden Flexowriter, and some on unit record equipment using plugboards. I remember when the issue of row binary versus column binary was a hot topic.

I wish I could trust that FONT, CENTER, BIG, etc. would be around forever, but this is not the first time I've had the rug pulled out from under me. When I first started with HTML, tables were simple. You had a border on the outside, and rules on the inside. Then suddenly the rules attibutes were gone, and the internal lines in tables all became double lines, or even quadruple lines. Table borders suddenly became asymmetric with weird shading probably intended to make them look like beveled picture frames.

I spent weeks combing through every online tutorial I could find, and posting to various forums. All anyone could tell me was to use border-style=solid. But that only got the borders down from quadruple to double. It was months before I chanced upon style="border-collapse:collapse" but even the combination of both attributes still didn't get the borders really right.

I wish I knew where to get reliable information, because I've been burned too often.