[novice] Integrating jwysiwyg css

Yes: please read the posting guidelines before posting:

http://csscreator.com/beforepost
http://csscreator.com/node/19116
http://csscreator.com/node/3906

That was your first and biggest mistake. You bought into the "wysiwyg" hype, and quite understandibly since the purveyors of these products tend to advertise widely and people who are ignorant about the web easily fall for that hype as it seems to make sense to them.

However, "wysiwyg" cannot work on the web, because the web is designed in such a way that it cannot. The problem is with the "wyg" part. There is no single "what you get" on the web. There are many things you get and html was designed that way. It is a strength, not a weakness. When used correctly it makes it possible, for instance, for blind people for whom "what you get" is sound, not print still be able to use the web.

So my advice would be to forget about chasing that dream (as bitter experience with it taught me) and learn how to code html and css the proper way from the ground up. It will cost you time and effort now, but save you far more down the road. Writing good html and CSS is actually quite easy to do, but it is rather hard to learn. Once learned and understood though, it is not hard to do and do right.

Ed, read the OP again carefully (look at the screenshot). He's not making his site with a WYSIWYG, he's trying to implement one on his site.

Drat. Well I've reread the OP and it isn't so clear to me that you are right. Looks like either interpretation is plausible, or at least it does to me.

Well, I suppose if you have keen eyes and can read the graphic your interpretation is the more plausible, but I usually just skim over such graphics because they are, at least IME, almost always rather meaningless. When you get old and your eyes get weak you might sympathize...

Since you haven't yet made the page available, I'll take a guess. It is likely the :focus pseudo class rule. This is an accessibility feature that shows which element has focus. To test, in Firefox, tab through the various links. There should be an indicator for where the focus lies. For example, here's what the Firefox default html.css file says:

/* focusable content: anything w/ tabindex >=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus, 
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus, 
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus, 
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus, 
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus, 
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus, 
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
  /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
}

cheers,

gary

Weak eyes has got nothing to do with it and you don't need to be able to read the graphic. Standing 3m away from my monitor, it's quite clearly a WYSIWYG editor inside a webpage: it's a series of buttons above a texarea with a submit button at the bottom.