Post title not underlined

[moka]

Hello!

This is my blog: http://www.moteldemoka.com

As you may see I have an aesthetic problem with the links, I wish the links inside the post to be underlined yet I do not wish to have links from the sidebar and the post title underlined. Can you please help me?

[Nile]

Find this in your page:


</style>
<style type="text/css">.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}</style>


And replace it with this:
.recentcomments a{
display: inline !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none;
}
</style>

[moka]

Find this in your page:


</style>
<style type="text/css">.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}</style>


And replace it with this:
.recentcomments a{
display: inline !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none;
}
</style>

Thanks. Although there's no place inside my stylesheet that contains the .recentcomments part... here is the stylesheet from my blog:



/* Basics and Typography */

body {
margin: 0;
padding: 0;
background-color: #dee0cb;
font-size: 78%;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #444;
text-align: center;
}

p {
font-size: 1em;
line-height: 1.5em;
margin: 1.2em 0;
}

h3 {
padding: 0;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #433c31;
}

h4, h5, h6 {
padding: 0.5em 0;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #433c31;
}

h3 {
font-size: 1.2em;
}

h4 {
font-size: 1.1em;
}

ol, ul {
font-size: 1em;
line-height: 1.5em;
margin: 1.2em 0 1.2em 2em;
padding: 0;
}

a {
text-decoration: none;
}


a:link {
color: #BA6530; border-bottom: 1px solid #C6C2B2;

}

a:visited {
color: #B96F17; border-bottom: 1px solid #C6C2B2;

}

a:active {
color:#9BBB38;


}

a:hover {
color: #9BBB38;

}

input, textarea, select {
border: 1px solid #C1C0B5;
background-color: #FAFAF0;
color: #333;
font-size: 1em;
font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
}

blockquote {
margin: 0 20px;
padding: 0 20px;
border-left: 4px solid #E8E7D0;
font-size: 0.9em;
}

code {
font-family: monospace;
color: #666;
}

form, img {
margin: 0;
padding: 0;
border: 0;
}

.small {
font-size: 0.9em;
color: #999;
}

/* Layout */

.comment {
background-color: #c5c7b4;
padding: 0 5px 5px 10px;
}

.alt {
background-color: #b4b6a6 !important;
padding: 0 5px 5px 5px;
}

#wrapper {
margin: 0 auto;
width: 708px;
padding: 0;
background-image: url(http://www.moteldemoka.com/images/bodycontent.jpg);
text-align: left;
}

#contentwrap {
padding: 0;
margin: 0;
}

#contentwrap a {
color: #433c31;
}

#contentwrap a:hover {
color: #BA6530;
}

#header {
padding: 100px 20px 0 0;
background:url(http://www.moteldemoka.com/images/header.jpg) #dee0cb bottom left no-repeat;
width: 720px;
}

/* Header Styles */
#header h1 {
margin: 0;
font-size: 1.8em;
display: none;
}
#header h1 a {
text-decoration: none;
color: #80904F;
}

#content {
float: left;
margin: 0 0 0 20px;
padding: 0;
width: 445px;
display: inline; /* IE double margin bug fix */
}

#content img, #content object {
max-width: 430px;
}

#content h1, #content h2 {
font-size: 1.8em;
padding: 0;
margin: 0;
font-weight: normal;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #433c31;
}

#sidebar h2 {
font-size: 1.4em;
font-weight: normal;
padding: 0.5em 0 0.3em 0;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #433c31;
border-bottom: 1px solid #433c31;
margin: 0.6em 1em 0.6em 0;
}

#menu {
padding: 0 0 10px 15px;
width: 720px;
height: 60px;
margin: 0;
background: url(http://www.moteldemoka.com/images/bodytop.jpg) bottom left #dee0cb no-repeat;
}

#footer {
height: 50px;
text-align: center;
background: url(http://www.moteldemoka.com/images/bodyfooter.jpg) #dee0cb no-repeat top left;
padding: 0 10px;
margin: 0;
}

#feed {
float: right;
padding-right: 30px;
padding-top: 5px;
}


.commentslink {
float: right;
text-align: right;
width: 100px;
padding-right: 10px;
}

#sidebar {
background:url(http://www.moteldemoka.com/images/bodyright.jpg) top left repeat-x #d3d5c0;
float: right;
margin: 0 0 0 10px;
padding: 1em 15px 5em 0;
width: 215px;
font-size: 0.9em;
display: inline; /* IE double margin bug fix */
}

#sidebar a {
color: #BA6530;
}

#sidebar ul {
list-style: none;
}

#sidebar ul li {
list-style: none;
}

#menu ul {
float: left;
background-color: #dee0cb;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}

#menu li {
display: inline;
height: 30px;
}

#menu li a {
padding:6px 10px;
text-decoration: none;
font-variant:small-caps;
font-size: 1.2em;
border:0;
color:#a2a393;
}

#menu a:hover,
#menu li.current_page_item a:hover
#menu a:active,
#menu li.current_page_item a:active
{
/* background-color:#BA6530; b18c75 */
color:#a2a393;
text-decoration: underline;
border:0;
}
#menu li.current_page_item a:link, #menu li.current_page_item a:visited
{
/* background-color:#a2a393; b18c75 */
color:#373127;
border:0;
}
* html #content, * html #sidebar {
overflow: hidden; /* For IE */
}



div.clear {
clear: both;
}
/* Footer Styles */

#footer p {
margin: 0 5px 0 5px;
padding: 40px 5px 20px 5px;
font-family: "Courier New", Courier, monospace;
}


/* Sidebar Styles */



#sidebar h2 a {
color: #433c31;
}
#sidebar h2 a:hover {
color: #BA6530;
}
#sidebar ul {
list-style-type: none;
}
#sidebar ul li {
}
#sidebar ul ul {
}
#sidebar ul ul li {
}
#sidebar ul ul li a {

}
html>body #sidebar ul ul li a {

}
#sidebar ul ul li a:hover {

}
/* Nested lists? */
#sidebar ul ul ul {
}
#sidebar ul ul ul li {
}
#sidebar ul ul ul li a {
}
html>body #sidebar ul ul ul li a {
}

/* Calendar */
#wp-calendar {
margin: 0 0 1.2em 0;
width: 190px;
border: 1px solid #E8E7D0;
background: #FAFAF0;
line-height: 1.2em;
text-align: center;
voice-family: "\"}\"";
voice-family: inherit;
width: 188px;
}
html>body #wp-calendar {
width: 188px;
}
#wp-calendar caption {
margin: 1.2em 0 0 0;
padding: 0.4em 0;
background: #9BBB38;
color: #FFF;
font-weight: bold;
}
#wp-calendar td {
border: 0;
border-collapse: collapse;
background: #FFF;
}
#wp-calendar td a {
display: block;
width: 100%;
}
#wp-calendar td.pad {
background: transparent;
}
#wp-calendar td#next, #wp-calendar td#prev {
padding: 0.1em 2px;
background: transparent;
}
#wp-calendar td#next a, #wp-calendar td#prev a {
display: inline;
}
#wp-calendar td#next {
text-align: right;
}
#wp-calendar td#prev {
text-align: left;
}

/* Blog */

.post {
border-bottom: 1px solid #999;
margin-bottom: 2em;
}

.postdate {
font-size: 0.9em;
color: #999;
padding: 0;
margin: 0;
}

.commentmeta {
margin-top: 0;
font-size: 0.9em;
color: #555;
}

.posttitle {

margin-bottom: 0;
width: 100%;
color: #FFF;
}
.posttitle a {

padding: 0 10px 0 0;

}
.posttitle a:link, .posttitle a:visited {
color: #000;
}
.posttitle a:hover, .posttitle a:active {

color: #BA6530;
}

div.postmeta {
margin-top: 0;
padding-top: 1px;
font-size: 0.8em;
color: #999;
float: left;
width: 300px;
}

.postentry {
}

div.permalink {
}

div.postfeedback {
float: left;
width: 300px;
}


/* Comments */
h2#comments {
padding-left: 0.4em;
}
#commentlist {
list-style-type: none;
}
li.comment {
margin-top: 15px;
padding-top: 5px;
}
ol#commentlist {
margin: 0;
padding: 0;
}

.commenttitle {
font-weight:bold;

}
#comment {

}

.searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box-3.gif) no-repeat;
width:101px;
height:23px;
display:block;
border: 0;
}

.search_field
{
float:left;
border:0;
padding:0;
width:92px;
height:20px;
background-color:transparent;

/* Widgets and Etc */

.widget_search div {
margin: 1.2em 0;
}
#sidebar #s {
margin-bottom: 2px;
width: 165px;
}

[Nile]

I mean in the html, sorry for confusing you :o.

[moka]

I mean in the html, sorry for confusing you :o.

Yipe, now you've really lost me. I thought I had to modify something inside my template... which file do I have to modify for the html? Isn't it possible to modify it in the stylesheet?

[TheJoshMan]

add this to your css...



.post a, .post a:link, .post a:active, .post a:visited {
font-size:12px;
font-weight:bold;
text-decoration:underline;
color:#56789a;
}
.post a:hover{
text-decoration:none;
color:#ff9900;
}



You can of course modify any of the properties I assigned, was just giving a reference to what could be done.

[moka]

add this to your css...



.post a, .post a:link, .post a:active, .post a:visited {
font-size:12px;
font-weight:bold;
text-decoration:underline;
color:#56789a;
}
.post a:hover{
text-decoration:none;
color:#ff9900;
}



You can of course modify any of the properties I assigned, was just giving a reference to what could be done.

Thanks. It worked somehow, now I can modify links inside posts without it affecting the sidebar, which was half the problem. Unfortunately post titles are still affected and underlined...

[TheJoshMan]

Then replace this...



.posttitle {

margin-bottom: 0;
width: 100%;
color: #FFF;
}
.posttitle a {

padding: 0 10px 0 0;

}
.posttitle a:link, .posttitle a:visited {
color: #000;
}
.posttitle a:hover, .posttitle a:active {

color: #BA6530;
}




With This...



.posttitle {

margin-bottom: 0;
width: 100%;
color: #FFF;
}
.posttitle a {
text-decoration:none !important;
padding: 0 10px 0 0;

}
.posttitle a:link, .posttitle a:visited {
text-decoration:none !important;
color: #000;
}
.posttitle a:hover, .posttitle a:active {
text-decoration:none !important;
color: #BA6530;
}

[moka]

Ok tried that, and now post title is not underlined but...! neither are links inside post :[

[moka]

Is it important if I'm using this code : { border-bottom: 1px solid #C6C2B2; }
instead of text underline?

[Nile]

Theres no difference except if you apply padding to the element, the border will extend farther then normal.

[TheJoshMan]

also, by modifying the ".posttitle" css, there should be no change whatsoever to the original ".post" css. The post title is a completely separate class from the "inner post" which is ".post". You may want to double check to make sure that you replaced the right section of coding.

[moka]

also, by modifying the ".posttitle" css, there should be no change whatsoever to the original ".post" css. The post title is a completely separate class from the "inner post" which is ".post". You may want to double check to make sure that you replaced the right section of coding.

I can't see any error, I've tried twitching different things following your advice but nothing seems to work... title keeps underlined :(

I'm attaching my stylesheet as it is right now, hopefully you can help me find the error.




/* Basics and Typography */

body {
margin: 0;
padding: 0;
background-color: #dee0cb;
font-size: 78%;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #444;
text-align: center;
}

p {
font-size: 1em;
line-height: 1.5em;
margin: 1.2em 0;
}

h3 {
padding: 0;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #433c31;
}

h4, h5, h6 {
padding: 0.5em 0;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #433c31;
}

h3 {
font-size: 1.2em;
}

h4 {
font-size: 1.1em;
}

ol, ul {
font-size: 1em;
line-height: 1.5em;
margin: 1.2em 0 1.2em 2em;
padding: 0;
}

a {
text-decoration: none;
}


a:link {
color: #BA6530;

}

a:visited {
color: #B96F17;

}

a:active {
color:#9BBB38;


}

a:hover {
color: #9BBB38;

}

input, textarea, select {
border: 1px solid #C1C0B5;
background-color: #FAFAF0;
color: #333;
font-size: 1em;
font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
}

blockquote {
margin: 0 20px;
padding: 0 20px;
border-left: 4px solid #E8E7D0;
font-size: 0.9em;
}

code {
font-family: monospace;
color: #666;
}

form, img {
margin: 0;
padding: 0;
border: 0;
}

.small {
font-size: 0.9em;
color: #999;
}

/* Layout */

.comment {
background-color: #c5c7b4;
padding: 0 5px 5px 10px;
}

.alt {
background-color: #b4b6a6 !important;
padding: 0 5px 5px 5px;
}

#wrapper {
margin: 0 auto;
width: 708px;
padding: 0;
background-image: url(http://www.moteldemoka.com/images/bodycontent.jpg);
text-align: left;
}

#contentwrap {
padding: 0;
margin: 0;
}

#contentwrap a {
color: #433c31;
}

#contentwrap a:hover {
color: #BA6530;
}

#header {
padding: 100px 20px 0 0;

background:url(http://www.moteldemoka.com/images/header.jpg) #dee0cb bottom left no-repeat;
width: 720px;
}

/* Header Styles */
#header h1 {
margin: 0;
font-size: 1.8em;
display: none;
}
#header h1 a {
text-decoration: none;
color: #80904F;
}

#content {
float: left;
margin: 0 0 0 20px;
padding: 0;
width: 445px;
display: inline; /* IE double margin bug fix */
}

#content img, #content object {
max-width: 430px;
}

#content h1, #content h2 {
font-size: 1.8em;
padding: 0;
margin: 0;
font-weight: normal;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #433c31;
}

#sidebar h2 {
font-size: 1.4em;
font-weight: normal;
padding: 0.5em 0 0.3em 0;
font-family:"trebuchet ms", Arial, Helvetica, sans-serif;
color: #433c31;
border-bottom: 1px solid #433c31;
margin: 0.6em 1em 0.6em 0;
}

#menu {
padding: 0 0 10px 15px;
width: 720px;
height: 60px;
margin: 0;
background: url(http://www.moteldemoka.com/images/bodytop.jpg) bottom left #dee0cb no-repeat;
}

#footer {
height: 50px;
text-align: center;
background: url(http://www.moteldemoka.com/images/bodyfooter.jpg) #dee0cb no-repeat top left;
padding: 0 10px;
margin: 0;
}

#feed {
float: right;
padding-right: 30px;
padding-top: 5px;
}


.commentslink {
float: right;
text-align: right;
width: 100px;
padding-right: 10px;
}

#sidebar {
background:url(http://www.moteldemoka.com/images/bodyright.jpg) top left repeat-x #f5f4f0;
float: right;
margin: 0 0 0 10px;
padding: 1em 15px 5em 0;
width: 215px;
font-size: 0.9em;
display: inline; /* IE double margin bug fix */
}

#sidebar a {
color: #BA6530;
}

#sidebar ul {
list-style: none;
}

#sidebar ul li {
list-style: none;
}

#menu ul {
float: left;
background-color: #dee0cb;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}

#menu li {
display: inline;
height: 30px;
}

#menu li a {
padding:6px 10px;
text-decoration: none;
font-variant:small-caps;
font-size: 1.2em;
border:0;
color:#a2a393;
}

#menu a:hover,
#menu li.current_page_item a:hover
#menu a:active,
#menu li.current_page_item a:active
{
/* background-color:#BA6530; b18c75 */
color:#a2a393;
text-decoration: underline;
border:0;
}
#menu li.current_page_item a:link, #menu li.current_page_item a:visited
{
/* background-color:#a2a393; b18c75 */
color:#373127;
border:0;
}
* html #content, * html #sidebar {
overflow: hidden; /* For IE */
}



div.clear {
clear: both;
}
/* Footer Styles */

#footer p {
margin: 0 5px 0 5px;
padding: 40px 5px 20px 5px;
font-family: "Courier New", Courier, monospace;
}


/* Sidebar Styles */



#sidebar h2 a {
color: #433c31;
}
#sidebar h2 a:hover {
color: #BA6530;
}
#sidebar ul {
list-style-type: none;
}
#sidebar ul li {
}
#sidebar ul ul {
}
#sidebar ul ul li {
}
#sidebar ul ul li a {

}
html>body #sidebar ul ul li a {

}
#sidebar ul ul li a:hover {

}
/* Nested lists? */
#sidebar ul ul ul {
}
#sidebar ul ul ul li {
}
#sidebar ul ul ul li a {
}
html>body #sidebar ul ul ul li a {
}

/* Calendar */
#wp-calendar {
margin: 0 0 1.2em 0;
width: 190px;
border: 1px solid #E8E7D0;
background: #FAFAF0;
line-height: 1.2em;
text-align: center;
voice-family: "\"}\"";
voice-family: inherit;
width: 188px;
}
html>body #wp-calendar {
width: 188px;
}
#wp-calendar caption {
margin: 1.2em 0 0 0;
padding: 0.4em 0;
background: #9BBB38;
color: #FFF;
font-weight: bold;
}
#wp-calendar td {
border: 0;
border-collapse: collapse;
background: #FFF;
}
#wp-calendar td a {
display: block;
width: 100%;
}
#wp-calendar td.pad {
background: transparent;
}
#wp-calendar td#next, #wp-calendar td#prev {
padding: 0.1em 2px;
background: transparent;
}
#wp-calendar td#next a, #wp-calendar td#prev a {
display: inline;
}
#wp-calendar td#next {
text-align: right;
}
#wp-calendar td#prev {
text-align: left;
}

/* Blog */

.post {
border-bottom: 1px solid #999;
margin-bottom: 2em;
}

.postdate {
font-size: 0.9em;
color: #999;
padding: 0;
margin: 0;
}

.commentmeta {
margin-top: 0;
font-size: 0.9em;
color: #555;
}

.posttitle {

margin-bottom: 0;
width: 100%;
color: #FFF;
}
.posttitle a {
text-decoration:none !important;
padding: 0 10px 0 0;

}
.posttitle a:link, .posttitle a:visited {
text-decoration:none !important;
color: #000;
}
.posttitle a:hover, .posttitle a:active {
text-decoration:none !important;
color: #BA6530;
}

div.postmeta {
margin-top: 0;
padding-top: 1px;
font-size: 0.8em;
color: #999;
float: left;
width: 300px;
}

.postentry {
}

div.permalink {
}

div.postfeedback {
float: left;
width: 300px;
}


.post a, .post a:link, .post a:active, .post a:visited {
font-weight:bold; border-bottom: 1px solid #C6C2B2;
text-decoration: none;
}
.post a:hover{
text-decoration:none; color:#ff9900;
}

/* Comments */
h2#comments {
padding-left: 0.4em;
}
#commentlist {
list-style-type: none;
}
li.comment {
margin-top: 15px;
padding-top: 5px;
}
ol#commentlist {
margin: 0;
padding: 0;
}

.commenttitle {
font-weight:bold;

}
#comment {

}

.searchbg
{
background:url(http://www.nimlok-louisiana.com/images/search-box-3.gif) no-repeat;
width:101px;
height:23px;
display:block;
border: 0;
}

.search_field
{
float:left;
border:0;
padding:0;
width:92px;
height:20px;
background-color:transparent;




And thanks for all the help, I really appreciate it.

[moka]

Normally I use firefox... and I was just checking it on IE and, strangely, it seems to work in there, although if the post title is long enough to break into two lines instead of one, one of them will get underlined.... that's very strange. I don't know if I explained myself correctly... you'll probably have to visit and see for yourself. Any ideas why this could be happening?

[rangana]

Find this in your style.css:


.post a, .post a:link, .post a:active, .post a:visited {
border-bottom: 1px solid #C6C2B2;
text-decoration: none;
}
.post a:hover{
text-decoration:none; color:#ff9900;
}


Remove the highlighted. The second highlighted is not needed anymore since you've set text-decoration (underline) already and nothing is changed on hover.

Hope that helps.

[moka]

Find this in your style.css:


.post a, .post a:link, .post a:active, .post a:visited {
border-bottom: 1px solid #C6C2B2;
text-decoration: none;
}
.post a:hover{
text-decoration:none; color:#ff9900;
}


Remove the highlighted. The second highlighted is not needed anymore since you've set text-decoration (underline) already and nothing is changed on hover.

Hope that helps.

Nope. Still not working. I never set text-decoration underline, I'm using that border-bottom instead of text-underline so if I remove the first highlighted nothing gets underlined at all, yet the second highlighted was indeed not necessary so already removed it. Thanks for the heads up.

Phew... seems problem is trickier than I thought it was. :(

[moka]

Ok. So I tried removing the 'border-bottom' and substituting it with 'text-underline' and it works perfectly. Now neither the title or the sidebar links get underlined. Yet I was using border-bottom instead of text-underline because I wanted to have the underlined color different from the link color. Can this be done without using 'border-bottom'?

[Medyman]

Yet I was using border-bottom instead of text-underline because I wanted to have the underlined color different from the link color. Can this be done without using 'border-bottom'?

Not really. Borders are the way to go if you want another color. You could wrap your links in another element and do something like this:


<html
<head>
<style>
a:hover{color:#f00;}
a{text-decoration:underline;}
span.link{color:#000;}
</style>
</head>
<body>

<a href="#"><span class=link>Click Me</span></a>

</body>
</html>