Tom Burton wrote:
Help!
A few suggestions, though you may be already aware of them.
FF has DOM inspector under the tools menu. I think this may
be an option when you install FF. If you don't have it,
reinstall FF and request this be installed.
The DOM inspector lets you look at the DOM hierarchy. If the
DOM inspector & your web page are both visible, clicking on
an element in the DOM inspector causes the web page to flash
a border around the element you have clicked.
A drop down menu on the right side of the DOM inspector lets
you examine the CSS rules - both browser and author
settings, and where (which files) the rules are located.
It's a great tool.
Another feature of FF is the JS console. Open another tab
and use this URL
chrome://global/content/console.xul
The JS console reports javascript and CSS errors as you load
different web pages. You can often click on an error and
the console takes you to the line where the error occurred.
I'm always amazed at the CSS and javascript errors that are
reported on major websites. As an example, go to Google
news and then look at the JS console after.
My third suggestion has to do with the way the CSS rules
are defined. There are 3 common ways.
1) a separate external stylesheet - the one you're familiar
with.
2) embedding CSS rules within a style tag in the header like so:
<style type="text/css">
<!--
BODY { font-family: sans-serif; font-size: 10pt }
-->
</style>
3) creating a rule within the element declaration itself.
This usually overrides previous CSS rules established
elsewhere. An example ...
<div class="whatever" style="border:thin dotted navy">
blah blah blah
</div>
The last method is a great diagnostic technique for actually
'seeing' the margins and padding that are being applied to a
block element. I will often use different colors for block
elements that contain other block elements.
Another advantage of the last method is its immediacy (or
specificity). Let's say that you are creating a table less
web page and you have a rule like this.
DIV.stack { float: left; clear none }
Suppose that you have 6 divs in a row like this, they all
stack nicely from left to right, like a 1 x 6 table. But
you want a 2 x 3 layout.
So the 3 div element might look something like this.
<div class="stack" style="clear:left"... </div>
So you only have one general rule (a stack class) instead of
two, and you selectively override general rules only when
you need to. Your CSS style sheets will be smaller and
simpler and development will be faster.
Hope this helps.
Cheers
Jim Sontag
