Need help? Check out our Support site, then


Can I use browser-specific CSS?

  1. jordandaleyoung
    Member

    I'm having an alignment issue in the footer of my posts. Everything is correct in Safari and Chrome, but not Firefox. I'm trying to create a separate code just for Firefox to read so that I can align it separately.

    Jordan

    The blog I need help with is minimograph.com.

  2. First thing I'll mention is that at WordPress.com, it is a much better idea to not paste the entire stylesheet into the CSS edit window as it can end up causing conflicts of you have the "add to" option checked, and in some instances images used in the theme design can go missing since the URLs in the CSS are relative (relative to where the CSS file is) rather than absolute (starting with http://). Also, it makes it much harder to keep track of what changes you have actually made, especially a few months down the road. It is best to insert only the specific selectors and only the specific declarations you are changing or adding. Anything that you are not changing is not put into the CSS.

    If you are talking about getting the comments link to align to the right of the social icons, those two things are in different parent divs. The social icons are in the .entry-content div and the leave a comment stuff is in the .entry-meta div. This isn't an issue with Firefox. Firefox is actually reading and displaying things as they should be. It is the other browsers that are actually sloughing and not rendering truthfully. At least that is my opinion. :)

    The following is sort of a "hack" but it gets the job done I think. Make sure and check a few different posts to make sure this works.

    div.sharedaddy {
    bottom: 0;
    position: absolute;
    }
    
    .hentry {
    padding-bottom: 80px;
    position: relative;
    }
    
    .hentry .entry-meta {
    position: relative;
    right: 0;
    top: 65px;
    }
  3. jordandaleyoung
    Member

    Thanks for the quick reply! I will admit that I know hardly anything about CSS, and I'm partly using this blog as an opportunity to practice. I'm trying to understand the whole thing at once while I'm editing it, which is why I copy it all. This whole thing is pretty messy and makeshift at this point, I realize.

    Also, I apologize to Firefox for slandering its good name. By "correct" I should have said "the way I want it to look." All jokes aside—I wasn't aware of the parent divs, so thanks for that.

    I tested your code in Chrome and Firefox, with similar results. Both drop the social media icons and comments link to beneath the black bar.

    This is with the code exactly as above:
    http://minimograph.files.wordpress.com/2013/04/screen-shot-2013-04-25-at-3-30-08-pm.png?w=738

    Fiddling around a little, I could get the social media icons to align horizontally, but they were below the black bar and not aligned with the comments link.

    Again, thanks so much for your help on this, and thanks for dealing with a newb. Is there anyway to do browser-specific CSS? If I edit for Firefox, I can get it to do what I want, but that obviously changes the other browsers.

  4. The things that are causing the issue are not browser specific. There is some browser specific CSS, but very little of it anymore.

  5. jordandaleyoung
    Member

    Perhaps this simplifies it.

    In Firefox, this works:

    div.sharedaddy {<br /> position: relative;<br /> left: -1.2em;<br /> bottom: -1.1em;<br /> margin-right: 0;<br /> width: 50%;<br /> }

    In Chrome & Safari, this works:

    div.sharedaddy {<br /> position: relative;<br /> left: -1.2em;<br /> bottom: -.1em;<br /> margin-right: 0;<br /> width: 50%;<br /> }

    It's just the bottom property, with 1em of difference.

    Is there not a way in CSS to say, if Firefox, read this, and if Chrome, read this?

  6. Not that we can do. Typically you create a separate CSS file for browsers that require specific things. This is very commonplace with Internet Explorer, especially for version 8 and older. The problem is, you have to make changes in the head section of the theme so that it can find out what browser is being used. Then it can load that CSS file for that particular browser. We can't modify the head section of themes.

    I'll tag this for staff attention and hopefully someone on the theme team, or Team Custom will see it and perhaps staff can adjust the HTML markup of the theme so that this isn't an issue, or perhaps one of them will have a fix for it.

  7. jordandaleyoung
    Member

    Thanks so much for taking the time to look at this!

  8. You are welcome.

  9. I get correct alignment and identical results in Firefox and Safari if I use absolute positioning for the icons as well as the comment link:

    .hentry {
        margin: 0 0 2em;
        position: relative;
    }
    div.sharedaddy {
        bottom: 0;
        left: -1.2em;
        margin-right: 0;
        position: absolute;
        width: 50%;
    }
    .comments-link {
        bottom: 1em;
        margin-right: 0;
        position: absolute;
        right: 0;
    }
    footer.entry-meta {
        padding-top: 0;
    }
  10. @panos, thanks for that. I was going to come back to it and slog through it and figure out how to do it, but you beat me to it.

  11. Thank my insomnia...

  12. I'll buy it a beer, or a cup of coffee or something. :)

  13. jordandaleyoung
    Member

    Wow, I want to buy y'all a beer or something. I can't believe it's working. Thank you so much.

    I've got another unimportant issue that's related: The "Leave a comment" link now overlaps the post-edit link. Since that's just the behind-the-scenes for my eyes only, I'm not concerned about visitors seeing it, but since I'm learning CSS, my curiosity wants to figure it out.

  14. You're welcome.
    We cannot see your Edit link to see where it falls after the rest of the changes you've made, but since my variation of TSP's solution worked, one solution would be to position the Edit link just like the Comments link vertically, and push it to the left:

    .post-edit-link {
        bottom: 1em;
        position: absolute;
        right: 12em;
    }
  15. jordandaleyoung
    Member

    Now I'm just going to buy you a keg.

  16. I love this thread. :)

    There are some pretty crazy browser-specific CSS hacks floating around in the world, but the solution reached in this thread is much better—just make the CSS work the best you can to fit your needs.

Topic Closed

This topic has been closed to new replies.

About this Topic