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.

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

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?

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 .

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.

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:)

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.

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?

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

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.

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.

Oh ok. I posted login stuff but here it is again:)

After login you can view the status box on profile wall

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

sorry, its agetest2, not 3

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;}

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?