fbPopcenter

Page: 1

Author Post
Member
Registered: Mar 2009
Posts: 42
Location: UK
I was planning to use class="fbPopcenter" to enlarge a navigation button image on mouseover, but the subsequent click is to action a link to a new page not contained in a floatbox. This works to a point, but the enlarged second image that pops up has a rectangular 1 pixel black border placed around it by fbPopcenter, and as it is a circular button on a white background, this spoils the enlarging effect completely. Is there a way to avoid having any border imposed?

Also, the enlarged thumb image moves up and slightly to the left, rather than its expansion being centered over the top of the first image. Not sure why...

David
PS. Thanks for recent license adjustment.
Administrator
Registered: Aug 2008
Posts: 3382
The 1px border is assigned in floatbox.css. You could modify it there, but you're probably better off just overriding it with a style attribute directly on the thumbnail <img>. This way, you don't lose it if upgrading or refreshing the Floatbox files. style="border-style:none;"

I'm pretty sure you'll find the center of the popup image coincides with the center of the underlying image. You may have asymmetric transparent areas on one or both which would place the apparent center somewhere other than the geographic center. If this is not the case, you're welcome to show me the page so I can investigate.
Member
Registered: Mar 2009
Posts: 42
Location: UK
That's sorted the black border for the popups. Thank you!

But I can't see why the popups are still going upwards and slightly to the left... :x

Here's a test page. (Floatbox 6.0.3 installed)

http://southsaxonbeardsmen.co.uk/indexfbquery.php


I have given the upper row of circular button images individually-tailored styling to make the popups appear in the right place.

The lower row are specified just as per instructions, with the first 'img src=' widths and heights specified larger for the popup, and with actual-size settings for the original second 'img src=' images, and no other styling, except a {img.border: 0} in the loaded css file, but they don't pop-center like they should...

I guess I'm too close to it to be able to see what's happening or what I've done wrong...

David
Administrator
Registered: Aug 2008
Posts: 3382
Found the problem, and it looks I've got a little work to do on my end.

The body element on your page has a default margin of 8px on it. The popup thumb is being displaced exactly 8px from where it should be as a result of this margin. You can fix it by removing the margin, but this will change your page layout a little. <body style="margin:0;"> I need to make some code changes so that subsequent Floatbox versions will correctly handle this scenario.
Member
Registered: Mar 2009
Posts: 42
Location: UK
Hello Byron

Yes, thank you very much. That fixes the horizontal shift, but the popups are still rendering their baseline on the same baseline as the second image tags, so are jumping upwards and bigger, rather than "towards" you... Must be some other quirk of my css I guess.

I've adjusted the body css as suggested and taken out the upper row...

http://southsaxonbeardsmen.co.uk/indexfbquery.php


David
Administrator
Registered: Aug 2008
Posts: 3382
It's still an issue with margins on containing divs. This time it is the #header div with a margin-top of 5px - the exact displacement of the popup thumb. There's also a top padding on that div of 10px. If you drop the 5px margin and add that 5px to the padding, your page layout won't change and the fbPopcenter thumb should pop in the center.

Definitely a Floatbox bug. The fbPopcenter thumbs will display displaced by however many pixels of margin styles are on containing elements. This will be fixed in subsequent releases (post 6.0.3), but right now you have to choose between margins or popup thumbs because the two are not getting along together.
Member
Registered: Mar 2009
Posts: 42
Location: UK
Well that clears that up then, and sorry to have found a sort-of bug! I have now got things to work fine by converting all margins to paddings for the time being.

Part of my plan was that these popping buttons would be placed on top of a graphics-backgrounded div, and placed in specific positions on this background image.

As the {border-style:none;} that you recommended needs to override what's in the fbpopper class, in my attempt to define an image class for the buttons that includes that AND some position adjustment of each image by setting padding, I discovered that my class gets actioned BEFORE fbpopper's class, and so is overridden by fbpopper.

So I've had to add a bunch of in-line styling to all eight img tags. The main thing is that it all now works rather splendidly, so thanks, as ever, for your exemplary customer support!

Test Page
Administrator
Registered: Aug 2008
Posts: 3382
CSS rules apply based on specificity. In cases where two contradictory styles apply to an element, the more specific selector will win.

Specificity, or weighting, can be thought of as a series of 4 integers corresponding to the count of the following selector components:
1) the style attribute on the HTML itself,
2) #id references,
3) .class or :pseudo-class references,
4) element type references.

When comparing two specificity weightings, if the digits to the left don't match, then the larger digit wins. If they do match, then the next digit to the right is compared. And so on with each of the 4 digits until a stronger rule is found or the rules are determined to have identical specificity.

If the specificity of two rules is the same, the last rule encountered wins. So if your css uses the same css selectors that floatbox.css does, your css should be brought into the page after floatbox.css to have its rules applied.

Or, you can make your rule selector more specific to have it apply regardless of rule or css file order.

Taking the popup thumbnails as an example, the border is set with the following rule:
.fbPopup img:first-child { border: 1px solid black }
This selector has a specifity of 0-0-2-1.
In left to right order:
0 because this is not a style attribute on the element,
0 because there is no #id component in the selector,
2 for the sum of one .fbPopup class reference and one :first-child pseudo-class,
1 for the img tag type reference.

One way to make the selector more specific would be to add a single element type reference such as body to it.
body .fbPopup img:first-child
This gives specificity of 0-0-2-2, which trumps the floatbox.css 0-0-2-1.
A selector of a.fbPopup img:first-child would have the same effect and same score.

A stronger way to be more specific is to include the id of a main wrapper div, if you have one. Something like #main .fbPopup img:first-child, yielding specificity of 0-1-2-1. This selector will override any selectors that use only class and tag type references.

And lastly, we can override all css selectors by placing a style attribute directly on the element. The style element has a specificity weighting of 1-0-0-0 and the left-most digit trumps the 0 in that position that all CSS-based rules have.

For completeness, I should acknowledge that there is the !important override available, but I don't include that here because I don't like it and don't use it. It disrupts the Cascading aspect of CSS and is kind of a spaghetti code technique akin to goto in old Basic and Fortran programs.

Page: 1