WordPress.org

Ready to get started?Download WordPress

Forums

My CSS is not being read (30 posts)

  1. criskelly
    Member
    Posted 1 year ago #

    I am so confused! This site has a footer that is being successfully called, but the CSS doesn't show up for it. Each element in the footer should be floating left, there should be a background color, etc. But NONE of it's there! So confusing. I mean, it's there in the stylesheet, but it doesn't show up in the browser when I look at the site live. Any thoughts on this predicament?

    I tried changing the template, using !important, and other ideas. To no avail. Alas, my poor footer is left muddled and terrible looking. This site is built on the Genesis framework, if that helps. Thank you SO MUCH in advance for any help you've got.

    Cheers!
    Cris

  2. ChiefWigs1982
    Member
    Posted 1 year ago #

    Can you post a link to the site?

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Unless you post a link to the site where the problem exists, it's pretty impossible for anyone to offer much help.

    Have you tried validating the code to see if errors are the problem -- sounds like you might have a CSS or mark-up error:

    http://codex.wordpress.org/Validating_a_Website

  4. criskelly
    Member
    Posted 1 year ago #

    Oh duh. Sorry. Here it is:

    http://ayurvedaplus.com/

    I have not tried validating the code. I will do that today. Cheers!

  5. neo
    Member
    Posted 1 year ago #

    Hi there,

    May I know which CSS file you have edited? A quick checking using Firebug, there is no CSS declared for the div#footer.

  6. criskelly
    Member
    Posted 1 year ago #

    Well, the HTML is primarily at Genesis>Simple Edits, and the CSS file is simply the style.css file. It has been working perfectly for several months, and then I tried moving the get_sidebar around in the page template, and suddenly the footer's CSS was no longer being read. But code for the footer is definitely in the style.css file, so I'm totally confused. Here is some of the CSS that pertains to #footer: (see Pastebin URLs below).

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you use http://Pastebin.com to paste your HTML and link us the PasteBin page?

    You can find your HTML:

    • View your web page
    • Right click (assuming you're on Windows) on the page where you have the option "View source"
    • Select "View source"
    • The pop-up's contents will be the HTML
  8. criskelly
    Member
    Posted 1 year ago #

    Sure. I've never used Pastebin, but I'll do it now.

  9. criskelly
    Member
    Posted 1 year ago #

    Cool, I've never heard of Pastebin, but that's an excellent site to know about. Thanks. Here's the link to the paste:

    http://pastebin.com/jr8d0CrA

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you also Pastebin the HTML of the webpage?

  11. criskelly
    Member
    Posted 1 year ago #

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are any of your CSS styles being read?

  13. criskelly
    Member
    Posted 1 year ago #

    Yes, I know that #testimonials1 is working because I just assigned it to an element yesterday. So I know at least most of the CSS is being read.

    It's so strange!

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    It looks like you're using the wrong CSS selectors, from the HTML and CSS you've linked.

    In the HTML, there isn't a <div> with the id, "footer".

  15. criskelly
    Member
    Posted 1 year ago #

    There is, I just updated the Pastebin for the HTML. When I first posted the HTML it wasn't there, but it's there when I "view source" (I'm on a Mac). So I copied the HTML from the view source (instead of from Genesis>Simple Edits in the WP dashboard).

    The div#footer is there, though.

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    To float left the main elements in the footer, can you try this CSS:

    #footer #right-footer-col,
    #footer #middle-footer-col,
    #footer #left-footer-col {
     float: left;
    }
  17. criskelly
    Member
    Posted 1 year ago #

    Hmmm. Nothing different, sorry. I notice that in the Google Inspector, when I hover over the HTML line for div#footer, it highlights almost the entire page. How is that possible?

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    Make sure your website uses valid markup via W3C's Validator.

  19. criskelly
    Member
    Posted 1 year ago #

    Hmmm...I don't know what this means:

    Parse Error .content-sidebar #content, .sidebar-content #content { width: 620px; }

    The Validator caught it as an error.

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is that the entirety of the error?

    Here's a list of explanations for errors
    http://validator.w3.org/docs/errors.html

  21. criskelly
    Member
    Posted 1 year ago #

    Thanks, I'll check that link. Here's the whole line:

    658 #content Parse Error .content-sidebar #content, .sidebar-content #content { width: 620px; }

    There are tons of other errors, but ALL are related to -moz, -ms, -webkit, and -o prefixes. Except the last one:

    1933 .entry-content Value Error : margin-top Unknown dimension 30px3

    But I can't imagine that's causing the footer CSS to not be read?

  22. criskelly
    Member
    Posted 1 year ago #

    OK, I fixed that last error.

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you're still experiencing this problem, could you Pastebin the entire HTML for that web page, rather than just the footer?

  24. criskelly
    Member
    Posted 1 year ago #

    Sure.

  25. criskelly
    Member
    Posted 1 year ago #

    Here's the new paste:

    http://pastebin.com/sfEf178k

    That's everything from "view source".

  26. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you add;

    #footer {
     clear: both;
    }

    Do you still experience the footer highlighting almost the entire page, when using Google Inspector?

    If not, try;

    #footer {
     border: 10px solid red;
    }

    To see if any change is applying properly.

  27. criskelly
    Member
    Posted 1 year ago #

    Whoa! I added the border code to the stylesheet, waaaaaay high up on the sheet, and it definitely worked!

  28. criskelly
    Member
    Posted 1 year ago #

    OK, so wow...thanks for leading me down this road. I have the footer working again, but I had to put it way up at the top of the stylesheet. So now all that's not really working is the code in the bottom: mainly, the media queries.

  29. Andrew
    Forum Moderator
    Posted 1 year ago #

    As we've discussed a while on one issue, you may need to create a new thread for your Media Queries issue, as you're more likely to receive help.

  30. criskelly
    Member
    Posted 1 year ago #

    Good point. Thanks so much for your help!

    Cheers!
    ck

Topic Closed

This topic has been closed to new replies.

About this Topic