homepage Welcome to WebmasterWorld Guest from 54.198.8.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Always show table and cell boundaries
RowanSB




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

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




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

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

lucy24




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

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




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

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




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

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

rocknbil




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

<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




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

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




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

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




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

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

Thanks - Rowan

rocknbil




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

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




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

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




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

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.)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved