LightBox CSS

Working on an HTML site to implement a LightBox Gallery. Thought It would be simple enough but it seems like the CSS is all messed up. Not too sure if its getting all the files it needs, but I checked the JS, CSS and other links and they all seem to be called correctly into the page.

Here is the webpage:

The Gallery Slide show links are half way down the page

I will attach the source for the Lightbox files that I am using. Any help would be great. Not too sure if I have a jquerry conflict problem here or if it is strictly CSS?
Chris LabbateOwnerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris LabbateOwnerAuthor Commented:
This is the Lightbox being used.
Chris LabbateOwnerAuthor Commented:
I should also mention I am trying to implement example5 from the Light-box code.
it seems you don't have colorbox.css file in root, error 404.
Locate colorbox.css on your server and set correct path to it.
<link rel="stylesheet" href="ADDPATHHERE/colorbox.css">

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris LabbateOwnerAuthor Commented:
That seemed to Help but not quite there yet?

What is causing all of the controls to be out of place?
Replace everything from colorbox.css with following:
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
    #cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(images/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(images/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(images/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(images/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible;  position:absolute; bottom:-29px; background:url(images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious:hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext:hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose:hover{background-position:-100px 0px;}

        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;}

Open in new window

Chris LabbateOwnerAuthor Commented:
Thanks my Friend:

 That Worked, I suspect that I had a few of overlapping CSS Styles. I always thought that it would be great if there was a CSS Conflict tool out there?? Got some free time on your hands, here is a thread:

at any rate, thanks. SOLVED A++++
Chris LabbateOwnerAuthor Commented:
Fast response and quickly resolved the issue in record time.
I think it will be total disaster as for example you might have multiple styles for same element "<p>" but because it placed different places different styles stated.
If you would take normalisation css file or so called css reset (to make same view across all browsers at the beginning)  and you will start building rules on top of reset, everything will be in conflict.
That's what CSS is meant to do, the C is for cascading.
There are no conflict but priorities or clashes.
Chris LabbateOwnerAuthor Commented:
Yes. Said the same thing in the thread. You bump into this stuff when you try and implement 3rd party things. To be honest, Im working on like 12 projects and I can't believe I missed something like, "try uploading the CSS file to the root" even though that wasn't the entire problem, I had to laugh at my self a little. ; )
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.