jwcane

Ok, done, tks

OK thanks to all of you, the underline is finally gone. Solution was a hybrid of Foxy's a img + Sacred's 1.a) less the vertical-align statement, as in: a { color: #CCCCCC; line-height: 0; } td > a { display: inline=block; } a img { vertical-align: middle; } a:hover { background-color: #d3d3d3; color: #000000; text-decoration: none; }

OK the ohover attribute now reads as follows: a:hover { background-color: #d3d3d3; color: #000000; vertical-align: middle; text-decoration: none; Line-height: 0; border: none; } Adding that line makes a barely perceptible change in alignment on hover, image shifting slightly downward, but underlining remains visible.

"Hot graphic" above, refers to an image containing a hyperlink. Pls. excuse loose terminology. Underscore occurs only on hovering. All of the css code that I am using is in the basic posting. For a running example, please see this page, and hover over any image in main window. In reply to your earlier reply, there is no white space between code elements, and in any case the underline occurs only on hovering, not in the plain html output.

my css has the following specs for hot graphics: a { color: #CCCCCC; border: 0; } a:hover { background-color: #d3d3d3; color: #000000; text-decoration: none; Line-height: 0; border: none; } Would like to know the syntax to defeat the _underscore_ when hovering. Have looked around, and have tried a number of possibilities, without tumbling to the correct one. Could one of you please show me the property that controls this behavior.

Changed to Background-Image, with no change in results.

My css has a background style with non-repeating image, that works fine: .HeaderImg1b { background-image: url("/photodesign/images/pgHeader-1b.jpg"); background-repeat:no-repeat; } To create that image on the fly, the <div style tag is more convenient, as in: <div style="background: url(/photodesign/images/pgHeader-1b.jpg)>" </div> This latter code has some error that is preventing the image from being rendered. Have also tried adding quotes inside parens with and without the outer set of quotes, and no quotes. Behavior is unchanged. Would appreciate an idea of what is wrong.

Will do, many thanks.

Html and css are attached. Thanks. photo.css TestPage.html

My form elements are all within table cells. Redundant 'align="left"' commands were added to tables, rows and cell tags, just to be sure of following: I'm finding that with <input type="checkbox"...> and <input type="radio button"...>, some unknown setting in my style sheet is centering them, and adding a displacement between those elements and their adjacent text labels. Removing the style sheet reference, removes the error. In other cells a <TextArea...> and an <input type= "select"...> are both correctly left-justified, so I'm at a loss to explain why this is happening only to the first two elements. Possible css tags in current use, that might bear on this issue, include: body{ /* font, color, etc... */ text-align:left; } form { /* color, font-size, line-height */ text-align:left; } input, textarea { border:0px; padding: 2px; margin: 8px; } input { width: 150px; } textarea { width: 278px; } label { display: block; text-align: left } Any ideas appreciated.

My html form has its own class with defined font size. Plain text entered within the form (outside a control) looks like it is in some default format not governed by the form class definition. Only solution I have found is to surround each instance with custom-defined tags, i.e., <tx1>...</tx1>. Please let me know if there is a class definition that will apply to all plain text throughout the form, as an alternative to individual tags (above).

Thanks Dave, and I'm doing the comments already. It works ok, but variables will be welcome.

Not sure I understand your question. I am new to these advanced concepts. I am just trying to conform to the sample css and html coding that you have posted in this thread, while adapting that coding to my needs.

Here is revised css content: .Label, .Label.rounded { color: #F8F4E9 /*Cream*/ } .Label.rounded input, .Label.rounded textarea { border-radius: 5px; background-color: #F8F4E9; /*ctlBG, Cream*/ color: #2F3B2E; /*ctlContent, dkGreen*/ } .Label.rounded input:focus, .Label.rounded textarea:focus { border-radius: 5px; background-color: #EAF9E9; /*ctlBG, ltGreen*/ color: #2F3B2E; /*ctlContent, dkGreen*/ } In html, the following example: <label class="rounded"> First Name: <input type="text" name="fname" placeholder="Enter first name"> </label> ...is rendered as expected, with following exceptions/questions: -- The leading text, "First Name:", is still being rendered in black, for edit and TextArea controls. One option might be to simply not use any leading text, since the placeholder fills that function. -- When it has focus, the control turns to square corners (border-radius=0). Is this standard behavior that cannot be modified? -- Can the (default color = blue) focus-box color be modified? -- In the case of the TextArea input, if I eliminate the leading text, is there a counterpart to 'PlaceHolder'? Tried to specify 'PlaceHolder' in my TextArea, and it was not rendered

If it is possible to assign a unique name to a custom color on a style sheet, would like to see an example.n Thanks.