Click here to Skip to main content
15,880,972 members
Home / Discussions / Web Development
   

Web Development

 
QuestionNeed Help with Apache installation Pin
Evgeni5722-May-07 10:14
Evgeni5722-May-07 10:14 
QuestionGet time Pin
matjame22-May-07 4:06
matjame22-May-07 4:06 
AnswerHow to put a clock on a webpage (Dreamweaver / Flash not requred!) Pin
Fred_Smith22-May-07 5:01
Fred_Smith22-May-07 5:01 
GeneralRe: How to put a clock on a webpage (Dreamweaver / Flash not requred!) Pin
matjame23-May-07 0:50
matjame23-May-07 0:50 
GeneralRe: How to put a clock on a webpage (Dreamweaver / Flash not requred!) Pin
Fred_Smith23-May-07 1:12
Fred_Smith23-May-07 1:12 
AnswerRe: Get time Pin
Expert Coming22-May-07 10:58
Expert Coming22-May-07 10:58 
AnswerRe: Get time Pin
JimmyRopes22-May-07 11:20
professionalJimmyRopes22-May-07 11:20 
QuestionIt's a Wonder... Pin
#realJSOP22-May-07 3:04
mve#realJSOP22-May-07 3:04 
... that the web works at all.

Before reading the following, keep in mind that I'm not very experienced at coding web pages. I come from a C++ background and I like the order and discipline the language imposes on the programmer. When coding web pages, you can pretty much toss all that discipline out the window because it generally doesn't do you any good at all. I hate that. This is more a tale of woe than a question, so just sit back, grab a soda, and laugh along with me.

I've been working on a "classic" ASP web site that combines html, vbscript, css, and javascript. It displays just fine, but the VS2005 IDE indicated several "errors", indicated by the annoying red underscore. Yesterday, I decided to try to bring one of the site's web pages into strict compliance with what the vs2005 IDE thinks is "good form". Everything was going fine until I got to the table cell background image stuff.

The site itself is composed of a frameset, and all of the content is based on a nested table structure. The outermost table on every page is decorated by a series of images that display a graphic frame around the data. Personally, I think the graphic frame eats up way too much screen real estate (and it looks like something a VB programmer would come up with), but (unfortunately) I have not been tasked with eliminating or improving it. The programmer that originally coded the site used the following general table definition to display the border:

<table width="700" cellpadding="0" cellspacing="0" id="table1">
    <tr valign="top">
	    <td width="30" ><img src="img_tl.jpg" alt="" border="0" /></td>
	    <td width="331"><img src="img_tab.gif" alt="" border="0" /></td>
	    <td style="background-image:url('img_tm.jpg');background-repeat:repeat-x;" width="100%"></td>
	    <td width="15" ><img src="img_tr.jpg" alt="" border="0" /></td>
    </tr>
    <tr>
    	<td width="30" background="img_sl.jpg"></td>
    	<td colspan="2" width="100%">
    	<td width="30" background="img_sr.jpg"></td>
    </tr>
    <tr>
	    <td width="30" ><img src="img_bl.jpg"></td>
	    <td colspan="2" width="662" background="img_bm.jpg"</td>
	    <td width="15" ><img src="img_br.jpg"></td>
    </tr>
</table>


This displayed just fine, but the IDE complained about the width= and background= elements, so I went about replacing them with appropriate style code in the site's css file. The code shown above now looks like this:

<table width="700" cellpadding="0" cellspacing="0">
    <tr>
	    <td class="BorderBlueTopLeft"</td>
	    <td class="BorderBlueTopTab"</td>
	    <td class="BorderBlueTopMid"  valign="middle"><b>Title</b></td>
	    <td class="BorderBlueTopRight"</td>
    </tr>
    <tr>
    	<td class="BorderBlueSideLeft"</td>
    	<td colspan="2">
        <td class="BorderBlueSideRight"</td>
    </tr>
    <tr>
	    <td class="BorderBlueBottomLeft"</td>
	    <td class="BorderBlueBottomMid" colspan="2"</td>
	    <td class="BorderBlueBottomRight"</td>
    </tr>
</table>


The widths and background images are now specified in the indicated css classes (the widths were dictated by the width of the images, and the repeat stuff was dictated by the intended positioning of the class), and the code is much more readable. The real problems arose after I started plugging the missing code back into the improved general table layout.

Not counting the left/right border columns, the outermost table essentially contained a middle cell (colspan=2) which contained it's own table. That inner table had a single row with two columns, and within each of those columns was an additional inner table. Sprinkled throughout this nested table structure were width specifications for given columns as well as widths for the tables themselves. Believe me when I say it was a mess, and I spent a day trying to figure out why crazy crap was happening all of the page. Apparent gaps between columns, the inner-most tables rendering in varying and bizarre sizes, the graphic borders not showing up or showing up where they shouldn't be.

No, there weren't any open tags. I wasn't missing any quote marks or semi-colons, or any of the typo stuff you normally find after you've been typing too fast for a few hours. I was really struggling, and even a couple of guys in the office that had more experience than me could not get a grip on what was happening. The comedy ensued for several hours as we changed random elements trying to get the tables to display correctly.

This morning, after fighting with it for an hour or so, I decided to try putting a div inside each cell that contained a table, and specifying that the div was 100% of the containing cell size. The table that was contained in the cell was now enclosed by a div. When I ran the page, everything snapped neatly into place, and all is now right with the world.

I'm really surprised that web pages work at all, and that the web hasn't exploded in a spectacular fire ball. It appears as if all standards for coding a web site are merely whispered guidelines that can be used or ignored on a whim. No wonder the browsers are all so big and bloated - they have to allow what amounts to crap to be rendered just as well as the properly formed stuff.



The moral of this story: If you're nesting tables, make sure you enclose each nested table within a div. The div becomes the parent element, and sizes specified in percentages appear to work every time.

Moral #2: Get back to real programming as soon as you can possibly arrange it - this web stuff is nuts.





"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997
-----
"...the staggering layers of obscenity in your statement make it a work of art on so many levels." - Jason Jystad, 10/26/2001


AnswerRe: It's a Wonder... Pin
Fred_Smith22-May-07 3:35
Fred_Smith22-May-07 3:35 
AnswerRe: It's a Wonder... Pin
Shog922-May-07 6:44
sitebuilderShog922-May-07 6:44 
AnswerRe: It's a Wonder... Pin
Guffa22-May-07 13:32
Guffa22-May-07 13:32 
QuestionSending email in Inbox Pin
Lalafaraz21-May-07 23:38
Lalafaraz21-May-07 23:38 
AnswerRe: Sending email in Inbox Pin
JimmyRopes22-May-07 1:53
professionalJimmyRopes22-May-07 1:53 
QuestionReading out contents of an eID-card Pin
Pat Krimson21-May-07 22:53
Pat Krimson21-May-07 22:53 
AnswerRe: Reading out contents of an eID-card Pin
JimmyRopes22-May-07 1:43
professionalJimmyRopes22-May-07 1:43 
QuestionWhat's going on with this javascript? Pin
Mundo Cani21-May-07 18:24
Mundo Cani21-May-07 18:24 
AnswerRe: What's going on with this javascript? Pin
Expert Coming21-May-07 20:41
Expert Coming21-May-07 20:41 
GeneralRe: What's going on with this javascript? Pin
Mundo Cani22-May-07 7:59
Mundo Cani22-May-07 7:59 
AnswerRe: What's going on with this javascript? Pin
Guffa21-May-07 21:08
Guffa21-May-07 21:08 
GeneralRe: What's going on with this javascript? Pin
Mundo Cani22-May-07 7:59
Mundo Cani22-May-07 7:59 
AnswerRe: What's going on with this javascript? Pin
Lalafaraz21-May-07 23:43
Lalafaraz21-May-07 23:43 
GeneralRe: What's going on with this javascript? Pin
Mundo Cani22-May-07 8:00
Mundo Cani22-May-07 8:00 
QuestionModal dialog form unable to return values to a webpart Pin
singhmanpreet21-May-07 13:17
singhmanpreet21-May-07 13:17 
QuestiongetElementById() when element is in MasterPage Pin
Mundo Cani21-May-07 11:53
Mundo Cani21-May-07 11:53 
AnswerRe: getElementById() when element is in MasterPage Pin
JimmyRopes21-May-07 13:32
professionalJimmyRopes21-May-07 13:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.