By jason342 on

When I post image links (banner, etc..) in the node (page, story) they images have a ‘line’ under them, almost similar to how hyperlinks have a line under them.

How do I eliminate this please via the CSS?

⋅ Categories: Drupal 4.7.x

Comments

mariagwyn’s picture

mariagwyn commented

This is an 'a' tag issue in CSS. Most 'a' tags have some sort of line in CSS that reads something like this:

a {
	text-decoration:underline;
}

If you want to change all links, then change 'underline' to 'none.' If you want to change image only, then do something like the following:

a img{
	text-decoration:none;
}

You might have to flip 'a img' to 'img a'. 'img' is the standard html tag for all images, and 'a' refers to all images that are links.

You can make this change in the drupal.css, but it is better to make it in the css for the theme you are using. drupal.css gets overwritten if you upgrade, but your theme is entirely under your control.

Hope this helps.
Maria

jason342’s picture

jason342 commented

It didn't work, I used both 'img a' and 'a img', the banner still has an underline.

What I need to point out is the 'underline' is actually attached to the bottom of all link images, rather than being 'under' the image such as your standard hyperlink underlines, which leads me to think this may not be a hyperlink issue.

It may be a border issue, but don't know what to do to eliminate it. But it can’t be that too since I’ve used border: 0px but no use.

mo6’s picture

mo6
he/him
Primary language Dutch
commented

Why don't you post an URL so we can have a look at your CSS?

jason342’s picture

jason342 commented

Ok, sorry, here is my CSS.

The problem is dotted lines under the image, notice there is dotted line in the CSS too, but I don't know which is the culprit. I've played around with it, no luck.

I'm using this theme http://themes.drupal.org/node?theme=box_cleanslate


body {
  color: #000;
  background: #fff;
  font-family: Verdana, Helvetica, Arial, Lucida, sans-serif;
  font-size: 84%;
  padding: 0;
  margin: 0;
}
h1 { font-size: 1.3em; }
h2 { font-size: 1.1em; }
h3 { font-size: 1em; font-weight: bold;}
h4, h5, h6 { font-size: 0.9em; font-weight: bold;}
h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
p, .book .body {
  padding: 0 0 0.5em 0;
  margin: 0;
  text-indent: 1.6em;
  font-size: 1em;
  line-height: 1.6em;
}
pre {
  background: #ddd;
  border: 1px solid #aaa;
  padding: 0.75em 1.5em;
  font-size: 12px;
}
a { text-decoration: none; }
a, a:link { color: #05b; }
a:visited { color: #67b; }
a:hover, a:focus { 
  color: #fff;
  background: #05b;
}
a:active { color: #05b; }
form {
  padding: 0;
  margin: 0;
}
blockquote {
  border: 1px #ddd solid;
  margin: 0.5em 1em;
  padding: 0.3em;
  font-style: italic;
}
code {
  font-size: 1em;
  font-family: Profont, 'lucida console', 'Courier New', Monaco, monospace;
}
img { border: 0; }
ol, ul, dl { position: relative; }
#header {
  position: relative;
  padding: 1em 0 0 0;
  margin: 0;
}
#header img { 
  margin: 0 0.75em 0 1em;
  float: left;
}
#site-name, #header a { color: #46c325; }
#header a:visited { color: #46c325; }
#header a:hover { background: transparent; }
#site-name {
  font-size: 2.5em;
  padding: 25px 0 0.2em 0;
  margin: 0;
}
#site-slogan {
  color: #bbb;
  font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
  display: inline;
  font-weight: bold;
  font-size : 1.2em;
  padding: 0 0 0 1.2em;
  margin: 0;
}
#content {
  border-top: dotted 1px #ddd;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1em;
}
td.main-content {
  vertical-align: top;
  padding: 0em 1em;
}
td.sidebar {
  vertical-align: top;
  padding: 0;
  width: 200px;
}
#sidebar-left { border-right: 1px dotted #ddd; }
#sidebar-right { border-left: 1px dotted #ddd; }
.sidebar .block {
  background: #fff;
  border-bottom: 1px dotted #ddd;
  margin: 0 5px 5px 5px;
  padding: 0 5px 5px 5px;
}
.sidebar .block h2 {
  padding: 3px 0 0 0;
  margin: 0;
  font-size: 1em;
}
.sidebar .block h3 {
  margin: 0 0 0.3em 0;
}
.sidebar .block .xml-icon {
  text-align: center;
}
.sidebar .block-search input.form-text {
  width: 100px;
  padding: 1px;
  margin-right: 5px;
}
.sidebar .block-search button.form-submit { 
  width: 60px;
  font-size: 12px;
}
.sidebar .block a, .sidebar .block { color: #05b; }
.sidebar .block a:visited { color: #67b; }
.sidebar .block h2, .sidebar .block h3 { color: #aaa; }
.sidebar .block a:hover { 
  color: #fff;
  background: #05b;  
}
.more-link {
  float: none;
  text-align: right;
  font-style: italic;
}
.block .more-link a, .block .more-link a:visited { color: #46c325; }
.block .more-link a:hover {
  color: #fff;
  background: #05b;
}
.item-list {
  margin: 0.25em 0 0 0;
  font-size: 0.9em;
}
.item-list ul {
  list-style: none;
  margin: 0 0 0.5em 0;
  padding: 0;
}
.item-list ul li {
  margin: 0 0 0.25em 0;
  padding: 0 0 0 1em;
  line-height: 1.3em;
  list-style: none;
}
#search {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  float: right;
  width: 200px;
}
#search .form-text {
  margin-right: 3px;
  padding: 3px;
}
#search .form-submit {
  padding: 2px;
}
#top-nav {
  padding: 0;
  margin: 0;
  font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
#top-nav ul {
  margin: 0;
  padding: 2px 0 2px 0;
}
#primary {
  font-size: 1.2em;
  border-top: dotted 1px #ddd;
}
#secondary {
  text-align: right;
  font-size: 1.1em;
}
#primary li {
  margin-left: 2px; 
  padding: 0;
  display: inline;
  list-style-type: none;
}
#secondary li {
  margin-right: 5px; 
  padding: 0;
  display: inline;
  list-style-type: none;
}
#primary a {
  color: #05b;
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
  padding: 0 3px;
}
#primary a:hover {
  color: #fff;
  background: #05b;
}
#secondary a {
  color: #05b;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#secondary a:hover { color: #03f; }
#primary a.active, #primary a.active:hover, #secondary a.active, #secondary a.active:hover { 
  color: #ddd;
  background: #fff;
}
.breadcrumb {
  color: #46c325;
  border-top: dotted 1px #ddd;
  padding: 0.5em 1em;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  height: 1em;
}
.main-content .node .content, .comment .content, .book .body {
  line-height: 1.5em;
}
.main-content .node .content a, .comment .content a, .book .body a { border-bottom: 1px dotted; }
.main-content .node, .book {
  margin: 0 1em 2em 1em;
}
.main-content .content-title {
  font-size: 2em;
  margin: 0 0 1.6em 0;
}
.main-content .node h2, .main-content h2 {
  padding: 0;
  margin: 0 0 0.25em 0;
  font-size: 1.8em;
}
.main-content .node .info {
  color: #999;
  padding: 0 0 0.2em 0;
  margin: 0;
  font-size: 0.9em;
}
.main-content .node .links, .main-content .node .terms {
  padding: 0;
  margin: 0;
  font-size: 0.9em;
  font-weight: bold;
}
.main-content .node .terms {
  color: #999;
  font-weight: normal;
  text-align: right;
}
.main-content .sticky { 
  color: #fff;
  background-color: #67b;
  border: solid 3px #eee;
  padding: 0.5em;
}
.main-content .sticky .info, .main-content .sticky .links, .main-content .sticky .terms {
  color: #000480;
}
.main-content .sticky a, .main-content .sticky a:link { color: #fff; }
.main-content .sticky a:visited { color: #eee; }
.main-content .sticky a:hover, .main-content .sticky a:focus {
	color: #3F0;
	background: #67b;
}
.main-content .sticky a:active { color: #05b; }
.links a.read-more {
  font-style: italic;
  font-size: 1.2em;
}
.main-content .node .content {
  padding: 0;
  margin: 0;
}
.main-content .node .info, .main-content .node .links, #mission {
  font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
#mission {
  color: #fff;
  background: #67b;
  border: solid 3px #eee;
  padding: 5px 10px;
  margin: 0.6em 0 1.6em 0;
  font-size: 1.1em;
  text-indent: 0;
  width: auto;
}
.main-content .box {
  border: 1px solid #eee;
  margin-bottom: 0.5em;
}  
.main-content .box .content {
  padding: 0.5em;
}
.main-content .box h2 {
  padding: 0.5em;
  margin: 0;
  font-size: 1.2em;
  text-align: left;
}
.comment {
  border: solid 1px #eee;
  padding: 1em;
  margin: 1.5em 0;
}
.comment-new {
  border: solid 1px #b06;
}
.comment-folded {
  padding: 0.5em;
  margin: 1.5em 0;
}
.comment-new .new {
  color: #b06;
  text-align: right;
  font-size: 1.1em;
  display: block;
  padding-bottom: 0.5em;
  width: 100%;
}
.comment .content, .comment .content p {
  padding: 0;
  margin: 0;
  line-height: 1.6em;
  text-indent: 0;
}
.comment .title, .comment .author, .comment .links {
  font-family: Helvetica, Arial, Lucida, Verdana, sans-serif;
}
.comment .title {
  font-weight: bold;
  font-size: 1.1em;
  padding: 0;
  margin-bottom: 0.5em;
}
.comment .title, .comment .title a.active {
  color: #444;
  background: #fff;
}
.comment .author {
  color: #999;
  font-size: 0.9em;
  padding: 0.1em 0 0.3em 0.75em;
}
.comment .links {
  color: #999;
  padding: 0.75em 0 0 0;
  margin: 0;
}
#footer {
  color: #aaa;
  background: #fff;
  border-top: dotted 1px #ddd;
  padding: 1em 1em 1em 1em;
  font-size: 0.9em;
  text-align: center;
}
#footer p {
  text-indent: 0;
  margin-bottom: 1em;
}
.xml-icon {
  text-align: center;
}
fieldset { border: 1px solid #ddd; }
.form-submit {
  margin: 0;
}
.form-item {
  margin: 3px 0;
  padding: 0.3em 0;
}
form .form-item .title  {
  border: 0;
  border-bottom: #ddd solid 1px;
  color: #777;
  background: transparent;
}
.form-radio, .form-checkbox {
  background: transparent;
  border: 0;
}
.main-content .box .content .form-item textarea {
  width: auto;
}
input.form-text, input.form-password {
  border: solid 1px #ddd;
  margin: 0;
  padding: 0 5px;
  font-size: 12px;
}
input, textarea {
  background: transparent;
  color: inherit;
  border: 1px solid #777;
}
input:focus, textarea:focus {
  background: transparent;
  border: 1px solid #48d;
}
button.form-submit {
  border: solid 1px #ddd;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
h3.form-title {
  text-align: left;
}
form .form-item .title  {
  border: 0;
  border-bottom: #ddd solid 1px;
  color: #777;
  background: transparent;
  margin-bottom: 0.5em;
  padding: 0.3em 0;
  text-align: left;
}
select {
  background: #eee;
  color: #000;
  margin: 1px 5px;
}
.container-inline {
  margin: 0 0 1.6em 0;
}
.container-inline div {
  display: inline;
}
#pager {
  text-align: center;
}
#pager div {
  padding: 0.5em;
}
.main-content li {
  padding-bottom: 0.25em;
}
#message {
  background: #eee;
  border: 2px solid #ddd;
  padding: 2em;
  margin: 1em 2em;
}
li.leaf {
  list-style-type: square;
}
div.picture { 
  border: 1px solid #ddd;
  float: left;
  margin: 0 1em 0.3em 0;
}
br.clear {
  clear: both;
}
.main-content .content-title, .links a.read-more { color: #46c325; }
.links a.read-more:hover {
  color: #fff;
  background: #05b;
}
.box { border: 1px solid #eee; }
.box h2 { color: #46c325; }
.marker, .error { color: #f00; }
.ok { color: #080; }
.path a, .path a:visited { color: #777; }
.tabs a, .tabs a:visited, .tabs a:hover { color: #05b; }
.tabs li .active, .tabs li .active:hover {
  color: #ccc;
  background: #fff;
}

.calendar td, .calendar th { border-color: #eee; }
.calendar .day-normal { background: #fff; }
.calendar .day-future { background: #fff; }
.calendar .day-today { background: #333; color: #fff; }
.calendar .day-today a { color: #fff; }
.calendar .day-selected { background: #555; color: #fff; }
.calendar .day-link { background: #ddd; color: #fff; }


ul.galleries { 
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.galleries li { 
  background-color : #eee;
  border: 1px #ccc solid;
  margin: 1em 0;
  padding: 1em;
}

ul.galleries li img { 
  position: relative;
  float: left;
  padding: 0 0.5em 0 0;
  margin: 0 0.5em 0.5em 0;
}

ul.galleries li p.count { 
  clear: both;
}

ul.galleries h3 { 
  font-size: 1.2em;
  margin : 0 0 0.5em 0;
  padding : 0;
}

ul.images { 
  list-style-type : none;
  margin : 0;
  padding : 0;
}

ul.images li { 
  float : left;
  margin : 1em;
  height: 130px;
  width: 130px;
}
kleingeist’s picture

kleingeist commented

That won't work, because the border is applied to the link (a) not to the image (img). The image is a child of the link, so those border settings surrounds it too.
The easiest solution would be to completely disable those dotted borders for node content by removing this line
.main-content .node .content a, .comment .content a, .book .body a { border-bottom: 1px dotted; }
Well but maybe you like the look of those dots for Textlinks and actually how really likes easy solutions? ;) They are allways boring, arent they?
> test
So the solution, as most of the time, can be found in a modules which hooks to a specific function - in this case namely the hook_filter. We need a filter which can find those links containing an image and adds a css-class to it and made them themeable. Well if you think a module/filter is overload for this, you could also add a respective class manually. But as said before, i like the more complicated solutions and just twisted my brain on a lil regular expression, which can do this automatic.

Heres the code of the file

imagelinks.module

function imagelinks_help($section) {
	switch ($section) {
		case 'admin/modules#description':
	      return t('Filter, which adds the class "imagelink" to all links containing exactly one image.');
	}
}

function imagelinks_filter($op, $delta = 0, $format = -1, $text = '') {
	switch ($op) {
		case 'list':
			return array(t('Imagelinks CSS class'));
			
		case 'description':
			return t('Appends the class "imagelink" to all links containing exactly one image.');

		// we dont have to do anything on preparation, but we have to return the current $text
		case 'prepare':
			return $text;
		
		// here comes the work. 
		case 'process':
			// as absolutely obivous, this regular expression adds the class "imagelink" to links containg exactly one image
			// exactly means atm there are not even spaces among them (altough this could be changed easily)
			// unfortunately there will be a redundant space, if the link previously had no class, but currently im to tired to "fix" this
			$text = preg_replace('/<a([^>]+?)(?:class\=[\'"](.+)[\'"]([^>]?))?\>(<img[^>]+><\/a>)/i', '<a\\1 class="imagelink \\2"\\3>\4', $text);
			return $text;
	}
	
}

This has been only tested on "FIltered Html", but i think it will not interfere with other filters. Well at last its very simple.

You ask howto use this for your problem?

  1. Save the upper code as imagelinks.module under /modules/
  2. Activate the module in the admin/modules panel
  3. Add the filter to your standard (or all) input formats
  4. Edit your themes css file and add at the end of it the following lines:
    a.imagelink { border-bottom: none; }
  5. Maybe flush your cache
  6. Hope i did not do any fault in the code and start testing ;)
  7. Give some feedback

greetings

kleingeist’s picture

kleingeist commented

Damend, i just clicked on post, when i recognized, this is not really a thing to put in a module. Its totally theme specific, so it should go there.
Nevertheless most of the work has done already by building the regular expression.
the following solution seems to fit semantic better, but could be a lil tiny bit slower because im not sure if the output and so the preg_replace will be cached at this place.

  1. Open templates/box_grey/node.tpl.php
  2. Find print $content
  3. Replace with
     print preg_replace('/<a([^>]+?)(?:class\=[\'"](.+)[\'"]([^>]?))?\>(<img[^>]+><\/a>)/i', 
  '<a\\1 class="imagelink \\2"\\3>\4', $content);
  4. Open templates/box_grey/box_cleanslate/style.css
  5. Add to the end of file:
    a.imagelink {
  border-bottom: none ! important;
}
  6. Maybe flush your cache
  7. Test and give some feedback

hope this time i didnt forget anything else :'(

Bluetiereign’s picture

Bluetiereign commented

but it worked. I'm semi-literate to code, but I don't have a clue as to what that gob of php code is doing. reminds me of an htaccess rewrite file.

However, I do know it works and I appreciate the answer. I have sponsor link pages full of images - and have been trying to figure out how to get rid of those lines for over a year.

thanks again.

jason342’s picture

jason342 commented

Thanks StIllE, I took out the code you mentioned and no more lines, thank you for pointing that out.

I’d be grateful if you looked at this other topic of mine too, and point out the problem there.

http://drupal.org/node/87147

Thanks to all for helping too.