CODEWITHSUNDEEP
css
Tara
Tara

Reputation: 1598

Problem Getting '<blockquote>' IMGs to Show

On this page you can see a quote in a pink box. It's supposed to have quote mark images to the right and left of it.

This is the CSS:

blockquote {
    padding-left: 10px;
    color:#444;
    font-style: normal;
    background: #ff9999 url(quoleft.png) left top no-repeat;
}
blockquote div {
    padding: 0 48px;
    background: #ff9999 url(gu.png) right bottom no-repeat;
}

Would anyone be able to tell me why the images to the left and right of the quote are not showing?

Thanks in advance! Tara

P.S.:I haven't actually designed the quote mark images yet but I'm using alternative images and they should show in their place.

Upvotes: 0

Views: 195

Answers (4)

Eric
Eric

Reputation: 97681

Upvotes: 1

chromedude
chromedude

Reputation: 4302

The images are not located where you are saying they are. When you say url(quoleft.png) that refers to the directory you are currently in (http://www.glamourunderground.com/organic-networking-the-5-point-guide/). You are saying that that image is located at http://www.glamourunderground.com/organic-networking-the-5-point-guide/quoleft.png and it obviously is not.

Upvotes: 1

alex
alex

Reputation: 490617

The image you are trying to reference does not exist.

Upvotes: 1

Pekka
Pekka

Reputation: 449783

The image doesn't seem to exist.

Here's how to debug stuff like this:

In Google Chrome

  1. Right-click the element and choose "Inspect element"
  2. A small window will appear, showing the full structure of the HTML document
  3. Click on the blockquote element

  4. The list to the right will show all CSS styles that apply to the element. It's a bit hidden, but you will find the background rule that you specified. The image link will be underlined.

    http://fhc.quickmediasolutions.com/image/-1485353823.png

  5. Right-click the image link, and select "Open in new window". A 404 page will pop up.

It works similar in all browsers; if you use Firefox, make sure you have the Firebug extension.

Upvotes: 4

Related Questions