Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Link text still underlined when "text-decoration: none" is applied

Tags:

css

drupal

drupal-7

I am working on a page in Drupal 7 in which I have a number of boxes with text and a photo inside of them. I have the entire box div linking to its content page, but I can't seem to get rid of the underline.

I have tried applying text-decoration: none; to every class inside of and outside of the box and the text inside the box is still underlined.

Even when I use developer tools/'inspect element' tool in Google it shows that the computed style for the box and the text within is text-decoration: none;

I have been trying to figure this out off and on for about a day now and I have not been able to find any solutions via Google.

Any ideas?

Thanks in advance.

Edit: I am working to post my code. I am trying to find a good solution for posting because it is a page within Drupal that is rendering through Views. Also, I have a job interview in an hour that I'm getting ready for. I probably should have waited until after the interview to post this issue.. oh well.

Edit x2: My HTML is as follows:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" class="js"><head profile="http://www.w3.org/1999/xhtml/vocab">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Drupal 7 (http://drupal.org)">
  <title>Portfolio Page | mywebsite.com</title>
  <style type="text/css" media="all">@import url("http://url.com/modules/system/system.base.css?m178g6");
@import url("http://url.com/modules/system/system.menus.css?m178g6");
@import url("http://url.com/modules/system/system.messages.css?m178g6");
@import url("http://url.com/modules/system/system.theme.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/misc/ui/jquery.ui.core.css?m178g6");
@import url("http://url.com/misc/ui/jquery.ui.theme.css?m178g6");
@import url("http://url.com/modules/overlay/overlay-parent.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/modules/comment/comment.css?m178g6");
@import url("http://url.com/modules/field/theme/field.css?m178g6");
@import url("http://url.com/modules/node/node.css?m178g6");
@import url("http://url.com/modules/search/search.css?m178g6");
@import url("http://url.com/modules/user/user.css?m178g6");
@import url("http://url.com/sites/all/modules/views/css/views.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/sites/all/modules/ctools/css/ctools.css?m178g6");
@import url("http://url.com/sites/all/modules/lightbox2/css/lightbox.css?m178g6");
@import url("http://url.com/sites/all/modules/views_slideshow/views_slideshow.css?m178g6");
@import url("http://url.com/modules/shortcut/shortcut.css?m178g6");
@import url("http://url.com/modules/toolbar/toolbar.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/sites/all/themes/personal/css/style.css?m178g6");</style>
<style type="text/css" media="print">@import url("http://url.com/sites/all/themes/personal/css/print.css?m178g6");</style>
<style type="text/css" media="mobile">@import url("http://url.com/sites/all/themes/personal/css/mobile.css?m178g6");</style>
  <script type="text/javascript" src="http://url.com/misc/jquery.js?v=1.4.4"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://url.com/misc/drupal.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/ui/jquery.ui.core.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views/js/views-contextual.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.ba-bbq.js?v=1.2.1"></script>
<script type="text/javascript" src="http://url.com/modules/overlay/overlay-parent.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.cookie.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/lightbox2/js/lightbox.js?1332273397"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views_slideshow/js/views_slideshow.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/modules/toolbar/toolbar.js?m178g6"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"personal","theme_token":"0CkOwyp1neNP-2IbE8LYCgYGBJ9sz39ORy5DodizAGg","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/ui\/jquery.ui.core.min.js":1,"sites\/all\/modules\/views\/js\/views-contextual.js":1,"misc\/jquery.ba-bbq.js":1,"modules\/overlay\/overlay-parent.js":1,"misc\/jquery.cookie.js":1,"sites\/all\/modules\/lightbox2\/js\/lightbox.js":1,"sites\/all\/modules\/views_slideshow\/js\/views_slideshow.js":1,"modules\/toolbar\/toolbar.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/lightbox2\/css\/lightbox.css":1,"sites\/all\/modules\/views_slideshow\/views_slideshow.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/personal\/css\/style.css":1,"sites\/all\/themes\/personal\/css\/print.css":1,"sites\/all\/themes\/personal\/css\/mobile.css":1}},"lightbox2":{"rtl":0,"file_path":"\/(\\w\\w\/)public:\/","default_image":"\/sites\/all\/modules\/lightbox2\/images\/brokenimage.jpg","border_size":10,"font_color":"000","box_color":"fff","top_position":"","overlay_opacity":"0.8","overlay_color":"000","disable_close_click":true,"resize_sequence":0,"resize_speed":400,"fade_in_speed":400,"slide_down_speed":600,"use_alt_layout":false,"disable_resize":false,"disable_zoom":false,"force_show_nav":false,"show_caption":true,"loop_items":false,"node_link_text":"View Image Details","node_link_target":false,"image_count":"Image !current of !total","video_count":"Video !current of !total","page_count":"Page !current of !total","lite_press_x_close":"press \u003Ca href=\u0022#\u0022 onclick=\u0022hideLightbox(); return FALSE;\u0022\u003E\u003Ckbd\u003Ex\u003C\/kbd\u003E\u003C\/a\u003E to close","download_link_text":"Download Original","enable_login":false,"enable_contact":false,"keys_close":"c x 27","keys_previous":"p 37","keys_next":"n 39","keys_zoom":"z","keys_play_pause":"32","display_image_size":"","image_node_sizes":"()","trigger_lightbox_classes":"","trigger_lightbox_group_classes":"","trigger_slideshow_classes":"","trigger_lightframe_classes":"","trigger_lightframe_group_classes":"","custom_class_handler":0,"custom_trigger_classes":"","disable_for_gallery_lists":true,"disable_for_acidfree_gallery_lists":true,"enable_acidfree_videos":true,"slideshow_interval":5000,"slideshow_automatic_start":true,"slideshow_automatic_exit":true,"show_play_pause":true,"pause_on_next_click":false,"pause_on_previous_click":true,"loop_slides":false,"iframe_width":600,"iframe_height":400,"iframe_border":1,"enable_video":false},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height"});
//--><!]]>
</script>
</head>
<body class="html not-front logged-in no-sidebars page-portfolio toolbar toolbar-drawer lightbox-processed" style="padding-top: 65px; ">
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
  </div>
  <div id="overlay-disable-message" class="clearfix"><h3 class="element-invisible">Options for the administrative overlay</h3><a href="/user/1/edit?destination=portfolio#edit-overlay-control" id="overlay-profile-link" class="overlay-exclude element-invisible">If you have problems accessing administrative pages on this site, disable the overlay on your profile page.</a> <a href="/overlay/dismiss-message?destination=portfolio&amp;token=snk0Img0V_hSox1Q_-De1dEEDTtRR_v0O00J3BOSulg" id="overlay-dismiss-message" class="overlay-exclude element-invisible">Dismiss this message.</a></div><div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
  <div class="toolbar-menu clearfix">
    <ul id="toolbar-home"><li class="home first last"><a href="/" title="Home"><span class="home-link">Home</span></a></li>
</ul>    <ul id="toolbar-user"><li class="account first"><a href="/user" title="User account">Hello <strong>user</strong></a></li>
<li class="logout last"><a href="/user/logout">Log out</a></li>
</ul>    <h2 class="element-invisible">Administrative toolbar</h2><ul id="toolbar-menu"><li class="menu-11 path-admin-dashboard first"><a href="/admin/dashboard" id="toolbar-link-admin-dashboard" title="View and customize your dashboard."><span class="icon"></span>Dashboard <span class="element-invisible">(View and customize your dashboard.)</span></a></li>
<li class="menu-9 path-admin-content"><a href="/admin/content" id="toolbar-link-admin-content" title="Administer content and comments."><span class="icon"></span>Content <span class="element-invisible">(Administer content and comments.)</span></a></li>
<li class="menu-21 path-admin-structure"><a href="/admin/structure" id="toolbar-link-admin-structure" title="Administer blocks, content types, menus, etc."><span class="icon"></span>Structure <span class="element-invisible">(Administer blocks, content types, menus, etc.)</span></a></li>
<li class="menu-7 path-admin-appearance"><a href="/admin/appearance" id="toolbar-link-admin-appearance" title="Select and configure your themes."><span class="icon"></span>Appearance <span class="element-invisible">(Select and configure your themes.)</span></a></li>
<li class="menu-18 path-admin-people"><a href="/admin/people" id="toolbar-link-admin-people" title="Manage user accounts, roles, and permissions."><span class="icon"></span>People <span class="element-invisible">(Manage user accounts, roles, and permissions.)</span></a></li>
<li class="menu-16 path-admin-modules"><a href="/admin/modules" id="toolbar-link-admin-modules" title="Extend site functionality."><span class="icon"></span>Modules <span class="element-invisible">(Extend site functionality.)</span></a></li>
<li class="menu-8 path-admin-config"><a href="/admin/config" id="toolbar-link-admin-config" title="Administer settings."><span class="icon"></span>Configuration <span class="element-invisible">(Administer settings.)</span></a></li>
<li class="menu-19 path-admin-reports"><a href="/admin/reports" id="toolbar-link-admin-reports" title="View reports, updates, and errors."><span class="icon"></span>Reports <span class="element-invisible">(View reports, updates, and errors.)</span></a></li>
<li class="menu-12 path-admin-help last"><a href="/admin/help" id="toolbar-link-admin-help" title="Reference for usage, configuration, and modules."><span class="icon"></span>Help <span class="element-invisible">(Reference for usage, configuration, and modules.)</span></a></li>
</ul>          <a href="/toolbar/toggle?destination=portfolio" title="Hide shortcuts" class="toggle toggle-active toolbar-toggle-processed">Hide shortcuts</a>      </div>

  <div class="toolbar-drawer clearfix">
    <div class="toolbar-shortcuts"><ul class="menu"><li class="first leaf"><a href="/node/add">Add content</a></li>
<li class="leaf"><a href="/admin/content">Find content</a></li>
<li class="leaf"><a href="/admin/config/development/performance">Performance</a></li>
<li class="last leaf"><a href="/admin/config/development/maintenance">Maintenance mode</a></li>
</ul></div><a href="/admin/config/user-interface/shortcut/shortcut-set-1" id="edit-shortcuts">Edit shortcuts</a>  </div>
</div>
  <!-- If front page, present front page content -->
<div id="a">
<!-- Begin other page specific content -->
<div id="smallhead">
</div>
</div><!-- End div a-->
<!-- Begin menu -->
<div id="b">
<div id="menu">
<a href="/home"><div class="item">Home</div></a>
<a href="/about"><div class="item">About Me</div></a>
<a href="/portfolio"><div class="item">Portfolio</div></a>
<a href="/photos"><div class="item">Photos</div></a>
<a href="/projects"><div class="item">Projects</div></a>
<a href="/blog"><div class="item">Blog</div></a>
</div>
</div>
<div id="c">
<div id="middle">
<!-- Begin other page specific content -->
<div id="contentwrapper">
  <div class="region region-content">
    <div id="block-system-main" class="block block-system">


  <div class="content">
    <div class="view view-portfolio-page view-id-portfolio_page view-display-id-page view-dom-id-a0c892fe2818834f0a7750c98e7e6688">



      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">

  <div>        <div><a href="/node/10">
<div class="smallbox">
<div class="nounderline">
<strong>Postcards</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Postcards<br>
Adobe Illustrator
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-2 views-row-even">

  <div>        <div><a href="/node/9">
<div class="smallbox">
<div class="nounderline">
<strong>Design</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Desiugn<br>
Adobe Illustrator
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-3 views-row-odd">

  <div>        <div><a href="/node/8">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt="screenshot"><br>
Awareness Campaign<br>
HTML, CSS
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-4 views-row-even views-row-last">

  <div>        <div><a href="/node/7">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Details Website<br>
HTML 5, CSS 3
</div>
</div></a></div>  </div>  </div>
    </div>






</div>  </div>
</div>
  </div>
</div>
<!-- End other page specific content -->
</div><!--end middle-->
</div>
<div id="d">
<div id="footer">
;<a href="">Contact Form</a>
<br>
Copyright ©2012 My Name
</div>
</div>



<div id="lightbox2-overlay" style="display: none; "></div>      <div id="lightbox" style="display: none;" class="lightbox2-orig-layout">        <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><div id="modalContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="frameContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="imageContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><img id="lightboxImage" alt=""><div id="hoverNav"><a id="prevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="nextLink" title="Next" href="#" style="padding-top: 10px; "></a></div></div><div id="loading"><a href="#" id="loadingLink"></a></div></div>        <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); ">          <div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><div id="frameHoverNav"><a id="framePrevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="frameNextLink" title="Next" href="#" style="padding-top: 10px; "></a></div><a id="bottomNavClose" title="Close" href="#" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "></a><a id="bottomNavZoom" href="#"></a><a id="bottomNavZoomOut" href="#"></a><a id="lightshowPause" title="Pause Slideshow" href="#" style="display: none;"></a><a id="lightshowPlay" title="Play Slideshow" href="#" style="display: none;"></a></div></div>        </div>      </div></body></html>

And my CSS is as follows:

@charset "utf-8";
/* CSS Document */
body{
    background: black;
    font-size: 14px;
    margin: 0;
    }
a:visited{
    color: blue;
}
h2{
    font-size: 135%;
    margin: .2em 0;
}
#a{
    width: 100%;
    background: rgb(140,79,84);
}
#bighead{
    height: 31em;
    width: 69em;
    margin: 0 auto;
    padding-top: 2em;
    background: url(../img/headerpic.jpg);
    text-align: center;
    border: 0 solid black;
    border-width: 0 4px;
}
#header a{
    font-size: 35px;
    text-decoration: none;
    color: black;
}
#slogan{
    font-size: 18px;
    padding: .5em;
}
#smallhead{
    height: 14em;
    width: 69em;
    margin: 0 auto;
    background: url(../img/smallheader.jpg);
    text-align: center;
    border: 0 solid black;
    border-width: 0 4px;
}
#b{
    width: 100%;
    background: rgb(50,51,46);
}
#menu{
    width: 69em;
    height: 2.5em;
    border: 0 solid black;
    border-width: 0 4px;
    background: black;
    text-align: center;
    margin: 0 auto;
}
.item{
    font-size: 17.5px;
    height: 1.1em;
    width: 9.2em;
    float: left;
    padding: .3em 0;
    border-top: .2em solid rgb(31,38,28);
    border-bottom: .2em solid rgb(31,38,28);
}
#menu a:link, a:visited{
    text-decoration: none;
    color: #CCC;
}
#menu a:hover{
    color: white;
    background: white;
    text-decoration: underline;
}
#c{
    width: 100%;
    background: rgb(139,124,108);
}
#middle{
    min-height: 22.5em;
    width: 67.6em;
    margin: 0 auto;
    border: 0 solid black;
    border-width: 0 4px;
    background: rgb(98,103,109);
    padding: .75em;
    text-decoration: none;
}
.title{
    font-size: 2em;
    height: .5em;
    width: 24em;
    padding-left: 1em;
    padding-bottom: .25em;
    color: white;
}
.box{
    float: left;
    height: 17em;
    width: 17em;
    padding: 1em;
    padding-top: .5em;
    margin: 1.5em;
    background: rgb(49,49,51);
    color: white;
}
#contentwrapper{
}
#d{
    width: 100%;
    background: black;
}
#footer{
    height: 2.5em;
    width: 69em;
    margin: 0 auto;
    background: black;
    text-align: center;
    color: white;
}
.smallbox{
    float: left;
    height: 15em;
    width: 17em;
    padding: 1em;
    padding-top: .5em;
    margin: 1.5em;
    background: rgb(49,49,51);
    color: white;
    text-align: center;
    text-decoration: none;
}
.smallbox img{
    padding: .2em 0;
}
.nounderline{
    text-decoration: none;
}
like image 327
user1281809 Avatar asked Mar 20 '12 19:03

user1281809

People also ask

How do you remove the underline on text decorations?

The underline can be easily remove by using text-decoration property. The text-decoration property of CSS allows to decorate the text according to requirement. By setting the text-decoration to none to remove the underline from anchor tag.

How do you display hyperlinks without an underline a text-decoration none?

The underline of the hyperlink can be removed with internal CSS by using a style tag with the property text-decoration as none.

2 Answers

Since this was the first google result and didn't solve my issue: Check the anchor states, as it might need to be set in one of the others. (https://www.w3schools.com/css/css_pseudo_classes.asp)

a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
}
like image 149
Vee Avatar answered Oct 17 '22 16:10

Vee

To apply just to this view add:

.view-portfolio-page .views-row a { text-decoration: none; }

To apply to all views add:

 .views-row a { text-decoration: none; }

http://jsfiddle.net/D8kRE/

You were applying text-decoration: none to a div which has no effect. You can only apply that to an anchor tag which in your case is located at .views-row a. You can get more specific and apply this to only the portfolio page view by using the code I've put above.

like image 30
jsheffers Avatar answered Oct 17 '22 15:10

jsheffers
Sign in to Comment

Related questions

How do I create a node from a cron job in drupal?
Form submit handlers with additional arguments
How to create a form using block module in drupal 8?
Datetime type in Drupal 7 schema
Get value of custom user field in Drupal 7 template?
Open a outlook new mail using php and html
How do I send an email notification when programatically creating a Drupal user?
How to redirect user to a specific page after they login if they belong to a certain role?
How to pass jquery variable to drupal (ajax)
HHVM Memcache integration
Looking for a way to simulate irregularly shaped DIVs
XAMPP PhpMyAdmin Error 1045, "Access denied for user 'root'@'localhost'
Push notifications Drupal module - Remove device (Web services)
Programmatically logout OAuth Connector in Drupal 7
drupal 7 - wiki page
Login remotely to Drupal 7 site using services module
PURL and/or Spaces?
Customize a create content form for a certain content type
Drupal 6 - Custom Node Type Template in Module

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!