CSS - Having Problem Styling Links
Hello all,
I am trying to style links on my page and cannot figure out how to do so. I am using a JQuery Framework and perhaps somehow that is messing me up. attached are the two Jquery javascript files. I want to make the links blue, please tell me how to do that. Thank you. Code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery UI Example Page</title> <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Tabs $('#tabs').tabs(); }); </script> <style type="text/css"> /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} .SearchOptions a {color:#990066} </style> </head> <body> <!-- Tabs --> <h2 class="demoHeaders">Tabs</h2> <div id="tabs"> <ul> <li><a href="#tabs-1">Buy Books</a></li> <li><a href="#tabs-2">Sell Books</a></li> </ul> <div id="tabs-1"> <form> <table> <tr> <td>Item 1 <input type="text" name="Item1" /></td> <td>Item 2 <input type="text" name="Item2" /></td> <td>Item 3 <input type="text" name="Item3" /></td> <td>Item 4 <input type="text" name="Item4" /></td> </tr> <tr> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> </tr> <tr> <td>Item 5 <input type="text" name="Item5" /></td> <td>Item 6 <input type="text" name="Item6" /></td> <td>Item 7 <input type="text" name="Item7" /></td> <td>Item 8 <input type="text" name="Item8" /></td> </tr> <tr> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> <td><a href="" class="SearchOptions">More Search Options</a></td> </tr> </table> </form> </div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> </div> <a href="" class="SearchOptions"> dadadada</a> </body> </html> Similar TutorialsI'm using dreamweaver to work on a basic example that I seem to have working fine. However I've uploaded it onto the server and it's coming out as if there was no styleing at all applied inclucing colour. I've showed an example of both the site and code if anyone can help. I should have a load of colums and rows, like tables, wit text in them but all I seem to see is just words laid out with no styling attacted to them......God I've forgotten how awkward code can be at times. Below is the link. http://ballyviewbuilders.com/Centering.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> div.wrapper { width: 750px; margin: 0 auto; text-align: left; } div.1a { float:left; width:190px; background: FFFF00; color:000000; padding: 10px; } div.1b { float:left; width:190px; background: DDDDDD; color:000000; padding: 10px; } div.1c { clear:both; background: EEEE00; width:400px; padding: 10px; } div.1d { float:left; width:80px; height:40px; background: DDDDDD; color:000000; padding: 10px; } div.1e { float:left; width:10px; background: DDDDDD; color:000000; padding: 10px; } </style> </head> <body> <div class= "wrapper"> <div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a </div> <div class ="1a">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div> <div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div> <div class ="1b">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div> <div class ="1d">gfgdfg</div> <div class ="1d">gfgdfg</div> <div class ="1e">g</div> <div class ="1c">Established in 1999 , Ballyview Builders*Limited are C2 registered building contractors based in Ranelagh, Dublin 6 we have a reputation for top quality workmanship and keen prices on all jobs quoted, we hope you enjoy your visit to our website.</div> </div> </body> </html> I'm trying to figure out how to do something like this: Code: <h6>Lorem Ipsum Dolor <span>jan 10 2006</span></h6> And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line. Take a look. Any bright ideas on why this is happening or how to fix it? Thanks. Hi can any one suggest a solution to my problem. I have all my a tags as - a{border-bottom: thin #0066FF solid;text-decoration:none;padding-bottom: 2px} and my img tag as img {border-bottom: none} However I have 4 images in 1 div that just wont accept it. So it must be precedence right. But theres no selector after it that would cause the issue so I've ruled that out. So I tried a more deeper selector. #rightside img/#rightside a img/#rightside img a/ They didn't work. So in frustration I added a class to the 4 images a tag and then tried .info/.info img/.info a img/.info img a/ Still no joy. I then moved the class to the img tag in desperation and tried - .info/img .info Still no joy. I tried all these with the below css - {border-bottom: none} {border-bottom: thin #FFF solid} {border-bottom: 0px} {border-bottom: transparent} {border: none} {border: thin #FFF solid} {border: 0px} {border: transparent} I know it's not precedence because there is 1 image after these in a different p tag that takes effect.ie: no border. It's not a selector on the same tag as there is no border on the tag. I then drop kicked my computer across the room and decided to ask for help. Any one got any ideas? The code looks similar to this - <div id="new-image"> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> <h4><a href="my-site.htm">Link</a></h4> <a href="my-site.htm" class="info"><img src="/images/pic.gif" alt="A picture of the picture" height="100" width="100"></a> </div> the css is - #new-image {text-align: center;width:180px;margin:-10px 0px 13px 15px} .info {border-bottom: none} The a tag css is above this in the css code. Cheers in advance Jazajay Hello everyone! I would like to integrate a very simple purely css-based dropdown menu into my website. My knowledge of css is very basic, so I adapted a free sample menu, boiled it down (mostly through trial and error) to my very specific idea of what it should look like and finally ran into a problem which I could not solve myself so far. The following code represents "my" current code, with placeholder colors, text, links etc.: Code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Menu</title> <style type="text/css"> /* background */ body { background-color: #252525;} /* targeted dropdown button style */ .dd-select {font: 10.5px Verdana; text-transform: uppercase;} .dd-select a:link {color: #ff0000; text-decoration: none;} .dd-select a:hover {color: #ffea00;} /* positioning */ ul.Menu ul{display:none} ul.Menu li:hover>ul{display:block} ul.Menu ul{position: absolute; left:-1px; top:98%;} ul.Menu li:hover{position:relative;} /* shrink to fit */ ul.Menu { float: left;} /* dropdown button */ ul.Menu { margin:0px; list-style:none; padding:0px;} /* menu case */ ul.Menu ul { margin:0px; list-style:none; padding:0px; background-color:#5c5c5c; border-color:#a3a3a3; border-width:1px; border-style:solid;} /* menu element padding */ ul.Menu li{ margin:5px 5px 5px 5px;} /* menu element */ ul.Menu a { display:block; background-color:#454545; text-align:left; padding:4px 9px 5px 9px; font:normal 11.5px Verdana; color: #f7f7f7; text-decoration:none;} /* menu hover */ ul.Menu li:hover>a{ background-color:#333333; color: #00ff60;} </style> </head> <body> <ul class="Menu"> <li><a href="#" target="_top">Select</a> <ul> <li><a href="#" target="_top">Option 1</a></li> <li><a href="#" target="_top">Option 2</a></li> <li><a href="#" target="_top">Option 3</a></li> </ul> </li> </ul> <p> </p> <p> </p> <p class="dd-select"><a href="#">Select (as it should look)</a></p> </body> </html> Now my problem is, I would like the dropdown menu's trigger button (labeled "Select") to look like the text link beneath (styled through .dd-select) instead of having it look like the the rest of the actual dropdown menu. So, different font size, decoration, colours, hover effect and, most importantly, no background color. The dropdown menu should of course keep its original look. Could anyone please give me a hint on how to accomplish this (perhaps with a code example or two) in an elegant way or maybe even refine my code to make it work? That would help me out a lot and I would like to thank everyone for reading and trying to help! Kind regards, Jakob Hi There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> Here's the CSS: Code: #tabnav { float:left; width:100%; background:#FFFFFF url("tab_background.png") repeat-x bottom; line-height:normal; font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-size: 13pt; } #tabnav ul { margin:0; padding:10px 10px 0; list-style:none; } #tabnav li { float:left; background:url("tab_inactive_right.png") no-repeat right top; margin:0; padding:0; } #tabnav a { display:block; background:url("tab_inactive_left.png") no-repeat left top; padding:8px 15px 4px; } #tabnav a:link{ color:293356; text-decoration: none; } #tabnav a:hover{ color:596eba; text-decoration: none; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabnav a {float:none;} /* End IE5-Mac hack */ #tabnav #current { background-image:url("tab_active_right.png"); } #tabnav #current a { background-image:url("tab_active_left.png"); padding-bottom:5px; } Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right. I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance! Code: .clearfix-tabs{ clear: both; } .gk_tab_item_space{ padding: 10px; } div.gk_tab-style3 { position: relative; } div.gk_tab_wrap-style3 { margin: 0 auto;background: #171717; border: 4px solid #822864; } div.gk_tabmenu-style3 { overflow:hidden; } ul.gk_tab_ul-style3 { list-style-type: none; margin: -1px 0 0; padding: 0; } ul.gk_tab_ul-style3 li { background: none; padding: 0; float: left; cursor: pointer; margin: 0; position: relative; } ul.gk_tab_ul-style3 li span { background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0; display: block; height: 28px; line-height: 27px; padding: 0 10px; font-size: 10px; color: #000; text-transform:uppercase; border: 1px solid #e1e1e1; border-left: none; } ul.gk_tab_ul-style3 li.active span { background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0; color: #171717; border: 1px solid #b32784; } div.gk_tab_container0-style3 { clear: both; } div.gk_tab_container1-style3 { overflow: hidden; } div.gk_tab_item-style3 { float: left; overflow: hidden; padding: 10px; } div.gk_tab_button_next-style3, div.gk_tab_button_prev-style3 { width: 24px; height: 24px; background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0; cursor: pointer; position: absolute; top: 43%; right: 0; } div.gk_tab_button_prev-style3 { background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0; left: 0; right:inherit; } div.gk_tab_button_next-style3:hover { background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0; } div.gk_tab_button_prev-style3:hover { background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0; } .gk_tab_container0-style3, .gk_tab_container1-style3, .gk_tab_container2-style3{ position:relative; } If you go to www.brightfusehosting.com/newindex.php you'll see what I mean. The nav menu is screwed up, and the links on the gray tables resemble that almost of the nav bar links. View in IE to replicate the issue. Guys, no time to introduce myself or anything I've been beating my head with this for half an hour now Baiscly I have a div box 700x20px .. And i want a couple of links to be inside it and aligned in the middle of the div (Vertically). However what works in opera doesnt work in FF and IE (all latest versions). And vice versa. If it works in IE it doesnt work in Opera. here's a screenie i5.tinypic.com/544biwz.jpg i have also upped it online he fotoz.hit.bg/new-transitional.html View Source and you can view the whole css, i still havent moved it to seperate file, cuz im not finished with the desgin itself. Thanks in advance! I guess I am not understanding how this works. I am having a problem with creating font/color styles on sublinks. I want all site wide links to be the 12px blue. And the links on my submenu I want to be 10px white. How do I achieve this? Heres my code: a:link { font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 12px; color: #000066; } a:visited { font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 12px; color: #000066; } a:hover { font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 12px; color: #0099FF; text-decoration: none; } a:active { font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 12px; color: #000066; } .sublinks a { color:#FFFFFF; font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 10px; text-decoration: none; } .sublinks a:visited{ color:#FFFFFF; font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 10px; text-decoration: none; } .sublinks a:hover{ color:#0000FF; font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 10px; } .sublinks a:active{ color:#0000FF; font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif; font-weight: normal; font-size: 10px; text-decoration: none; } And here are my links: <div align="center" class="sublinks"><a href="index.php?page=areasofpractice">Areas of Practice</a></div> and the page is: http://www.caffreysmith.com As you can see, the links are not taking css effect. Please help! I'm having a problem with CSS and links. The class for the links is correctly added to the anchor tag and there is nothing wrong with the code. The links are supposed to remain the same except when hovering which all it does then is change the color of the text and put add an underline. However when testing this out, it doesn't work in FF at all and in IE it's fine until you click the link and then it goes back to acting like FF does. It almost appears as if the .link:visted part was setup differently than the rest, but it's not. Here's the code:
Code: a.navtextlink:link{ color: #666666; font-weight: none; text-decoration: none; } a.navtextlink:active{ color: #666666; font-weight: none; text-decoration: none; } a.navtextlink:hover{ color: #000000; font-weight: none; text-decoration: underline; } a.navtextlink:visited{ color: #666666; font-weight: none; text-decoration: none; } If you want to view a live sample, you can do so here. Thanks for any help you can provide. I am useing this css code : Code: a.buttonlike:link, a.buttonlike:visited, a.buttonlike:hover, a.buttonlike:active { text-decoration:none; vertical-align:middle; background-color:#dddddd; color:#000000; height:16px; padding:3px; margin: 0px 2px 0px 0px; border-left:1px solid #ffffff; border-top:1px solid #ffffff; border-right:1px solid #000000; border-bottom:1px solid #000000; text-align:center; font-size: 12px; } to make the "buttons" on the right side of this page : http://tampabay-online.org/eventdet...erby=firstnames but when I change the margin top (because it doesn't quite fit right from Code: margin: 0px 2px 0px 0px; to Code: margin: anythingpx 2px 0px 0px; it doesn't seem to make a differance, it stays right where it is. and adding a <br /> to the line before it makes the "buttons" too far down. Any ideas? Thanks This is going to be difficult to explain, but i will try my best. I have a table on my webpage, and the height is not defined as my content will define how much space the table height should take up. In my table, there are two columns. One is for all my content (text/images) and the other is for a link. Now this link is set out like this, Quote: <td width="50" bgcolor="#000000"> <div id="j"><a href="j.html"></a></div></td> Now, my CSS code to style this link is like the following, Quote: #j { display: block; width: 50px; height: 100%; background: url('normal.gif') no-repeat 0% 50% !important; } #j a { display: block; width: 50px; height: 100%; background: url('normal.gif') no-repeat 0% 50% !important; } #j a:hover { background: #FFFFFF url('hover.gif') no-repeat 0% 50% !important; } Now the thing is, the website works great in firefox. Firefox picks up the height 100% great. However, in Internet Explorer, it doesnt pick up the height 100% business. so what occurs, the gif images are displayed at the very top of the column (i think internet explorer somehow interprets it as height="0") Now, what is my easiest solution? This is a real blow in the design of my page because i was just browsing/checking/testing my page in firefox, and when i accidently blew it up into internet explorer. Problems problems problems.. Hello My problem is maybe a easy to solve one, but I realy don't know how to get it right. I have a list of links and want them equaly vertical spaced between all the line of links. link1 (space) link2 (space) link3 What I got doesn't look right in IE and Netscape at the same time. Is there a css tactic to get it right in both browsers? Please can someone help me? Hi I've never posted on a forum before but I am having some css layout issues. Here is an example: URL Basically, only some of the links on the side of the page work. Some just can't be clicked on at all. I have noticed that the ones that can't be clicked on all seem to be parallel with text in the middle column that wraps. It's almost as if the text isn't wrapping in the middle column and carrying straight on and covering the links on the right so they cannot be clicked on. I'm assuming this is something to do with the css as it happens all over the site where the same situation occurs. Has anyone come accross this before or knows how to stop this from happening? Any help would be much appreciated. Also, this only happens in IE not in Firefox. If you need to see the code or the css let me know what you need and i'll post it. Thanks in advance, Bruce I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that? I used a script from Dynamic Drive that allows the user to change font on demand (They can size up/down the font on the website). But I ran into problems in that this spilled over to increasing the fontsize of the links (only A but not not rollover). I would prefer that the links are not affected by this script. I would rather the links stay with the sizes I specified in the CSS. Please see the website here to understand what my problem is: nudipu.org.ug/nsites. My intension was to make it as perfect as it is on their sister site add.org.uk Can somebody advise me please? The script I used is located on http://www.dynamicdrive.com/dynamicindex9/textsizer.htm Thank you folks. Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; } Hi, my xml code is: <room> <features> <pool/> <Aircon/> <Radio/> <DVD/> <beds double="2"/> </features> </room> <room> <features> <pool/> <TV/> <VCR/> <beds twin="1" double="2"/> </features> </room> i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list. This is the code i have so far: features{ } features:before { content:"Features"; font-weight:bold; } beds:before{ content:"Beds: "; } beds[sofa-bed]:after{ content:attr(sofa-bed)" x Sofa-bed "; } beds[double]:after{ content:attr(double)" x Double "; } beds[twin]:after{ content:attr(twin)" x Twin "; } The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed. Any idea's? I have a menu constructed <div><ul><li><a><img><p>. The li is margined as 16% to space a given number of links across the page in the 100% div. I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work. Any ideas how I can get the <a> border to surround the <img><p> tags? 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 |