How do I style a popup thumbnail?

Page: 1

Author Post
Member
Registered: Nov 2010
Posts: 71
I'm attempting to style the image in a popup thumbnail but I can't find an option for that purpose. If I place
 img.fbPopper { border:10px solid #0000ff; }
in my CSS file, it gets overridden by "border: 1px solid #000000;" in floatbox.css, line 9. Of course I can use
img.fbPopper { border:10px solid #0000ff !important; }
in my CSS file but I'm not a big fan of that method. Any suggestions.
Administrator
Registered: Aug 2008
Posts: 3382
I would recommend using your own classes for styling your thumbs and not relying on what Floatbox inserts into the HTML. The fbPopper class is really for Floatbox internal use and exists primarily because IE 6 doesn't understand the :first-child selectors that are used for other browsers. The fbPopper class could disappear or change in future Floatbox releases.

Styling those thumbnail images can certainly be done with standard CSS. The reason why your border style is not being applied is that the :first-child selectors in that floatbox.css line gives those selectors greater specificity than your img.fbPopper selector. .fbPopup img:first-child contains one element type and two class selectors. img.fbPopper contains only one class selector. The first one trumps the second due to specificity rules.

Perhaps use something like a.fbPopup img:first-child, a.fbPopup img as your selector. The addition of the <a> element type gives this selector greater specificity than the floatbox.css selector, it is using a classname that you assigned to your links and have control over, and it will still work in IE 6 (if you still care about China).
Member
Registered: Nov 2010
Posts: 71
Thank you very much. I had to use

a.fbPopright img:first-child

as my selector without "a.fbPopup img" because I had another image within the <a> element.

<td class="nowrap left"><a class="floatbox fbPopright" href="/common/images/players/large/bob_last.jpg" data-fb-options="caption2:`Bob Last` group:players">Bob Last <img src="/common/images/players/bob_last.jpg" alt="" /><img src="/common/images/flag.gif" /></a></td>

I wanted the popup whenever someone hovered over the text or the flag at the end of the text.
Administrator
Registered: Aug 2008
Posts: 3382
IE 6 will get different borders, but so what.

Page: 1