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

I am working on a page in Drupal 7, in which I have several boxes with text and a photo inside them. I have the entire div box associated with my content page, but I cannot get rid of the underline.

I tried applying text-decoration: none; to each class inside and outside the field, and the text inside the field is still underlined.

Even when I use the developer tool / check item tool on Google, it shows that the computed style for the field and text inside text-decoration: none;

I tried to figure this out and worked for about a day, and I could not find any solutions through Google.

Any ideas?

Thanks in advance.

Edit: I am working to publish my code. I am trying to find a good solution for publishing because it is a page in Drupal that renders through Views. In addition, I have a job interview for the hour I'm preparing for. I probably should have waited until after the interview he posted this question. Oh, OK.

Edit x2: My HTML looks like this:

 <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":"cx 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 looks like this:

 @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; } 
+4
source share
7 answers

To apply only 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 applied the text design: none to a div that has no effect. You can only apply this to the anchor tag, which in your case is in .views-row a. You can get more specific information and apply it only to viewing the portfolio page using the code that I set above.

+2
source

Since this was the first Google result and did not solve my problem: check the binding states, as this may 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; } 
+1
source

try to add! important

text-decoration: none !important;

0
source

If you are referring to text underscore, be sure to set the text-decoration property to none on ELEMENT. For instance.

 <html> <head></head> <body> <div> <a href="www.google.com" style="text-decoration: none"> Google</a> </div> </body> 

Edit: Note: it’s bad to use a style in a line with elements, I used it to demonstrate a solution.

0
source

Instead of font-decoration: none ; try css text-decoration: none;

0
source

Since in reality he has not yet received a final answer, he is quite high in Google search. I thought I could get my answer.

I had a similar problem when I could not determine why I could not get rid of the underscore and found out that this happened because I did not indicate the state of the hang.

So try

 #header a:hover { text-decoration: none; } 

And that should work. I know this was published many years ago, but I saw that you did not accept the answer and did not publish whether you sorted it or not. Therefore, I hope that my contribution will help someone along the way, and I hope you can see it and, finally, accept the answer or make your own.

0
source

The work on the design of the text at anchor, its correct name will be: anchor-decoration-for-text.

-1
source

Source: https://habr.com/ru/post/1402528/


All Articles