|
| |
|
|
gorilla
Posts: 2974
From: Denmark
Status: offline
 |
Tip for working with/debugging positioning in CSS - 6/1/2003 18:31:50
I was having dinner tonight with an old girl friend and her husband. They are both web developers (not designers they get quite emphatic that there is a difference) they mentioned something about working with CSS positioning.
After checking the other postings that I monitor/post in I thought I would mention it here. Please move it if it should go into the " tips" forum instead.
Tip:
Download a copy of the latest version of opera
www.opera.com
It has a facility or feature of stylesheets of its own. If you are working with even slightly trickey things like perecentage widths, relatively positioned element then if you use Opera' s Debug with Outline you will see boundaries on your page elements.
Thus you can see where elements overlap, or alter each other' s position. Prehaps in unexpected ways :-)
In other words it is a visual debugging tool.
_____________________________
Mháircaish
Signature self-censored to protect the sensibilities of the thin-skinned  .
May we never confuse honest dissent with disloyal subversion. – Dwight D. Eisenhower
|
|
|
|
Gil
Posts: 7533
From: North Carolina, USA
Status: offline
|
RE: Tip for working with/debugging positioning in CSS - 6/1/2003 21:26:17
quote:
(not designers they get quite emphatic that there is a difference)
Good for them - I agree 100000000000000 %
_____________________________
Gil Harvey, 1947-2004
| |
|
|
|
pageoneresults
Posts: 1001
From: Orange, CA USA
Status: offline
|
RE: Tip for working with/debugging positioning in CSS - 6/2/2003 0:36:13
Yes, that Opera 7.11 is sure a great tool to have around. The Debug with Outline feature is awesome. Believe it or not, FP offers this too. But, it is not a debug with outline. If you select Show Formatting (¶) from your toolbar you' ll get similar results.
Ever since I' ve used FP that feature has been on. Without it, you cannot see any outlines of your document structure, you have a plain white canvas. Then, to take it one step further, you select Reveal Tags (Ctrl + /). This really gives you a great view of your document structure. I' ve not yet found a better program than FP for just this type of viewing pleasure.
The other thing you can do is assign a border to all of your block level elements in your CSS file. I usually have a general set of rules at the top of my style sheet and add this during development...
body, div, form, h1, input, li, ol, p, select, td, textarea, tr, ul{
border:1px solid #999;
font-family:verdana, arial, helvetica, sans-serif;
font-size:13px;
line-height:16px;
}
That way I can see at the browser level what the document structure looks like.
< Message edited by pageoneresults -- 6/2/2003 12:37 AM >
_____________________________
SEO Consultants Directory
Find Search Engine Marketing Companies
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
k¥ 