SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble with Webkit hack for social site...

    I have a social media site that uses a plugin for wall posts. The plugin looks fine in Firefox, but Embed Image/Video text displays underneath icons in Safari or Chrome instead of inline! When using Dev Tools in Chrome, if I uncheck the float:right property, it justifies to the left. When I recheck it, it renders fine the way it does in Firefox. I tried using a clear fix but it didnt seem to help. I never wrote a browser hack so Im not sure if I did it right. I went into the Wordpress plugin css and put this code in but it had no effect in Chrome.
    Code CSS:
    /*Webkit Hack*/
    @media screen and (-webkit-min-device-pixel-ratio:0) {
         /* put webkit CSS here*/
     
    #fa-media-upload-buttons {
    	display: inline;
    	float: left;}
     
     
    }

    I also tried using this:
    Code CSS:
    /* slightly enhanced, universal clearfix hack */
    .clearfix:after {
         visibility: hidden;
         display: block;
         font-size: 0;
         content: " ";
         clear: both;
         height: 0;
         }
    .clearfix { display: inline-block; }
    /* start commented backslash hack \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* close commented backslash hack */

    Can anyone explain how to go about correctly writing a browser hack?

    Here are screenshots:
    2012-02-25 04.43.07 pm.png2012-02-25 04.43.23 pm.png

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Never write browser hacks. They aren't needed (well, IE is sometimes ok to have them, but NEVER EVER for FF/webkit or any of those main browsers)

    It's best to solve the issue from the source. Do you have a live link where we can check this out?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    ...They aren't needed (well, IE is sometimes ok to have them, but NEVER EVER for FF/webkit or any of those main browsers)...
    Expanding...versions of IE below version 8. If you need hacks for 8+ then you are doing something awfully wrong. Even for versions below 8, hacks should be at the very minimum .
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Aka what I said is true. Sometimes it is ok for IE to have some , though yes to a minimum. You should never need many anyway. It's a sure sign you messed up if you need a lot.

    I still code for IE7. I'm waiting for results from my hosting to see whether IE6 will be added.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip! I have only really ever seen IE hacks for the most part anyway. I have gotten pretty good with finding and changing stuff in Firebug, but still figuring out how to use it to debug. The plugins stylesheet is pretty straight forward.

    @Ryan- Because its a membership site youd have to login to see it. You can login on the nice new page you gave me advice on the other day
    ytango.com/wp-login.php
    user=agetest3
    pass=sf982111

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could just float it like the objects are floated:

    Code:
    #fa-media-buttons strong {float: right;}
    or move it up before the objects in the HTML.

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could just float it like the objects are floated:

    Code:
    #fa-media-buttons strong {float: right;}
    or move it up before the objects in the HTML.
    It is already being floated, it just doesnt render correctly in Webkit. I dont understand what you mean by moving it up before the objects. Can you explain?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ralph meant to change the order in the HTML...aka switch that up with your "objects". Aka switch up the video/icons in the HTML
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Almost....

    Ok I see. So I went in and switched it, now the text is inline, but it pushes the last icon down. See screenshot. I tried playing with the margins/padding of surrounding elements but to no avail.2012-03-06 02.35.27 pm.png

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Screenshots do nothing for us really (most of the time).

    We need code to replicate it on our end . Full HTML and CSS. Although we really do prefer having links instead of code. Due to us not being able to see images, video, etc.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh ok. I posted login stuff but here it is again
    ytango.com/wp-login.php
    user=agetest3
    pass=sf982111

    After login you can view the status box on profile wall

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,582
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The login details aren't working . Keeps bouncing back as incorrect. Even if I copy paste.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, its agetest2, not 3

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by satori83 View Post
    It is already being floated
    No, the <strong> element that you are trying to position is not currently floated.

    So you could either try my first solution (and move the <strong> back below the <objects> in the HTML, or instead leave it as it is now and perhaps set a width on the #fa-media-buttons div. E.g.

    Code:
    #fa-media-buttons {width: 210px;}

  15. #15
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Got it!

    Thanks guys. Setting it 210px worked. I didnt see that there were two style sheets called the same thing, one in plugin folder and another in Css. Thanks again!

    So if I understand this correctly, I had to set a width because however the style defaulted to in chrome conflicted? So the more specific the better?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •