Member Avatar for ppetree

OK, I'm completely stumped by this one!!!

Here's the code, it's included in the <head> tag as it should be... the files exist, the site works just fine.

<link rel="stylesheet" type="text/css" href="rateasite.css"  />
<link rel="stylesheet" type="text/css" href="star-rating.css" title="Do dating sites work?" />

If I add a title="" to the rateasite.css link, the rating stars do not show up. Even if I put in a title=""

You can see the site

At this link you can see the same page but with the title="" added to the link line and see how it doesn't

What gives? Why does adding the title tag on the first link break the stars?

The ONLY difference between the 2 pages is the title="" in the first <link> line.

Edited by ppetree because: n/a
  • 2 Contributors
  • 2 Replies
  • 119 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by ppetree

Dani AI

Generated

Short answer: adding a title to a stylesheet can change how browsers treat that stylesheet group, so the star-rating CSS can end up disabled. The title attribute turns a stylesheet into a named (user-selectable) sheet; browsers may only enable one named sheet from that group by default. See the HTML spec on link/title behavior for details: WHATWG — link title semantics and a practical summary on the link element: MDN — link element.

Practical checklist to fix this thread’s issue (apply in order):

  • Remove the title attribute from any stylesheet you do not intend to be an alternate or user-selectable theme. Non-titled stylesheets are always applied; titled ones form named groups.
  • If you do want an alternate theme, use the alternate semantics deliberately (give titles only to intended alternates and use rel="alternate stylesheet" where appropriate).
  • Make the rating stylesheet untitled (or import it from your main stylesheet) so it’s always applied. Place it after the main CSS if its rules must override earlier rules.
  • Fix the HTML validation errors noted by (close the ul, use proper XHTML br syntax if serving XHTML). Invalid HTML can cause different browsers to ignore or reorder stylesheet application and hide symptoms.

Testing tips:

  • Validate markup, then test in at least two browsers (Chrome/Firefox). If stars still don’t appear, view the document style inspector to confirm whether the star stylesheet was loaded and which rules are active.

Recommended Answers

All 2 Replies

Member Avatar for ko ko 
<td class='td_stars'><ul id='total' class='rating ninestar'></td>

There is no closing for the 'ul', and validation failed.
http://validator.w3.org/, validate here.
'<br>' doesn't allowed in XHTML. You should use '<br />'.

Member Avatar for ppetree

Thanks for that!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.