Take the 2-minute tour ×


If you click on the Canucks image(this third icon underneath "information architecture and usability") no image is displaying beside the text even though an image is entered via HTML. This image displays unless wrapped within a div. It is required that I have a div wrapped around it as it is supposed to be a slideshow.

Is there any way to fix this, or is there anyway to build a slideshow that does not require a div?


<div id="canucksdisplay">
            <button class="closeButton">X</button>
        <br><class id="blueText">You are viewing: Canucks Usability Tests</class><br>Role: Usability Testing<br><br>The Vancouver Canucks is one of Canada's biggest sports teams, with a very strong and avid community. A lot of their community use their website to interact with each other about recent trades, rumours, and debates. 
        I was tasked with testing the usablity of Canucks.NHL.com's community features and social features. This involved in analyzing Canucks' target user and thinking of the potential downfalls the user may have while navigating the website and recording a test participant doing so. These tests ended up being successful in pointing out the uncovered flaws.</p>
        <div id="slideshowContainer">
            <div class="slideshow">
        <img src="images/work/canucks1.png">
        <img src="images/work/canucks2.png">
        <img src="images/work/canucks3.png">
    <ul id="nav">
        <li id="previous"><a href="#">Previous</a></li>
        <li id="next"><a href="#">Next</a></li>


#displays div {
    background-image: url(../images/linedpaper.png);
    border: 1px dashed black;
    display: none;
    height: 675px;
    overflow: hidden;
#displays div p {
    display: inline-block;
    text-align: left;
    width: 35%;
    height: 550px;
    left: 0 !important;
    color: black;
    margin-left: 10%;
#displays div img {
    width: 30%;
    display: inline-block;
    border: 1px dashed black;
    margin: 20px 0 0 10%;

#displayedwork {
    margin-top: -20px;
#displayedwork img {
    width: 500px;
    display: inline-block;
    left: 0 !important;
    margin-right: 449px;


    $(document).ready(function() {

        fx: 'fade',
    pause: 1,
    prev: '#prev',
    next: '#next'

share|improve this question
It seems to be showing now. –  Starx May 26 '13 at 7:12
which OS/browser are you using? This has not worked for me on any browser on my Mac and it did not work on my iPhone. –  user2376526 May 26 '13 at 7:15
It would be better if you posted your HTML and JS here, rather than linking to an external site, and stripped it down to a minimal example that demonstrates the problem. I don't see a Canucks image, the third icon says "Contact information". –  Barmar May 26 '13 at 7:17
Found it under "Information Architecture & Usability", not "Development". –  Barmar May 26 '13 at 7:19
yes. Sorry about that, I have posted the corresponding code. –  user2376526 May 26 '13 at 7:21
show 5 more comments

2 Answers

Currently when you are adding the div its display is being set tonone` some how.

So when you are adding the div set its display to 'inline' or inline-block.

share|improve this answer
add comment

There is a JS error in the console "Uncaught TypeError: Cannot read property 'msie' of undefined" which could possibly be the reason for JS not working as expected in the page.

$.browser was removed from jQuery version 1.9. And I see you are using jQuery version - 1.10.0. If you still need it, it is available as plugin(https://github.com/gabceb/jquery-browser-plugin).

share|improve this answer
add comment

Your Answer


