Posted By

1man on 08/07/06


Tagged

css debug borders


Versions (?)

Who likes this?

197 people have marked this snippet as a favorite

tylerhall
jonhenshaw
samuraicoder
panatlantica
marc0047
dojob
seiglermj
theMacpenguin
chrisaiv
koncept
purpleraison
jotom
zingo
mjlassila
manub
rich13
marcoba
robotoverlord
vali29
atnexxt
sbbath
torkil
jfherring
visuallyspun
stphnclysmth
theevilcube
wbowers
revmitcz
cidibee
adamsimms
stylz
SpinZ
kcmr
section31
chianess
lepetitcrack
Leech
rtcrm
asturi
nighthawk
wizard04
inkdeep
sarfraznawaz2005
fugue
owais
chavcho
nirva
webology
Kraeved
keith
dougunderscorenelson
antpaw
lfx
rifat
spittingangels
chrisjlee
nightowl
reevej
nb109
codenchips
vagrantradio
medaqueno
hERB
Hollow
zartgesotten

Vordreller
hasantayyar
thepuck
andyhartleeds
caseybecking
matiit
eapen
mmmattos
pauloc
roccostorm
isdereks
MicronXD
sultano
annalog
rejuvenateproductions
kitzelh
smoothdzion
soccerspin
bananastalktome
liamchapman
michaelfox
pgtop
alexteg
choasis
manteca
davidsi
eivind
dancrew32
tea4ge
metoikos
scitrenbaumgmailcom
codeclarified
tariel
leecsargent
ahsanhabib
rafi
datu
phil7085
Carolyne
MichaelM
samuelcotterall
sethetter
nerdfiles
reynish
PerfectionDesign
MikoDarbi
verhaeg
osirisinternet
lolindirfaelivrin
PhunkRabbit
wazdesign
sofcase
dchou
pytheas
23andwalnut
pchengsf
dloop
shalomfriss
miceno
sb_01
niaher
naeemnur
fauverism
corangar
athanassiadis
robknight
seanpowell
bobbym245
gelogenic
geoffreydv
lifewishes
romainsauger
thisisrogerflanagan
0leg
hkrish
sebikovacs
arucordoba
kubaitis
f1r3fl3x
tspitzr
aegony
TaopaiC
laurentzziu
michellebracken
CyKy
dvnguyen
a7mads
Grow
qubestream
marco135
geldora
Woodruff
stavros
gauravjassal
wearefreya
mitry
Net-Freak
gnitter
wpb
jondiscipulo
benediktvaldez
0xC0FFEE
jumichot
merritt212
stephcode
SevenLayersDesign
wirenaught
guilhermehn
hnovick
tmh27
crispunk
geek4evr
gregorynicholas
dop3
diogoweb
artistandalias
nugjagoan
SpoodyGoon
phongjalvn
WebDebz
andreagam
ryanfiorini
rmurillo020
unibox
symsec

erikgeerling
ekarakas
3polars
_naphetz
klambert


Handy CSS Debug Snippet


 / Published in: CSS
 

URL: http://homepage.mac.com/chrispage/iblog/C42511381/E20060806095030/index.html

Great little debuging snippet found while browsing. The code adds different coloured borders to the assets depending on its level. Leave commented out if not needed.

  1. * { outline: 2px dotted red }
  2. * * { outline: 2px dotted green }
  3. * * * { outline: 2px dotted orange }
  4. * * * * { outline: 2px dotted blue }
  5. * * * * * { outline: 1px solid red }
  6. * * * * * * { outline: 1px solid green }
  7. * * * * * * * { outline: 1px solid orange }
  8. * * * * * * * * { outline: 1px solid blue }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: tylerhall on August 7, 2006

That's so clever - never would have thought of that. I love it.

Posted By: Kraeved on April 22, 2009

1man, thank you.

Posted By: dougunderscorenelson on April 28, 2009

Very nice! I threw some "important"s onto mine to make sure they show up.

Posted By: joaojoaquim on May 6, 2009

5* thnks

Posted By: ramnath on June 26, 2009

this is very useful... thanks for the tip!

Posted By: frujo on July 21, 2009

That's amazingly simple! The same great as simple!

Posted By: qweqwe on July 22, 2009

Too much noise... Firefox + FireBug much better

Posted By: qweqwe on July 22, 2009

*:hover { outline: 2px dotted red; } * *:hover { outline: 2px dotted green; } * * *:hover { outline: 2px dotted orange; } * * * *:hover { outline: 2px dotted blue; } * * * * *:hover { outline: 1px solid red; } * * * * * *:hover { outline: 1px solid green; } * * * * * * *:hover { outline: 1px solid orange; } * * * * * * * *:hover { outline: 1px solid blue; }

Posted By: hkrish on November 10, 2010

Cool!

Posted By: digitalclubb on December 14, 2010

Or just use Firebug?

Adding all those borders could potentially throw off your layout, especially where paddings/margins are used.

Posted By: digitalclubb on December 14, 2010

Oops, it's using outline - teaches me to read before posting :(

You need to login to post a comment.