Accessibility

CSS Advisor

CSS Problems-Images Not Showing Up on Webpages

by reeserman on September 28, 2011 Avg Rating Not yet rated   |   Log in to rate post.

Tagged with Safari 4 , images , Firefox 3.5 , Background

Problem

After uploading Dreamweaver CS5-built website and Style.CSS, webpages, pages do not display the images that are contained within the CSS file.

Solution

Should I remove images from CSS and just place them on all the pages individually?

Detailed description

I built a site using two templates in DW CS5. I copied and modified the CSS file. All looked great in DW, but after I uploaded the style.css file and the web pages, the images that are within the CSS files did not load on the web pages. I took the site down and looked at them again in DW, to my surprise, the (CSS) images did not load in DW as well. I thought it was a linking issue, but I've tried several variations of relinking with no success.

An example of the images that are not loading include "arrows" next to the nav buttons, a background gradiation on the right column, lines (or rules) between the columns, etc. Here is where you can view the webpages (however, I haven't loaded the "index.html" page yet - I took that down because I am keeping my friend's original site up until I figure out the problem): http://jdmbookkeepingservice.com/JDM_Bookkeeping_Services.html

Here is a copy of my style.css:

body {
        font-family: tahoma, helvetica, arial, sans-serif;
        font-size: 11px;
        text-align: center;
        background: #d3d2d1;
}

h3, p {
    font-size: 12px;
    margin: 1em 0.5em 0.5em 0.5em;
    font-family: tahoma, helvetica, arial, sans-serif;
    color: #666;
}

h8, p {
    font-size: 13px;
    margin: 1em 0.5em 0.5em 0.5em;
    font-family: tahoma, helvetica, arial, sans-serif;
    color: #666;
}

p {
    margin-top: 0.5em;
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 12px;
    color: #666;
}

img {
    border: 0;
    font-family: tahoma, helvetica, arial, sans-serif;
}

a {
    color: #96b731;
    text-decoration: none;
    font-family: tahoma, helvetica, arial, sans-serif;
}

#subright ul a {
    text-decoration: underline;
    font-family: tahoma, helvetica, arial, sans-serif;
}

#wrapper {
        margin: auto;
        text-align: left;
        width: 750px;
        background: white;
}

#wrapperi {
        padding: 0px 2px;
        background: url(images/dot.gif) 319px 0px repeat-y;
}

#wrapperj {
    background: url(images/dot.gif) 526px 0px repeat-y;
    font-family: tahoma, helvetica, arial, sans-serif;
}

#header, #search, #nav, #nav li, h2, #special, #special h3, #footnav,
#strategies li, #strategies ul {
    margin: 0;
    padding: 0;
    color: #0d8d97;
}

#header {
        background: #ffffff;
        border-bottom: 1px solid #fff;
        border-top: 2px solid #fff;
        margin-bottom: 1px;
}

.clear {
        clear: both;
        font-size: 1px;
        height: 5px;
        margin: 0 0 -4px 0;
}

#left {
        float: left;
        width: 310px;
}

#right {
        float: right;
        width: 421px;
}

#search {
        background: #eda135 url(images/search_icon.gif) 21px 14px no-repeat;
        border-bottom: 2px solid #004b83;
        padding: 8px 0px 8px 40px;
        margin-bottom: 4px;
}

#search .text {
        width: 180px;
}

#search .submit {
        background: #db8100;
        color: #e5e4e2;
        border: 1px solid #e5e4e2;
}

#nav {
        float: left;
        width: 123px;
        margin: 0;
        padding: 0;
}

#nav li {
        background: #91aa37 url(images/menu_green_arrow.gif) left center repeat-y;
        padding: 3px 0px 4px 26px;
        margin-bottom: 2px;
        margin-left: 0;
        list-style: none;
}

* html #nav li { /* IE 5.x hack */
        padding-left: 20px;
        padd\ing-left: 36px;
}

#nav a {
        color: #efeeed;
        text-decoration: none;
        font-weight: bold;
        font-family: tahoma, helvetica, arial, sans-serif;
        font-size: 11px;
}

#policies {
        float: right;
        width: 181px;
        border: 1px solid #70cbd2;
        margin: 0;
}

#policies h2 {
        background: #afbd21;
}

#policies ul {
    padding-left: 25px;
    padding-bottom: 1px;
    margin: 12px 0 1px 0;
    color: #666;
    font-size: 12px;
    font-weight: bold;
}

#policies li {
    list-style-image: url(images/bullet_dimond.gif);
    padding-bottom: 8px;
    padding-left: 0;
    margin-left: 0;
    font-family: tahoma, helvetica, arial, sans-serif;
}


#policies2 {
        float: right;
        width: 181px;
        border: 1px solid #70cbd2;
        margin: 0;
}

#policies2 h2 {
        background: #e63f1d;
}

#policies2 ul {
    padding-left: 25px;
    padding-bottom: 1px;
    margin: 12px 0 1px 0;
    color: #666;
    font-size: 12px;
    font-weight: bold;
}

#policies2 li {
    list-style-image: url(images/bullet_dimond.gif);
    padding-bottom: 8px;
    padding-left: 0;
    margin-left: 0;
    font-family: tahoma, helvetica, arial, sans-serif;
}
#news {
        background: #f5f4f3;
        padding-bottom: 0.5em;
        border-top: 4px solid #fff;
        color: #666;
}

#news h2 {
        background: #f6ba29;
}


#restore {
        margin-top: -1px;
        background: #fff url(images/right_bg.jpg) bottom right repeat-x;
        border-bottom: 6px solid #fff;
}

#restorei {
        background: url(images/jdm_bookkeeping_image1.jpg) bottom right no-repeat;
        padding-bottom: 11px;
}

#restoret {
        padding-bottom: 11px;
}


#restore ul {
    margin-top: 16px;
    margin-bottom: 8px;
    margin-left: 0;
    padding-left: 25px;
    color: #333;
}

#restore a {
    color: #96b731;
    text-decoration: underline;
    font-weight: bold;
    font-family: tahoma, helvetica, arial, sans-serif;
}

#restore li {
        list-style: none;
        background: url(images/bullet_arrow.gif) left center no-repeat;
        padding: 4px 0 4px 25px;
        margin-left: 0;
}

#restore .orange {
        color: #f09d27;
}

#restore .learnmore {
        margin: 5px 0 20px 18px;

}

#special {
        margin-left: 9px;
        margin-top: 10px;
        width: 187px;
        background: url(images/offer_box_bg.gif) repeat-y;
}
#special2 {
        margin-left: 9px;
        margin-top: 10px;
        width: 410px;
        background: url(images/offer_box_bg2.gif) repeat-y;
}

#special, #special a {
        color: #f5f5f5;
        text-decoration: none;
}

#special p {
    padding: 0 13px;
    font-family: tahoma, helvetica, arial, sans-serif;
    color: #666;
    font-weight: bold;
}

#special div {
        background: url(images/offer_box_bot.gif) bottom no-repeat;
        height: 6px;
        font-size: 1px;
}
#special div2 {
        background: url(images/offer_box_bot2.gif) bottom no-repeat;
        height: 6px;
        font-size: 1px;
}

#subright {
        margin-top: 0px;
}

#strategies {
        float: left;
        width: 195px;
}

#strategies h2 {
        background: #afbd21;
}

#strategies li {
        list-style: none;
        margin: 0.8em 0.5em;
}

#strategies2 {
        float: left;
        width: 295px;
}

#strategies2 h2 {
        background: #afbd21;
}

#strategies2 li {
        list-style: none;
        margin: 0.8em 0.5em;
}


#solutions {
    float: right;
    width: 210px;
    font-size: 13px;
    font-weight: bold;
    color: #999;
}

#solutions h2 {
        background: #70cbd2;
        width: 210px;
}

#solutions2 {
        float: left;
        width: 313px;
}

#solutions2 h2 {
        background: #70cbd2;
                width: 313px;
}

#footer {
        text-align: right;
        background: #b7b7b8;
        color: #666;
        border-top: 2px solid #fff;
}

* html #footer {
    height: 1.5em;
}

#footeri {
    padding: 2px 3px 4px 13px;
    border-bottom: 2px solid #fff;
    text-align: center;
}

#footer .copyright {
        float: left;
}

#footer a {
        color: #666;
}


.readmore {
        text-align: right;
        font-weight: bold;
}

.green {
    color: #6aa100;
    font-family: tahoma, helvetica, arial, sans-serif;
}
.blue {
        color: #4880ab;
}
.orange {
        color: #e0a403;
}

p.photo {
        text-align: center;
}

#callbox {
        float: left;
        clear: left;
        margin: 0;
}
#divider {
    color: #FFF;
    font-family: tahoma, helvetica, arial, sans-serif;
}
.divider {
    color: #FFF;
    font-family: tahoma, helvetica, arial, sans-serif;
}
#wrapper #wrapperi #wrapperj #left #news p strong {
    color: #0d8d97;
}
#wrapper #wrapperi #wrapperj #left #news p {
    font-style: normal;
}
#wrapper #wrapperi #wrapperj #left #news {
    font-size: 10px;
}
.emphasizedi {
    font-style: italic;
}
.emphasisb {
    font-weight: bold;
}
#wrapper #wrapperi #wrapperj #left #news .photo #divider2 {
    color: #FFF;
}
.h9 {
    font-size: 14px;
}
#wrapper #wrapperi #wrapperj #left #policies p {
    font-size: 9px;
}
#wrapper #wrapperi #wrapperj #left #policies p {
    font-size: 14px;
    font-weight: bold;
    color: #0d8d97;
}
#wrapper #wrapperi #wrapperj #left #policies {
    font-weight: normal;
}
#wrapper #wrapperi #wrapperj #left #policies {
    font-size: 12px;
}
#wrapper #wrapperi #wrapperj #left #policies {
    font-weight: bold;
}
#wrapper #wrapperi #wrapperj #left #policies {
    font-weight: bold;
}
#wrapper #wrapperi #wrapperj #left #policies {
    font-size: 11px;
}
#wrapper #wrapperi #wrapperj #left #policies p {
    font-size: 10px;
}
#wrapper #wrapperi #wrapperj #left #policies {
    font-size: 12px;
}
#wrapper #wrapperi #wrapperj #left #policies p {
    font-size: 12px;
}
#wrapper #wrapperi #wrapperj #left #news p {
    font-style: italic;
}
#wrapper #wrapperi #wrapperj #left #news p {
    font-style: normal;
}
#starting {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
    font-style: italic;
    color: #333;
}
#servicestext {
    font-size: 12px;
}
 

I am not really an expert in web design/building, I know just enough to cause trouble. But I can usually figure these things out. After several days, I have to admit I can't figure this issue out. I tried quotation marks around my images, but that didn't help. I tried single quote marks, again, no help. I tried being specific in directing the web page to look for the style.css page, again, no go.

Please, please help. I'm so confusing why this isn't working. Many thanks for much anticipated help.




Tagged with Safari 4 , images , Firefox 3.5 , Background

Tag it on del.icio.us or Digg

Text ID: 1212



Comments (1)

To add a comment, please Log in.




Same problem!!!!!

Hello mate, I have the same problem and wanted to know who you solved it because your site does not seem to have any problems.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)