Using your browser developer tools or code validation tools, can help you identify issues, but it can also help you create advanced customizations to the Weaver themes.
This Tutorial will give you the basic principles on how to use these tools to figure out Custom CSS rules for your site, as well as find potential errors in your content.
 
Before you start, you should have checked:
Weaver Help on CSS and CSS snippets

When trying to fix styling, you should always follow the following principle.

• First Check thoroughly if there is a theme option for it
• Second if there is not exact option for it, check if there is another option that styles the same element and has a CSS+ box. If there is, you can simply add the CSS rule in the box inside curly brackets like {border:1px solid black;}
• Third, If there is no theme option for the element in question, you will need to figure out the selector to use in order to create a Complete CSS rule (selector {….}) and place that rule in the Theme Custom CSS Rule box. This is where the developer tools can help!

 
Given how important and helpful it is to be able to use a browser development window to identify errors or places to make style/layout changes, I thought I would volunteer some basic principles I figured out while learning these tools.

Obviously I still encourage everyone new to them to learn these tools searching the web for tutorials and videos on this subject.
There is a video on how to use Firebug on this site here: http://weavertheme.com/support/tutorials/other-tools/

So here are some tips of How to use the developer window

On most browsers, you can open the Developer tool window by hitting F12 or right clicking on a page element and selecting “Inspect Element”. They may have the tool at the bottom or on the side.

Warning, Examples will use selectors specific to a specific weaver theme version/generation. They may not apply to the theme generation you are using.

Finding the CSS selector that defines what the rule applies to

When trying to find out how to style or correct the style of an Item on a page, the first thing to do is to use the select tool and click on the Item.
A frame appears around the object, the corresponding HTML line is highlighted in the HTML window, and the rules for that lines show up in the style window.

If the correction you need to make appears to have an existing rule at that level, you can verify if the rule is the right one by trying to change the value directly in the style window. If when you change the value you see the proper effect in the page then you probably have a good candidate.

If you see no rules for what you want to do at that level, it may be because objects are often nested several levels deep, and you may need to explore the levels above your initial element. You should always do that anyway, to understand the structure around your element.

Observe the nesting hierarchy in the HTML window, and start clicking on the lines above or parents of the initial one, and observe the framed object in the page. When the framed object contains your initial one, the style may be in that above level. This is especially important when trying to fix padding and margins.
Try to find the first working rule the closest to the level of your initial object.

Obviously understanding enough HTML and CSS to make sense of the structure of the HTML page is important, and you will get better at it as you play with it.

Once you find under which selector (combination of HTML tag, ids and or classes) the working rule is, pay attention to see if that selector is specific to the object, or if it is inherited from another entity.
If you find different levels where a change appears to work, think about where it makes the most sense and if other entities may be affected by the change that you would not want to be.

Constructing the rule

Once you think you know the Selector (classes, IDs, html tag…) involved in the styling of your element, the first thing to do is check in Weaver if there is a place that offers a setting option for it. You should, in order of preference, check if an option is available, next look for  a CSS+ Box on an option that affects the same element, and only last choose to create a custom Rule.

If you cannot find an existing option or CSS+ box, you can ask on the forum providing the results of your findings. Ultimately if there is no option or CSS+ box, you can then create a Rule and put it in the theme CSS rule box (Weaver II:  Advanced Options > Head Section > Custom CSS rule box; Weaver Xtreme: Main options > Fonts & Custom > Custom CSS Rule box), or in one of the Total CSS boxes (weaver II).

When the rule you need to change appears to be under a generic selector that will apply to many other things and not just the element you are trying to change, you can usually figure out a combination of selectors to restrict your modification to your element.
Fully understanding how selectors get combined is fairly extensive and you need to research tutorials on the subject to fully understand it, but below are some basic principles that can help getting started.

Some easy examples:
If you want to change an element but restrict the change to a specific page or post, you can usually just add the page or post id in front of it like
.page-id-xxx .class {rule}
.postid-xxx .class {rule}
Where xxx is the page id or the post id, class is the class you have already identify, and rule are the css rules you need

To limit a rule to a post, you can usually place the rule in the Per Post Style Box of the Weaver Options for this Post Section of the Post editing page, instead of adding the .postid-xxxx class
Same thing if you want to restrict your rule to another class like one of the Theme Mobile classes you would do something like
.weaver-phone .class {rule}

Weaver II mobile basic classes:
.weaver-mobile (phones and small tablets)
.weaver-phone (phones)
.weaver-smalltablet (small tablets)
.weaver-tablet (large tablets)

Xtreme mobile classes:
.is-desktop
.is-mobile
.is-smalltablet
.is-phone

Mobile classes differs on the various Weaver theme, check the help for full details

Some less trivial cases.
Often your element, or one above including it, will have an id. You will see id=”idname” in the HTML line. If you want to restrict your generic rule to that object, you will then need to add the #idname to the rule class, but depending on the hierarchy, sometimes you need to add it before or after. The order depends on the hierarchy, the selector that is on the parent comes before the one on the child.

The structure of the rule will then look like
#idname .class {rule}
Or
.class #idname {rule}

And if both selectors are on the same level (same HTML object), then you need to attach the restricting selector to the generic one (no space), like when wanting to style the secondary menu bar.
Both Menu bars are styled using the .menu_bar class, to restrict styling to the secondary one, you add #access2 in the front of that class so that the rule looks like

#access2.menu_bar {background-color:#FFFFFF;}

Where things become more complicated is for rules styling links, lists, tables, etc…CSS snippets and web search are your friend refining that knowledge.

The good thing is that there is no harm in trying a rule, if it works, great, if not, remove it, try something else and learn in the process

One more basic thing, the use of !important

Because CSS understands rules upon rules upon rules, there is a hierarchical system that decides who wins. Again research these rules for a full understanding, but know that when you need to supersede a rule that has priority over yours, you can use !important after the rule property to give yours precedence
For example the rule

{font-size:120%;}

Would become

{font-size:120% !important;}

Always try without important first, and if it fails try with it.

Again make sure that you read the references at the top of this post, and go though all the examples and CSS snippets to see these rule combinations in action and start learning how they work.

Hope this helps, and anyone with corrections or additions, please chime in.

Other source of information for those eager to learn

http://webdevrefinery.com/forums/topic/6-just-starting-htmlcss/

https://developer.mozilla.org/en-US/docs/Web/HTML

https://developer.mozilla.org/en-US/docs/Web/CSS
 

HTML and CSS Validator

Certain HTML errors like opened and not closed tags and vice versa can break the rendering of your page. Sometimes some browser will recover from them sometimes not, leading to very unpredictable behavior.
So when your layout starts breaking up for no apparent reason, it is always a good thing to run your site through a validator like http://validator.w3.org/ or http://html5.validator.nu/ 
 
Note:
If you are on a local or protected site and you cannot paste the url in the validator, the validator does take manual input. You can open the page, view source, copy all, and paste it into the validator
 
Now with the arrival of HTML5, a lot of the errors in the Validator can be ignored as irrelevant, but open / close tag errors and nesting errors should be investigated.
 
When you run the site through the validator, it will give you a list of errors with a line number and extract of the code with a highlight of the error and an explanation of the error. Again the ones you want to pay attention to are errors telling you there is an open tag without close, or a close without an opening, as well as bad HTML tag nesting.
 
Small HTML reminders about tags:
When you open an HTML tag like for example <div> or <a> or <p>….
You need to close it like </div> </a> </p>…..
Tag can be self closed like for example image tags that will look like
<img …….. />
Nesting also need to be respected
<div>xxx<a>….</a>xxxxx</div> is valid
<div>xxx<a>…xxx</div></a> is not
 
Refer to an HTML documentation to understand what is legit and what is not 
 
So when you see such an error, the first thing you do is open the source of the page. Right click on your website page, select View Source.
There each line has a number that matches the number reported in the error, so you go to that line number, locate the error, make sure it is a valid error, as sometimes the validator can be confused and wrongly report an error.
 
Note:
It can sometimes be hard to track the closing tag that goes with an opening tag and vice versa. In complex situation, you may want to use an HTML editor like Notepad++ or others that will automatically highlight the open and close that go together, making it easier to see if and where there is a problem.
Once you located the error, use the context to understand where the content comes from, Post content, page content, widget content etc…
Then go to where that content was entered in WordPress Admin and fix the errors.
 
When you have an open close tag error, it can cause a ripple effect in the validator that will report a lot of other errors after the initial one, sometimes only the first one needs to be fixed. So fix them one by one and recheck in between.
 
Here is another site for div tag issues http://www.tormus.com/tools/div_checker

 