Always show table and cell boundaries - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Always show table and cell boundaries

RowanSB

11:38 pm on Oct 17, 2011 (gmt 0)

10+ Year Member

Is there a way that will show a web page in a browser with all the cell and table boundaries visible, even if they have been programmed via HTML or CSS to have no borders? This would help me to debug tables where something to do with nesting, or colspan or rowspan, or similar things have gone wrong.

I know I can go through all my tables and add visible borders to them, and then remove them all afterwards, but this is a lot of hassle, and is error-prone. It would be great to have an option in the borwser that I can set that forces all borders to be visible, preferably in a way that makes it clear which borders are actually visible because they will always be so, and which are visible only because of this option. Also it would be best if this option does not alter the layout of the table at all - e.g. the artificially-added borders should not take up any additional space - maybe they have to "steal" space from the element they are surrounding or something.

Is anyone aware of a way of doing this?

Thanks - Rowan

Hoople

11:47 pm on Oct 17, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Force it by adding a local style sheet or editing the existing local style sheet?

lucy24

4:19 am on Oct 18, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Look through all your browsers' prefs. I assume you have at least five. Pick the one that has the quickest and easiest way to enable or disable a user style sheet. In general, these take precedence over site styles. Some browsers have an "always use my styles" option. (Take that,

!important

rule! :-P)

rocknbil

5:03 pm on Oct 18, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Yeah but dealing with borders on tables via CSS is unwieldy if you want the old school border="1" effect, more trouble than it's worth.

tables where something to do with nesting,

<faints> :-)

I used to use the add-border method but since FireBug all that's become unnecessary. Between that and the W3C validator, usually these are easy to sort out. That's really where I'd go with it.

Are the pages using JQuery? If so, add a one-liner to the included Javascript, or a three-liner in the head of the document. Note these are set with the border attribute but the scripting alters it.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
 <script type="text/javascript"> 
 $(function() { $('table').attr('border',1); }); 
 </script> 
</head> 
<body> 
<table style="width: 400px; margin:auto;" border="0"> 
<tr><td>blah</td><td>Blah blah</td><td> Blah de blah</td></tr> 
<tr><td>blah</td><td>Blah blah</td><td> Blah de blah</td></tr> 
<tr><td>blah</td><td>Blah blah</td><td> Blah de blah</td></tr> 
<tr><td>blah</td><td>Blah blah</td><td> Blah de blah</td></tr> 
<tr><td colspan="2"> 
<table border="0"> 
<tr><td> 
I'm a nested table. Frankly, I don't know 
how I got here because everyone tells me 
I went extinct in 1995. But here I am, 
deal with it. 
</tr></td> 
</table> 
</td><td>&lt;-- OUCH!</td></tr> 
</table> 
</body> 
</html>

You could also do it without jQuery but don't have time to write it up ATM . . .

tangor

6:13 pm on Oct 18, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

IF your editor is Homesite, use the DESIGN view instead of BROWSE... will show everything all the time. :)

rocknbil

5:08 pm on Oct 19, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

<ot>Yeeeah . . HomeSite Rocks. But . . . I only see Edit and Browse tabs, no "design" tab or view. Looked around at the configs and don't see it . . . no matter. I'm always in the edit tab anyway. :-)</ot>

RowanSB

10:39 pm on Oct 19, 2011 (gmt 0)

10+ Year Member

Thanks for all the intersting ideas for solving this problem.

Following advice in this thread I've tried using Firebug's "inspect" feature. This is a lot better than nothing, but because it only seems to highlight one cell in a table at a time, it's still not always easy to see exactly what's happening. For example, if a table is being displayed wider than it should be, how do you find out for sure which cell or combination of cells, and what particular elements within the cell, and/or what CSS attributes (margin, padding, border-width etc.) of the cell are forcing the table to be wider than it otherwise should be?

Thanks - Rowan

tangor

5:17 am on Oct 20, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

HomeSite Rocks. But . . . I only see Edit and Browse tabs, no "design" tab or view

<ot, too> Seem to recall you're HS5x... I'm still using HS4.0 :)
Top of the edit window...
Edit, Browse, Design...

RowanSB

8:57 am on Oct 20, 2011 (gmt 0)

10+ Year Member

Does anyone know where one can get HomeSite from now it's been discontinued?

Thanks - Rowan

rocknbil

4:16 pm on Oct 20, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I think it's free now, and BTW will forever hold a grudge against Adobe for killing it in favor of their point and drool solution (DW.) Try download.com, I see one there.

For example, if a table is being displayed wider than it should be, how do you find out for sure which cell or combination of cells, and what particular elements within the cell, and/or what CSS attributes (margin, padding, border-width etc.) of the cell are forcing the table to be wider than it otherwise should be?

It takes some getting used to. When you inspect you should see an "html view" in the lower left. If you hover over over the elements there, they should highlight in the browser window above. Padding is in purple, margin in yellow. If is sometimes confusing on elements that have no height (can't see them.)

Something not mentioned - validation should really be the first step before debugging a table. One of the things you'll love about HomeSite is it has internal XHTML and HTML validators, to 4.01 and XHTML (dig around in Options to set them.) You can validate before uploading or validate just chunks of code. (Which reminds me, I need to contract someone to write a DLL to validate against HTML5!)

A direct "click" in the HTML window on a given element will switch the focus of the inspection to that element and you'll see all the selectors affecting it in the pane on the lower right.

RowanSB

12:00 am on Oct 21, 2011 (gmt 0)

10+ Year Member

Thanks for your reply. The link on download.com (is this the same as download.cnet.com?) turned out just to be a link to a "free trial" of Dreamweaver CS5.5 on Adobe's web site. I found HomeSite 5.5 in the end on Softonic. This appeared under the name Macromedia rather than Adobe. However this too claims to be a 30 day evaluation version. Do you know how to enable this for ongoing use, given that it's been discontinued by Adobe?

Thanks - Rowan

rocknbil

5:44 pm on Oct 21, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I'm not sure, I still have my old license. I don't think a crack should be necessary - though I can't find the thread, there was some discussion here about homesite being free. As I recall when I bought the original Suite of MM products, the numbers were the same across the board with only the product code differences (HSW for HomeSite, DWD for dreamweaver, etc.)