CSS for CFGRID - Need to remove underline for links

I am using the below to make my CFGRID items line up and look the way I want. I am using the first column as my hrefkey and want to remove the "underline" from the link.

Does anyone have a tip on what I could add to that column's css so links will not have an underline in my grid?

Thanks.


#Grid .x-grid3 table { margin: 0 0 12px; border-collapse: collapse; clear: both; /* for clearing floated images */ }
th, td { vertical-align:top; padding:2px 0px; margin:0; }

#Grid .x-grid3-hd-1 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-1 {text-align:left; font-size:120%}

#Grid .x-grid3-hd-2 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-2 {text-align:left; font-size:120%}
      
#Grid .x-grid3-hd-3 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-3 {text-align:left; font-size:120%}

#Grid .x-grid3-hd-4 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-4 {text-align:left; font-size:120%}

#Grid .x-grid3-hd-5 {text-align:left; font-weight: bold; font-size:120%}
#Grid .x-grid3-col-5 {text-align:left; font-size:120%}

.x-grid-cell-inner {white-space: normal ! important; display:block;}
earwig75Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robin HallSenior Web Solutions ArchitectCommented:
Earwig75,

text-decoration: none is the style you are looking for.

You should be able to do what you are asking if you add it to link tag like so
#Grid .x-grid3-col-1 a 
{
text-decoration:none;
}

Open in new window


The "a" is what makes this work as it puts the style directly onto the Link tag.  I've gotten this to work using a standard table so hopefully it will work for you.
0
earwig75Author Commented:
Unfortunately that did not work. I did try exactly what you said before I made this question; I should have mentioned that.
0
Robin HallSenior Web Solutions ArchitectCommented:
When you tried it, did you add an !important tag to the end of the line?  Wondering if maybe something is overriding the CSS Code.

text-decoration:none !important;

If that still doesn't work my only other thought is to use something like Firefox's Developer tool Firebug to look more into the column and see what tags are showing up or are getting overwritten and try playing around with the CSS that way.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

earwig75Author Commented:
Yes, that is not working either.  I'll try IE Dev Tools. Thanks.
0
LZ1Commented:
If you still can't resolve it, please post a live URL or the rendered HTML/CSS code and we can then assist you further.
0
_agx_Commented:
By rnh82
     #Grid .x-grid3-col-1 a  {  text-decoration:none; }

A slight mod to rnh82 's suggestion worked for me. ie .x-grid3-td-{ColumnNameHere}.  

<style type="text/css">
<!--- column name MUST be in upper case --->
.x-grid3-td-MYCOLUMN div { text-decoration:none; }
</style>

<cfgrid ...>
          <cfgridcolumn name="MyColumn" href="somePage.cfm" ...>
          ...
</cfgrid>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
earwig75Author Commented:
Thanks for the replies. I cannot post a live link because this isn't a live site on the internet.

Below is what I tried after reading _agx_'s post but it still isn't working.

<style type="text/css">
.x-grid3-td-IDNUMBER div { text-decoration:none; }
</style>


<div id="Grid">
<cfform name="Grid">
<cfinput name="searchString" />
<cfinput type="button" name="searchBtn" value="Search" onclick="ColdFusion.Grid.refresh('Grid', false);" />
<cfinput type="reset" name="Reset" value="Reset" onClick="setTimeout(function() {ColdFusion.Grid.refresh('Grid', false);},500);" />
<br /><br />
<cfgrid  
    format="html" name="Grid" pagesize="20" width="455"
      bind="cfc:mycfc.getrecords({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection}, getSearchString())">
    <cfgridcolumn name="IDNUMBER" width="4" header="ID" href="pagename.cfm?" hrefkey="IDNumber" />
      *********other columns********
</cfgrid>
</cfform>
</div>
0
_agx_Commented:
CFGrid's use extJS. There were some css changes between 2.x/CF8 and 3.x.CF9.  I'm not an extjs guru, but the snippet above worked w/CF9. What version of CF are you using?
0
earwig75Author Commented:
I am using CF9. This is very frustrating. I am attaching a screenshot of what shows up in IE Dev tools. The cell with "8" is what is showing as underlined... Thanks again.
screenshot.jpg
0
_agx_Commented:
When you tried it, did you add an !important tag to the end of the line?

Gah, I pasted the wrong code.  Like rnh82 said it needs !important too. My bad.

.x-grid3-td-IDNUMBER div { text-decoration:none  !important; }
0
earwig75Author Commented:
Still no luck. =(
0
_agx_Commented:
Hm... did you clear cache? I'll have to find a machine and retest it for silly typos.. because I know it worked w/CF9 yesterday.
0
_agx_Commented:
This is my test code (uses a sample CF database). There's no underline in IE9 or FF10.  If the test code doesn't work for you..  I'm out of ideas :(

Though it's a cfgrid, the code is all extJS (3rd party library). So the CSS stuff is really a question for an extJS expert ... which definitely rules me out ;)

<cfquery name="getCourses" datasource="cfdocexamples">
	SELECT Course_ID AS MyColumn, CorNumber FROM CourseList ORDER BY Dept_ID ASC, CorNumber ASC
</cfquery>

<style type="text/css">
	.x-grid3-td-MYCOLUMN div {text-decoration: none !important; }
</style>
<div>
<cfform>
<cfgrid format="html" name="myGrid" query="getCourses">
	<cfgridcolumn name="MyColumn" href="test.cfm">
	<cfgridcolumn name="CorNumber">
</cfgrid>
</cfform>

Open in new window

0
_agx_Commented:
Did you get a chance to try the test code?
0
earwig75Author Commented:
Sorry it doesn't work with mine :(
0
_agx_Commented:
Did you try the exact code - no changes?  And what browsers/versions did you test it with? Because it seems weird that we're both using the same environment CF9.01 and it works for me but not you.  I tested with CF9/FF10.
0
earwig75Author Commented:
I agree it is weird. I am using IE8 and FF10.0.2. I am using the exact same code.
0
_agx_Commented:
Hm.. then you may have to ask on an extjs forum. I not a guru with it by any means. I'm just going off of what I see in the IE dev tools, which show this structure when the grid is generated:

               .x-grid3-td-MYCOLUMN div

.. and the fact that it works for me. A extjs expert would undoubtedly know the css better and could see what's missing.

Sorry I couldn't help more, but that's my best shot ;-)
0
_agx_Commented:
earwig75 - Don't forget to close this question.  If you did find a solution,  post it and accept your own comment as the solution. Otherwise, you could delete the question since no answer was found.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.