Why are CSS background images for divs missing in browser previews even when the images exist?

Question

I'm trying to set up a vertical navigation bar with CSS using Dreamweaver CS6, but I'm very new to CSS and had been away from Dreamweaver from version 3 until recently. I have separate classes for the top, middle, and bottom images in this nav bar. I've made the entire divs for each button be a link, using this technique.

The middle buttons display just fine in design view, live mode, and the browser preview. But the top and bottom buttons are only showing up in design view. The hover and active states work fine for all buttons. I've checked and double-checked all of the file paths, cleared Dreamweaver's cache, and restarted Dreamweaver.

Why would this happen? How can I fix it?

Here's the related source code. I'm using the 12-column 960 grid system.

<!-- This is inside a container_12 div with the site's header/navigation, then a clear, then an <h3> -->
<div class="container_12">
    <!-- Header with site's logo and navigation goes here -->

    <div class="clear"></div>

    <h3>Page header</h3>

    <div class="grid_9 prefix_2 suffix_1">
        <!-- Several paragraphs of copy using <p> tags -->

        <div class="homePageVerticalButtonTop">
            <div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div>
        </div>
        <div class="homePageVerticalButtonMiddle">
            <div class="verticalNavigationText"><a style="display:block" href="middle1.html">middle link 1</a></div>
        </div>
        <!-- Several more middle links -->
        <div class="homePageVerticalButtonBottom">
            <div class="verticalNavigationText"><a style="display:block" href="bottom.html">bottom link</a></div>
        </div>
    </div>
</div> <!-- end container_12 -->

Here's the relevant CSS:

.homePageVerticalButtonTop {
    /* Why is the background not showing up? */
    background: url(../images/homePageTopButton_normal.png) no-repeat left top;

    width: 24.125em;
    height: 4.125em;
    background-size: 100%;

    display: block;
}

.homePageVerticalButtonTop:hover {
    /* This works fine */
    background: url(../images/homePageTopButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonTop:active {
    /* So does this */
    background: url(../images/homePageTopButton_mouseDown.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle {
    /* And so does the rest of these even though homePageVerticalButtonMiddle and homePageVerticalButtonTop are analogous cases and both PNGs are there. */
    background: url(../images/homePageMiddleButton_normal.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle:hover {
    background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

.homePageVerticalButtonMiddle:active {
    background: url(../images/homePageMiddleButton_mouseOver.png) no-repeat left top;
    width: 24.125em;
    height: 4.125em;
    background-size: 100%;
}

/* Bottom omitted for brevity, but it's analogous to Top and only works on the hover and active states too. */

.verticalNavigationText {
    color: #FFFFFF;
    font-family: inherit;
    font-size: 1.75em;
    padding: 0.59375em 0 0.59375em 0.625em;
}

Edit: Please keep answers on topic, addressing why these images would be missing.

I would never trust the browser preview in Dreamweaver to actually reflect how things will look on a real web site. — Mike Brant, Jul 26 '12 at 20:20
@MikeBrant: By the browser preview in Dreamweaver, do you mean the Live mode (in CS6) or the preview that I view from Chrome/Firefox/IE? — David, Jul 27 '12 at 00:04

score 3 · Answer 1 · answered Jul 26 '12 at 20:25

3

Dreamweaver should never be trusted for previews and its own behaviour is irrelevant because everyone else will be using a browser. That being said, your design patterns need a bit of attention.

<div class="homePageVerticalButtonTop">
    <div class="verticalNavigationText"><a style="display:block" href="top.html">top link</a></div>
</div>

Can be more clearly expressed as:

<div class="homePageVerticalButtonTop">
  <a href="top.html">top link</a>
</div>

The CSS you'd apply to the link can then be expressed as:

.homePageVerticalButtonTop a {
     display:block
}

...and other other styling for your link should be put in there, such as the styles applied to the redundant "verticalNavigationText" div. Avoid inline CSS.

answered Jul 26 '12 at 20:25

Diodeus - James MacFarlane

112,730
33
157
176

-1 for now: Thanks, but this doesn't really address the OP. Why do I always see the background image in homePageVerticalButtonMiddle but never in homePageVerticalButtonTop unless the link is in hover or active state - when the code is the same except for the file name and both files are there? I don't expect my markup to be perfect since this is the first time I have ever hand-coded CSS and I'm not a web developer. – David Jul 27 '12 at 00:09
I don't expect your mark-up to be perfect either. There are tried-and-true ways of doing certain things and I am trying to illustrate how. Don't take offense. – Diodeus - James MacFarlane Jul 27 '12 at 13:33

Why are CSS background images for divs missing in browser previews even when the images exist?

1 Answers1