Jim R Posted March 25, 2023 Share Posted March 25, 2023 When I had the output in DIV, the styling worked. As I moved it to a table, it quit working. Nothing else has changed, so there shouldn't be any conflicts, but I have tried !important. HTML: echo '<td><span class="ranking">'. $line['rankClass'] . $line['devClass'] .'</span></td> CSS: .ranking { font-size: 24px; padding: 0px 10px 10px 5px; color: #FFF; background-color: #5472D2; border-radius: 5px; padding: 5px; } Quote Link to comment Share on other sites More sharing options...
kicken Posted March 25, 2023 Share Posted March 25, 2023 You have padding set twice, you should delete one of them. Otherwise, it seems to work fine if I copy/paste it into a jsfiddle test. Use your browsers developer tools to inspect the element, it should tell you what styles are applied, and if some aren't, why. Quote Link to comment Share on other sites More sharing options...
Jim R Posted March 25, 2023 Author Share Posted March 25, 2023 I deleted the extra padding. It's still not working. The numbers should be in a gray rounded box and should be white. That's what they were in the previous iteration. I'm updating this part of the site, so just making sure it's being applied before I dig in. Quote Link to comment Share on other sites More sharing options...
Jim R Posted March 25, 2023 Author Share Posted March 25, 2023 It looks like it's taking table styling from the core style sheet, but that's why I tucked all my custom stuff in <span>. None of my CSS is even shown as not being used. It all worked before I tucked it into a table. (I'm using a table because I can't ever get grid styling to work as cleanly as I would like.) Quote Link to comment Share on other sites More sharing options...
kicken Posted March 25, 2023 Share Posted March 25, 2023 Since we can't see whatever these core styles are, there nothing else really to say other than what you posted so far works fine. You need to post more details about the code and styles being used to get more help. If there is a URL to your page we could visit, that be best, otherwise provide the relevant styles and maybe a screenshot of the browser's dev tools when inspecting the span. 28 minutes ago, Jim R said: I'm using a table because I can't ever get grid styling to work as cleanly as I would like. A table is the correct thing to use when you have a table of data, which it seems like you do. Quote Link to comment Share on other sites More sharing options...
Jim R Posted March 25, 2023 Author Share Posted March 25, 2023 The page is normally behind a paywall, but I removed it for this. https://www.courtsideindiana.com/scout/class-home/?grade=23 Quote Link to comment Share on other sites More sharing options...
kicken Posted March 25, 2023 Share Posted March 25, 2023 That URL is redirecting to a registration page, and I'm not going to register to help fix a bug. If you still want to provide a URL but not have to mess with the setup much, my suggestion would be to just save the output of your script into a static .html file somewhere. As long as it's loading the same stylesheets and showing the same issue, it's enough to help. When the problem is fixed you can simply remove that file. Alternatively, try and re-create the issue in jsfiddle and provide a link to that. 1 Quote Link to comment Share on other sites More sharing options...
Solution Jim R Posted March 26, 2023 Author Solution Share Posted March 26, 2023 The style sheet wasn't properly linked. 🤦♂️ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.