Trouble with Webkit hack for social site

HTML & CSS
1

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.

/*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:

/* 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:

2

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?

3

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 .

4

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.

5

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

You could just float it like the objects are floated:

#fa-media-buttons strong {float: right;}

or move it up before the objects in the HTML.

7

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

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

9

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.

10

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.

11

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

The login details aren’t working :(. Keeps bouncing back as incorrect. Even if I copy paste.

13

sorry, its agetest2, not 3

14

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.

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

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?