Forums

Framework CSS clashes with Lightbox Add Ons

Permalink
Zurb's foundation.min.css seems to clash with several lightbox Add Ons, which results in images with cut off borders. The C5 Gallery Block and Lightboxed Image are both affected.

After cutting various lines out the offending CSS is:
*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;


Is there a way of fixing this issue?
designclash1
 
designclash1 replied on at Permalink Reply
designclash1
I've tried to figure out the problem but my although CSS is improving I can't seem to solve this issue.

I've looked at using other frameworks but they all seem to contain :
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


I know that * applies to the whole document so I guess this is a tricky one.

Any suggestions would be greatly appreciated!!!
RBeddie replied on at Permalink Reply
RBeddie
I've had a look at the link you included, and I'm guessing the issue you're having is that the pop-up containing the images is sometimes taller than the page?

If the targeted CSS isn't sorting the issue, it might be that the CSS you've highlighted isn't the issue and is masking something else. Do you have any screenshots of how it's supposed to look?

As an aside, the images you've included are really large in size, it might be an idea to reduce these as that may help the issue as well.
designclash1 replied on at Permalink Reply 1 Attachment
designclash1
Thanks for taking a look.

Not really, it happens to small and large images alike. I've attached an image of the problem. Both the right and bottom border is cut off.

Without the box-sizing CSS property the border appears around all four sides as it should.

My experiments earlier today screwed up the site. Not sure what I did or how I fixed it... so I need to be dead sure of what I'm doing!!!
RBeddie replied on at Permalink Reply
RBeddie
I see the issue now, if it helps I've checked the functionality in IE7/8/9, Chrome, Firefox, Opera, and Safari on the PC and this doesn't appear happen with them. I take it you're working on a Mac? If so can you try viewing it in another browser?
designclash1 replied on at Permalink Reply
designclash1
Hi,
Bit of a blunder my end.... sorry! All the images on my site use Pop Up Pro which is unaffected.

I've added a Lightboxed Image block at the very bottom of the page to illustrate the problem. There are 2 images of Red Kites. The top one uses Pop Up Pro, the bottom one uses Lightboxed Image, which suffers from cut off borders.

The link:
http://www.laxtonvillagehall.com/history/...

Cheers
RBeddie replied on at Permalink Best Answer Reply
RBeddie
Makes sense now :)

Add this into the CSS:

#colorbox {
    box-sizing: content-box;
}


you can add in the additional prefixed variations as well if you want.

Let me know if this helps.
designclash1 replied on at Permalink Reply
designclash1
Fantastic!!!!!

I've added the other variations:

#colorbox {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


Please tell me what you did exactly.

I guess you called some property from the add on? For example

If I wanted to do apply the same rule to the Concrete5 Gallery Block would I use:

#gallery {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


Again, many thanks... your a legend!
RBeddie replied on at Permalink Reply
RBeddie
You're welcome.

The CSS hooks into the ID used for the pop-up i.e the HTML element looks like:

<div id="colorbox"></div>


All the CSS is doing is telling the browser to render the box model for that element as content-box instead of border-box.
RBeddie replied on at Permalink Reply
RBeddie
You can over-ride this if you have a wrapping element around the HTML you are referencing.

HTML
<div id="htmlWrapper">
    HTML element/s that need * over-ridden
</div>


CSS
#htmlWrapper *{
    insert over-riding CSS here
}


This will work with classes as well, you'll need to use .className * instead.
designclash1 replied on at Permalink Reply
designclash1
Thanks for the reply, your a star!

I'm taking a look right now. How would you override the box sizing css?

I'm not sure if I'm doing this properly but so far this hasn't worked:

My HTML: 
<div class="c5row">
  <div class="twelve c5columns">
     <div class="panel">
     <div class="c5row">
          <div class="three c5columns">
            <div class="history_image">
              <?php $a = new Area('History Image 10'); $a->display($c);?>
            </div>
              </div>
              <div class="three c5columns">
               <div class="history_image">
                 <?php $a = new Area('History Image 11'); $a->display($c);?>
             </div>
           </div>
          <div class="six c5columns">
Viewing 15 lines of 25 lines. View entire code block.


My CSS:
#html_wrapper *:before, #html_wrapper *:after { 
        -webkit-box-sizing: border-box;
   -moz-box-sizing:  border-box;
     box-sizing:  border-box;
}


Cheers!!!
RBeddie replied on at Permalink Reply
RBeddie
Here's a good description of box-sizing:http://css-tricks.com/almanac/properties/b/box-sizing/... . To over-ride this you'll need to set them back to their default of "content-box". e.g.

#wrappingElement *{
    box-sizing:content-box;
}
designclash1 replied on at Permalink Reply
designclash1
I see... I just updated my post yo include my code.

Cheers!
RBeddie replied on at Permalink Reply
RBeddie
You'll need to reset them to "content-box" in the CSS
designclash1 replied on at Permalink Reply
designclash1
Just changed the border-box for a content-box.... Still no luck! :(



Would this help?:
#wrappingElement *:before, #wrappingElement *:after {
     box-sizing:content-box;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
}


Thanks
RBeddie replied on at Permalink Reply
RBeddie
Can you confirm that the CSS is working? You may be targeting it incorrectly, or not at all. Try adding a rule for a thick border, this will show you if it's acting on the element.

Also, do you have a link to an example? Might be easier to diagnose that way.
designclash1 replied on at Permalink Reply
designclash1
Hi,
I've applied a CSS border and it applied to only that element.

The page I'm have trouble with is:
http://www.laxtonvillagehall.com/history/...

My site uses the Pop Up Pro plugin which works fine but is a little slow to load.
RBeddie replied on at Permalink Reply
RBeddie
Just to elaborate...

The element you target with the CSS needs to be around the HTML that needs the CSS change. So if it's a modal window the element you target needs to be on the modal window, and not the link that fires the window.
designclash1 replied on at Permalink Reply
designclash1
... I'm still at novice stage so I'm not sure what a modal is!