PDA

View Full Version : <u></u> does not do underline in css



Toniee
Jan 20th, 2007, 07:08 AM
Hi,

Why doesnt my underline tags underline on my website?

Whats wrong with my css?

/*
Theme Name: U5
Theme URI: http://utombox.com
Description: This theme is form <a href="utombox.com">UtomBox.com</a>.
Version: 6.11
Author: Utom
Author URI: http://utombox.com
*/
* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}

blockquote {
margin-left:15px;
background-color:#F8F5D1;
border-left:5px solid #F9CA68;
border-right:1px solid #F9CA68;
border-bottom:1px solid #F9CA68;
border-top:1px solid #F9CA68;
margin-right:15px;
padding:4px;
}

#flickrrss {
margin-left:390px;
padding-top:7px;
position: absolute;
}

.navigation {
font-family:"Trebuchet MS", Verdana, sans-serif;
margin-bottom:5px;
font-size:12px;
}

.navigation a {
color:#3E6697;
text-decoration:none;
}

.navigation a:hover {
color:#3E6697;
text-decoration:underline;
}

.navigation .alignleft {
float:left;
}

.navigation .alignright {
float:right;
}

.post {
margin-right:10px;
clear:both;
border-bottom:1px dotted #999999;
margin-bottom:5px;
padding-bottom:10px;
margin-top:10px;
}

.post h1 {
font-size:30px;
font-family:"Trebuchet MS", Verdana, sans-serif;
}

.post h1 a {
color:#4374b0;
text-decoration:none;
padding-left:1px;
padding-right:1px;
}

.post h1 a:hover {
color:#4374b0;
text-decoration:underline;
padding-left:1px;
padding-right:1px;
}

.post h2 {
font-size:20px;
font-family:"Trebuchet MS", Verdana, sans-serif;
}

.post h2 a {
font-size:20px;
color:#4374b0;
text-decoration:none;
padding-right:1px;
margin-top:5px;
}

.post h2 a:hover {
font-size:20px;
color:#4374b0;
text-decoration:underline;
padding-right:1px;
margin-top:5px;
}

.post small {
font-size:10px;
color:#666666;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.post small a {
color:#3E6697;
text-decoration:none;
}

.post small a:hover {
text-decoration:underline;
}

hr { clear:both; border:0px;
background-image:url(/images/hor_div.gif);
background-repeat:repeat-x;
height:1px;
background-color:#FFFFFF;
padding:0px; }

body {
overflow:auto;
background:#fff;
color:#fff;
font-size:11px;
line-height:22px;
font-family: "Verdana", Lucida Grande, Arial, Helvetica, sans-serif;
}

p {
font-size:11px;
margin:0 0 10px 0;
}

p a {
color:#333;
text-decoration:none;
margin:0;
margin-bottom:15px;
}

p a:hover {
color:#333;
text-decoration:underline;
margin:0;
margin-bottom:15px;
}

h1, h2, h3, h4, h5, h6 {
font-family:"Trebuchet MS";
}

.entry strike{
text-decoration:line-through;
}

input, textarea {
background:#fff;
border:1px solid #999;
font:11px "Verdana", Arial, Helvetica, sans-serif;
color:#333;
padding:2px;
}

input[type=text]:focus, textarea:focus {
background:#fff;
border:1px solid #666;
font:11px "Verdana", Arial, Helvetica, sans-serif;
color:#333;
}

#wrapper {
background:#fff;
margin:0 auto;
padding:0 5px;
width:990px;
position: absolute;
}

#header {
height:125px;
background-image: url(http://tonycai.com/images/headertop.gif);
background-repeat: no-repeat;
}

#headerimg {
height:90px;
width:auto;
}

#headerlinks {
background-image: url(/images/headerlinks.gif);
background-repeat: repeat-x;
height:30px;
width:auto;
}

#headerimg .description {
display:none;
}

#box {
padding:0 20px 20px;
}

#content, #sidebar {
float:left;
margin:0 20px 0 0;
}

#content {
width:550px;
color:#333;
}

#content2 {
width:550px;
color:#333;
float:left;
margin:0 50px 0 0;
}

.narrowcolumn a {
color:#333;
text-decoration:underline;
margin:0;
margin-bottom:15px;
}

.narrowcolumn ul.u_datetime {
background:#666 url("images/datetime.png") no-repeat 0 0;
width:60px;
height:60px;
float:left;
text-align:center;
color:#FFF;
margin:0 10px 0 0;
}

.narrowcolumn li.u_month {
font-size:10px;
font-family:"Georgia", Arial, Helvetica, sans-serif;
line-height:20px;
}

.narrowcolumn li.u_day {
font-size:20px;
font-family:"Georgia", Arial, Helvetica, sans-serif;
font-weight:700;
line-height:20px;
}

.narrowcolumn li.u_year {
font-size:12px;
font-family:"Georgia", Arial, Helvetica, sans-serif;
font-weight:700;
line-height:20px;
}

.narrowcolumn h2 a {
color:#4374b0;
font-size:20px;
margin:0;
}

.narrowcolumn .u_tag, .narrowcolumn ul.u_postinfo li {
line-height:23px;
margin:0 10px 0 0;
padding:0 0 0 20px;
}

.narrowcolumn .u_tag {
background:transparent url("images/tag_blue.png") no-repeat left center;
}

.narrowcolumn .u_author {
background:transparent url("images/user.png") no-repeat left center;
}

.narrowcolumn .u_timepost {
background:transparent url("images/time.png") no-repeat left center;
}

.narrowcolumn .u_category {
background:transparent url("images/folder.png") no-repeat left center;
}

.narrowcolumn .u_comment {
background:transparent url("images/comments.png") no-repeat left center;
}

.narrowcolumn .entry {
clear:both;
padding:10px;
overflow : hidden;
}

.narrowcolumn .entry blockquote {
margin-left:15px;
background-color:#F8F5D1;
border-left:5px solid #F9CA68;
border-right:1px solid #F9CA68;
border-bottom:1px solid #F9CA68;
border-top:1px solid #F9CA68;
margin-right:15px;
padding:4px;
}

.narrowcolumn .entry img {
vertical-align: middle;
margin:5px;
}

.narrowcolumn .entry a:hover img {
border:0px solid #FFF;
vertical-align: middle;
}

.narrowcolumn .navigation {
height:20px;
margin:0 0 20px;
}
.narrowcolumn .navigation_page a, .narrowcolumn .navigation_page .utompage{
font-size: 10px;
float: left;
height: 20px;
padding: 0 5px;
line-height: 20px;
margin: 0 1px 1px 0;
}
.narrowcolumn .navigation_page a{
background: #fff;
border:0px solid #fff;
color: #666;
}
.narrowcolumn .navigation_page a:hover, .narrowcolumn .navigation_page .utompage{
color: #4374b0;
background: #fff;
border:0px solid #fff;
}
.narrowcolumn .alignright {
float:right;
}

.narrowcolumn .postmetadata {
border-top:1px solid #fff;
border-bottom:1px solid #fff;
margin:20px 0;
padding:10px;
}

.narrowcolumn .postrss2 a {
background:transparent url("images/rss_big.png") no-repeat 0 0;
position:absolute;
width:80px;
height:80px;
overflow:hidden;
text-indent:400px;
line-height:200px;
margin:-5px 0 0 400px;
}

.narrowcolumn .postmetadata li {
line-height:23px;
padding:0 0 0 20px;
}

.narrowcolumn .postdatetime {
background:transparent url("images/time.png") no-repeat left center;
}

.narrowcolumn .postcategory {
float:left;
background:transparent url("images/folder.png") no-repeat left center;
margin:0 10px 0 0;
}

.narrowcolumn .posttag {
float:left;
background:transparent url("images/tag_blue.png") no-repeat left center;
}

.narrowcolumn .posttrackback {
clear:both;
background:transparent url("images/arrow_refresh.png") no-repeat left center;
}

.narrowcolumn .postedit {
clear:both;
background:transparent url("images/pencil.png") no-repeat left center;
}

span.ugr {
float:left;
width:50px;
height:50px;
border:0px solid #666;
margin:0 3px 3px 0;
}

.narrowcolumn .entry ol li {
list-style:upper-roman;
margin-left:30px;
}
.narrowcolumn .entry ol {
padding-bottom:10px;
}
.narrowcolumn .entry ul {
padding-bottom:10px;
}
.narrowcolumn .entry ul li {
list-style:disc;
margin-left:30px;
}

.narrowcolumn h3#comments, .narrowcolumn h3#respond {
font-size:11px;
margin:10px 0;
}

.narrowcolumn ol.commentlist {
border:0px solid #666;
border-bottom:none;
margin:0 0 20px;
}

.narrowcolumn ol.commentlist li {
border-bottom:0px solid #666;
background:#fff;
padding:10px;
}

.narrowcolumn ol.commentlist li.alt {
background:#fff;
}

.narrowcolumn .commentlist .uar, .narrowcolumn .commentlist .uar a {
font-size:12px;
font-weight:700;
color:#333;
}

.narrowcolumn .spost, .narrowcolumn .commentlist p {
clear:both;
}

.narrowcolumn #comment {
width:80%;
}

#sidebar {
width:100px;
color:#666;
}

#sidebar h2 {
font-size:18px;
color:#38b63c;
margin:10px 0;
}

#sidebar .rss_feed, #sidebar .del_icio_us {
margin:25px 0 0;
}

#sidenotes {
float:right;
width:180px;
}

#sidenotes #s {
width:130px;
}

#searchsubmit {
font-size:10px;
height:22px;
}

#sidenotes h2 {
font-size:18px;
color:#f1044c;
margin:10px 0;
}

#sidenotes a {
font-size:12px;
color:#333;
}

#rencent_entrie {
float:left;
width:250px;
color:#999;
}

#rencent_entrie .reptime {
font-size:10px;
color:#666;
display:block;
}

#rencent_entrie li h2, #rencent_entrie li h2 a {
font-size:14px;
color:#F1044C;
margin:10px 0 0;
}

#footer {
border-top:1px solid #222;
border-bottom:1px solid #222;
background:#111;
padding:20px;
}

#footer .query_posts, #footer .u_links {
width:250px;
float:left;
margin:0 20px 0 0;
}

#footer .u_flickr {
width:270px;
float:left;
}

#footer h2 {
font-size:18px;
color:#999;
margin:0 0 10px;
}

#footer .u_links ul li {
width:50%;
float:left;
}

#footer .u_flickr a {
float:left;
display:block;
margin:0 8px 8px 0;
}

#footer a:hover img {
border:2px solid #4374b0;
}

#utom2006 {
height:30px;
color:#999;
font-size:10px;
padding:0 20px;
}

#utom2006 .copyright {
float:right;
line-height:20px;
padding:5px 0;
}

#utom2006 .validate {
float:left;
line-height:20px;
padding:5px 0;
}
.xhtml, .css {
padding:3px 15px 3px 25px;
}
.xhtml {
background:transparent url("images/xhtml.png") no-repeat left center;
}
.css {
background:transparent url("images/css.png") no-repeat left center;
}

.udownloads a {
display:block;
width:280px;
height:80px;
background:transparent url("images/downloads.png") no-repeat 0 0;
margin:0 0 20px;
padding:10px;
}

.entry3 {
margin:10px 0 0;
}

.udownloads a:hover {
background:transparent url("images/downloads.png") no-repeat 0 -100px;
}

.udownloads a img {
float:left;
margin:0 10px 0 0;
}

.udownloads strong {
display:block;
color:#000;
}

.hl-surround {
background-color:#fff;
border:1px solid #666;
margin-bottom:5px;
width:400px;
overflow:auto;
text-align:left;
padding:8px;
}

.hl-surround, .hl-surround pre, .hl-surround span {
font:normal 9pt 'Courier New', monospace;
}

.hl-default {
color:#000;
}

.hl-code {
color:Gray;
}

.hl-brackets {
color:Olive;
}

.hl-comment {
color:#fa0;
}

.hl-quotes {
color:#8b0000;
}

.hl-string {
color:Red;
}

.hl-builtin {
color:Teal;
}

.hl-reserved {
color:Green;
}

.hl-var {
color:#00008b;
}

.hl-special {
color:Navy;
}

.hl-number {
color:Maroon;
}

.hl-main {
background-color:transparent;
}

.hl-main pre {
margin:0;
padding:0;
}

#navigation ul li a:hover{
color:#fff;
}
.narrowcolumn a:hover{
color:#666;
}
#content3, #sidebar a:hover, #sidebar .uexc, #sidenotes a:hover, #rencent_entrie a:hover, #footer a {
color:#4374b0;
}

.narrowcolumn .u_tag, .narrowcolumn ul.u_postinfo, .narrowcolumn span.commentmetadata {
font-size:10px;
}

.narrowcolumn .u_postinfo li, .narrowcolumn .alignleft {
float:left;
}

.narrowcolumn .entry a img, #footer a img {
border:0px solid #999;
}

.narrowcolumn .commentlist .uar a:hover, #utom2006 a:hover {
color:#333;
}

#sidebar a, #footer a:hover, #utom2006 a {
color:#4374b0;
}

#sidebar h2, #rencent_entrie h2.rencent_entrie {
font-size:18px;
color:#38b63c;
margin:0 0 10px;
}

.hl-identifier, .hl-inlinedoc, .hl-url, .hl-inlinetags {
color:Blue;
}
.styleswitcher {
float:right;
margin:5px 0 0 0;
}
.styleswitcher a span{
display:none;
}
.styleswitcher a{
float:left;
display:block;
width:10px;
height:10px;
margin:0 5px 0 0;
}
.styleswitcher a.default{
background:transparent url("/images/us.png") no-repeat 0 0;
}
.styleswitcher a.pink{
background:transparent url("/images/cn.png") no-repeat 0 0;
}
.styleswitcher a.no{
background:transparent url("/images/de.png") no-repeat 0 0;
}
.googlead{
background:#111;
border:1px solid #222;
margin:0 auto;
padding:3px;
width:468px;
height:60px;
clear:both;
}

.WelcomeBar
{
font-weight:normal;
text-align:left;
font-size:70%;
position: absolute;
left: 695px;
width:245px;
height:20px;
top:10px;
text-align:center;
color:White;
}

.WelcomeBar A
{
color:#76D8FF;
font-weight:bold;
}
#welcome
{
color: #000000;
font-size: 10px;
margin-right: 5px;
margin-top: -5px;
padding-bottom: 10px;
}

#welcome A, #welcome A:VISITED, #welcome A:ACTIVE, #welcome A:HOVER
{
font-size: 10px;
color: #000000;

}

.rating-container {
height: 11px;
width: 61px;
background: url(http://www.tonycai.com/wp-content/plugins/ds-rating-images/black/rating-off.gif) no-repeat;
overflow: hidden;
}
.rating {
padding-top: 11px;
height: 0px !important;
height /**/:11px; /* for IE5/Win only */
background: url(http://www.tonycai.com/wp-content/plugins/ds-rating-images/black/rating-on.gif) no-repeat;
text-align: left;
overflow: hidden;
}
.zero { width: 0px; }
.zero-and-half { width: 6px; }
.one { width: 11px; }
.one-and-half { width: 18px; }
.two { width: 24px; }
.two-and-half { width: 31px; }
.three { width: 36px; }
.three-and-half { width: 43px; }
.four { width: 50px; }
.four-and-half { width: 55px; }
.five { width: 61px; }

THANKS

CMHBowlan
Jan 20th, 2007, 07:16 AM
Use the property "text-decoration" in your CSS to make your text underlined:


span.text {
text-decoration: underline;
}

I'm not sure if you use "span.text" instead of ".text" because I use "p.text". But, that's how you make text underlined in CSS. Also, if you're asking why the element "<u></u>" isn't working I'll need to know what you're using the element on... Like, in your links, you have the property "text-decoration" set to "none" meaning no underlining on your links. If you use "<u></u>" on a link it won't underline it.

Toniee
Jan 20th, 2007, 07:25 AM
Im using it in the <p></p> tag. So it's

<p><u>sdsdsd</u></p>

This is my website: tonycai.com.

My links underline, but when I do <p><u>sdsdsd</u></p>, it doesn't underline.

CMHBowlan
Jan 20th, 2007, 07:34 AM
p {
font-size:11px;
margin:0 0 10px 0;
}

p a {
color:#333;
text-decoration:none;
margin:0;
margin-bottom:15px;
}

The only thing I could think of that could make it not work is that you have your links in your "<p></p>" elements set to where they won't be underlined and it could affect your text. I doubt it but it's worth a try. If you use WordPress it's possible the PHP of the content management system could have it set to where you use brackets as <'s for your posting. (Basically what it does is just like on Coding Forums to underline text.) I'm not positive about that answer though, I've never used WordPress.

Toniee
Jan 20th, 2007, 07:40 AM
That code will make my links not be underlined. I still want them underlined but my problem is when I try to make something underlined, with the <u></u> tag, it doesnt underline.

Im not sure you get my problem there. :)

THANKS!

CMHBowlan
Jan 20th, 2007, 07:42 AM
I understand your problem quite well but I can't seem to find the problem! Any specific place you're talking about placing underlined text? Can I see the divisions wrapped around the area your planning on placing it?

Toniee
Jan 20th, 2007, 07:47 AM
Hey, :)

My site is tonycai.com. You see my first most recent post?

Where it says:

Three (3) Easy Steps For Setup:

It's suppose to be underlined.

CMHBowlan
Jan 20th, 2007, 08:09 AM
Why don't you try this:


<span style="text-decoration: underline;">Three (3) Easy Steps For Setup:

Or remove "text-decoration: none;" from:


* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}

Toniee
Jan 20th, 2007, 08:17 AM
Thanks so very much, removing text-decoration:none worked! :)

CMHBowlan
Jan 20th, 2007, 08:20 AM
Sorry I was so late to seeing it! I thought that was part of your note at the top of your CSS! I finally took a good look at it and realized it wasn't!

Toniee
Jan 20th, 2007, 08:43 AM
lol dont be sorry im glad you picked it up. :)