CSS - Styling Buttons

I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet.

The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page.

Bottom of the Page
http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/

The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code.

One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags.

The following class style did not produce the <textarea> desired attributes.

Code:

pre.CodeExample {
	/*background-color: transparent;*/
	border: medium inset #CCCCCC;
	font-family: "Courier New", Courier, monospace;
	margin: 1em 2em 1em 2em;
	overflow: auto;
	padding: .5em .5em .5em .5em;
	white-space: nowrap;
}

Please let me know what are the default CSS attributes for the <pre> and <textarea> tags.
Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link.

http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote

The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed.

div.ExampleOutput
pre.CodeExample

Hi all

I just want to change the colour of the dot on a ul/li list. Can anybody tell me how I can do that in CSS?

Cheers.

Hello,

I am applying a style to a anchor tag. This anchor is created by an
ASP.NET page and is inside a list item.
I know the style is working because I applied it to the anchor in a
page that has only this.

.Test
{
background-color: #101010;
color: #E2E2E2;
padding: 4px 10px 6px 12px;
text-decoration: none;
font: normal 1.2em Verdana, Geneva, sans-serif;
}

<a href="Test.aspx" class="Test">Testing</a>

However, when I apply it to the anchor inside the list item I don't
get the bottom margin unless I add "display: block" to the style! But
then the background is extended 100%.

I don't know what is going on. I tried everything I could think off.
Here is the code where the Test style is giving me problems:
...
<li>
<label for="tbMessage" id="lMessage">Mensagem<span
class="Required">*</span></label>
<textarea name="tbMessage" rows="4" cols="20" id="tbMessage"></
textarea>
</li>
<li>
<a id="lbSubmit" class="Test"
href='javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl00$ctl00$cphSite$cfSendContact$lbSubmit",
"", true, "ContactForm", "", false, true))'>
Send
</a>
</li>
</ul>

Any idea why this is happening?

All I am trying to do is to make my anchor look as a simple button.

Thank You,
Miguel

Hi all

I just want to change the colour of the dot on a ul/li list. Can anybody tell me how I can do that in CSS?

Cheers.

I am trying to add sub navigation to my footer area. I tried codes below but didnt work. http://www.pearl.ru/isdunyasi/

#footer {
width:800px;
font-size:10px;
color:#aaaaaa;
}
#footer .navigation{
width:800px;
background:#aaaaaa;
}
#footer .navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
}
#footer .navigation li a{
display:block;
padding:0 5px;
font-size:12px;
text-transform:uppercase;
color: #FFFFFF;
}
#footer p {
padding:0;
margin:0;
text-align:center;
}

Trying to match up http://kansasoutlawwrestling.com/v3/index.html from http://kansasoutlawwrestling.com/v3/wrestling2.jpg .

Trying to figure how what I should do for css styling for the poll in the bottom right and see what others thing about how that right div looks in general.

Hello all, need a little help on a small link styling issue I am having. I am using the following style for links with the target="_blank" attribute, and it is working fine, but it is also applying itself to images that are linked with the _blank attribute:

Code:

article.post a[target~="_blank"],
article.post a[target~="_blank"]:visited {
	background:url(/Images/web/template/body2alt/external.png) center right no-repeat;
	padding-right: 12px; 
	color: #0066CC;
	text-decoration:underline;
}

Is there another line I can add to my CSS file so it will only apply this style to text and not images? I tried the following, but it didn't help:

Code:

article.post img a[target~="_blank"],
article.post img a[target~="_blank"]:visited {
	background:none;
	padding:0;
}

Thanks for any help you can offer.

Hi I wonder if you can help me im just doing some stuff with css as practice and need to know about table bordering basically i can border the intire table and all the cells but i just want to be able to put a border around the rows not the individual cells but the rows in the table

Hello,

I am creating a simple navigation bar using a list.
My anchor tags inside each list item have a background and margin. The problem is they are overlapping.
I then added to the li tag margin-top: 20px.
The problem is that the bottom background of the last element disappears.

I think I might doing something wrong on my styling because when I fix something, something else gets wrong.

Could someone, please, help me out?

HTML:

<ul id="wmNavigation" class="Bar">
<li>
<a title="Page1" href="http://www.name.com/page1">Page1</a>
</li>
<li>
<a title="Page2" href="http://www.name.com/page1">Page2</a>
</li>
<li>
<a title="Page3" href="http://www.name.com/page1">Page3</a>
</li>
<li>
<a title="Page4" href="http://www.name.com/page1">Page4</a>
</li>
</ul>

CSS:

ul.Bar {}

ul.Bar li
{
font: normal 1.2em Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
margin-top: 20px;
}

ul.Bar li a
{
background-color: #202020;
color: #E2E2E2;
padding: 4px 10px 6px 12px;
text-decoration: none;
}

ul.Bar li a:link , ul.Bar li a:visited {}
ul.Bar li a:hover, ul.Bar li a:active, ul.Bar li a:focus
{
background-color: #303030;
}

Thanks,
Miguel

I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size)..

Is there an easy way to do this?

for example

http://member.classifieds.com/userjoin.php

the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this.

Hello,

I am trying to style my form inputs, textareas and selects as follows:


input, select, textarea {
border: solid 6px #ECF0F9;
color: #252525;
font: normal 0.75em Verdana, Geneva, sans-serif;
padding: 0.25em;
width: 520px;
}


I am having a few problems:


Firefox 3:


1. The select is narrow than the inputs and textareas;
2. When I click the select the dropdown borders look different ...
some are thinner than others.


IE 7:


1. The select is narrow than the inputs and textareas;
2. The border of the select is not changed.


What am I doing wrong and how can I make the appearance of a Select
look the same across various browsers?

Can I do this with JQuery?

Thanks,
Miguel

Hi,
This will be a quick question. Why cant I style ul inside a div as:
.css-tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
background:#EFEFEF none repeat scroll 0 0;
}

<!-- Left column -->
<div class="floatLeft width73">
<!-- the tabs -->
<ul class="tabsss">
<li><a href="#first">Tab 1</a></li>
<li><a href="#second">Tab 2</a></li>
<li><a href="#third">Tab 3</a></li>
</ul>
</div>

I set up a class (named "emphasized") to be bold, italic and color #087112. The color is being applied but for some reason the font is not appearing bold or italicized. (See "Introduction to EFT" text.)

The bullets (set up in css as id selector "li") are not being styled either (same thing, the color is applied but not the list styling).

Since I'm a new user I'm not allowed to put links in my post but you can see the pages he

HTML page can be found at tinyurl dot com /da97nb
CSS can be found at tinyurl dot com /de9tqe

Help! And thank you!

I wrote a little div based expandable tree but am having trouble setting some of the conditional styling when a div has children.

What I'd like, is that when a div has children, the "font-weight" should be set to bold. Ideally, I'd also like to use the "div:after" property to append a '>' indicating that the div has children, but that's not critical.

I tried the following but it didn't work right:

Code:

/* Styles the child, not the parent */
div.tnode > .tnode {
	display: none;
	font-weight: bold;
	}

/* Doesn't do anything */
div.tnode:after > .tnode {
	content: '>';
	}

And here's the basic css with html

Code:

<html>
	<head>
		<style>
			/* Node container styles */
			div.tcontainer {
				width: auto;
				height: auto;
				font-family: Lucida Grande, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
				font-size: 12;
				color: black;
				padding: 5 5 5 30;
				}
			
			/* Node styles */
			div.tnode {
				display: inherit;
				padding: inherit;
				}
			
			div.tnode:hover {
				cursor: pointer;
				}
			
			/* Node child styles */
			div.tnode > .tnode {
				display: none;
				font-weight: bold;
				}
			
			div.tnode:hover > .tnode {
				display: block;
				}
			
			/* doesn't work
			div.tnode:after > .tnode {
				content: '>';
				}
			*/
		</style>
	</head>
	<body>
		<div class='tcontainer'>
			<div class='tnode'>North America
				<div class='tnode'>USA
					<div class='tnode'><img src='http://images.infoplease.com/images/states_imgmap.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
				<div class='tnode'>Canada
					<div class='tnode'><img src='http://www.infoplease.com/images/mapcanada.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
				<div class='tnode'>Mexico
					<div class='tnode'><img src='http://www.infoplease.com/images/mmexico.gif' /></div>
					<div class='tnode'>States/Provences</div>
				</div>
			</div>
		</div>
	</body>
</html>

Any help appreciated

Thanks

Ken

Hi is there anyway of making the height of the textbox smaller. I know you an change the width of it

Thanks