Diagnostic CSS snippet

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > Diagnostic CSS snippet

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

Diagnostic CSS snippet

KiwiBrian

06-23-04 - 09:15 AM

I have a snippet of a few CSS rules that I insert in a page as a diagnostic
tool
It places borders around specified tags.
However I have been unable to get it to display borders on table rows.
Is there any way of doing this.
Has anyone got a favorite diagnostic snippet?

Here is the snippet, which I activate by removing the leading /

/*
* {
border: 1px solid red;
}
table {
border: 3px solid green;
}
*/

Brian Tozer

[ Post Follow-Up to this message ]

Re: Diagnostic CSS snippet

Neal

06-23-04 - 09:15 AM

On Wed, 23 Jun 2004 15:38:32 +1200, KiwiBrian <briantoz@ihug.co.nz> wrote:

> I have a snippet of a few CSS rules that I insert in a page as a
> diagnostic
> tool
> It places borders around specified tags.
> However I have been unable to get it to display borders on table rows.
> Is there any way of doing this.

Er... tr {border:1px red dotted}?

[ Post Follow-Up to this message ]

Re: Diagnostic CSS snippet

KiwiBrian

06-23-04 - 09:15 AM

"Neal" wrote
> KiwiBrian wrote:
 

> Er... tr {border:1px red dotted}?

Not in IE6 in XP Pro in a PC.
Just tried the following, with narry a row border in sight.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
div.centered {text-align: center;}
div.centered table {margin: 0 auto; text-align: left;}
tr {
border: 25px blue dotted;
padding: 25px;
margin: 25px;
}
td {
border:25px red solid;
padding: 25px;
margin: 25px;
}
table {
border: 25px green solid;
padding: 25px;
margin: 25px;
}
-->
</style>
</head>
<body>
<div class="centered">
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</div>
</body>
</html>

Brian Tozer

[ Post Follow-Up to this message ]

Re: Diagnostic CSS snippet

Neal

06-23-04 - 09:15 AM

On Wed, 23 Jun 2004 16:28:43 +1200, KiwiBrian <briantoz@ihug.co.nz> wrote:

>
> "Neal" wrote 
> 
> 
>
> Not in IE6 in XP Pro in a PC.
> Just tried the following, with narry a row border in sight.

Perhaps it is overlaooed by the other borders. Try just the tr rule, with
no others.

[ Post Follow-Up to this message ]

Re: Diagnostic CSS snippet

Phil Evans

06-23-04 - 12:15 PM

KiwiBrian wrote:
> Has anyone got a favorite diagnostic snippet?

Not as such, but Firefox's Developer Toolbar allows you to outline
arbitrary elements, all block level elements, tables, or whatever . . .

Couldn't live without it now

P

[ Post Follow-Up to this message ]

Re: Diagnostic CSS snippet

Wolfgang Wildeblood

06-23-04 - 05:19 PM

"KiwiBrian" <briantoz@ihug.co.nz> wrote:

> I have a snippet of a few CSS rules that I insert in a page as a diagnosti
c
> tool
> It places borders around specified tags.
> However I have been unable to get it to display borders on table rows.
> Is there any way of doing this.

Add "border-collapse: collapse;" - TR doesn't take borders when
border-collapse is "separate", "apart" or whatever the default is
called.


> Has anyone got a favorite diagnostic snippet?

h1, h2, h3, h4, h5, h6 {
text-decoration: blink
}
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
;
text-decoration: none
}

--
"You have to reverse the polarity, of course."

[ Post Follow-Up to this message ]

Re: Diagnostic CSS snippet

brauneberger

06-25-04 - 12:15 PM

> Has anyone got a favorite diagnostic snippet?

Yes. The Web Developers Toolbar by Chris Pederick.
http://www.chrispederick.com/work/firefox/webdeveloper/

[ Post Follow-Up to this message ]