[SOLVED] CSS Style Not Rendering

Howdy -- I’m using two template variables within chunk to provide a hyperlinked line of content to a page. The TVs are for the content and the destination URL. The content appears on the page just fine, but the defined a:hover style doesn’t. The CSS file that the site is using was developed offline and worked fine. I’ve double and triple checked the CSS and HTML, and everything looks correct. In fact, in a div further down the page are links related to seperate content with the same a:hover style -- everything there works fine.

I guess my question is what troubleshooting methods have people established for a scenario like this? I know it sounds like an HTML or CSS issue, but it isn’t...

Thanks

You might need to post some code samples or the url.

Just to confirm, the hover isn’t working for ONLY the links generated by the TV??

Might sound like a bad suggestion, but check where you’re uploading the CSS file. I have several on my site, and sometimes I accidentally upload to the wrong directory and changes don’t appear. Might be worth a double check???

Quote from: hotdiggity at Jun 15, 2010, 08:23 PM

You might need to post some code samples or the url.

^

(I vote for the URL)

If you use Firefox, I’d recommend getting the FireBug addon, saved me plenty of times already.

If you don’t use Firefox, you should. :p

Yeah, or try CSSEdit on Mac to "xray" your interface for troubleshooting.

It’s either a case of editing the wrong css file (dev site vs production site, for example) or a case of one container overlaying another, and any mouse action is processed in relation to the overlaying container and not your links. It can be solvable with a z-index setting, or adjusting the positioning of the containers involved.

Thanks for the responses. Yes, I should have included the code. Find that below.

Specifically, the a:hover style isn’t working ONLY for this one link, which is brought in via a couple of TVs bundled by a chunk. There is a ditto feed in a div further down the page with all styles working just fine. And, as mentioned, these files were developed ’offline’ first and have changed very little as they have moved into the MODx environment.

I do use firebug, actually, and it checks out. The CSS file is valid. Oye. Pilot error is totally possible, of course, and I appreciate the extra eyes!

Here’s the page code:


<div id="content">

<h2>[*home_page-first-line*]</h2>

[*content*]

{{home_page-CTA_URL}} <!--this is the chunk that calls the linked content that is in question-->

<div class="latest-news">

<h3>Recent News</h3>

[!Ditto? &parents=`4` &display=`3` &truncLen=`70` &truncText=`[Read More]` &tpl=`home_page-latest_news` &paginate=`0` &extenders=`summary` &orderBy=`createdon DESC` !]

</div><!--end latest-news-->

</div> <!--end content-->

And here is the CSS for that section:

#content a {
font: .82em/1.3em Tahoma, Arial, Helvetica, sans-serif;
letter-spacing: .1em;
text-decoration: none;
font-variant: small-caps;
color: #B96001;
}

#content a:hover {
color: #F0E7DD;
}

I think you need to show us the rendered code, not just the template code.

Sure -- here you go:

<div id="content">

<h2><!--h2 content--></h2>

<p><!--p content--></p>

<span id="link-bullet">&raquo;</span><a href="http://localhost:8888/gallery.html"> Browse the gallery</a> <!--this is the link for which the a:hover style isn’t functioning-->

<div class="latest-news">

<h3>Recent News</h3>

<!--news content-->

</div><!--end latest-news-->

</div> <!--end content-->

Use class instead of id in the span tag:

<span class="link-bullet">

#content .link-bullet a {
etc;
}