slide up boxes…images not appearing

[plainyjane]

Hi, I have just put the slide up boxes into a site. Everything works fine in the browsers, testing through Dreamweaver, but when the site goes live the images that should appear on rollover, disappear. Does anyone have any ideas why this might be happening?

[chrisburton]

No one can help unless you provide a link or code, preferably a link. Post back

[plainyjane]

Thanks, http://www.janebdesign.co.uk

[chrisburton]

Were you trying to add HTML5 features?

[plainyjane]

I was using the CSS3 transitions, slide up boxes, on this site

[plainyjane]

In the boxes on hover the boxes included images for flickr, facebook and twitter, but they are not appearing.

[chrisburton]

Right, but you are using

Your doctype shows xhtml…

Also, what browser is this not appearing in specifically?

[plainyjane]

Safari and Firefox.

.slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #EBAC8B url(images/flickr-2.png) 4px 4px no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/facebook.png) 4px 4px no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(3) div { background: #9A8F9A url(images/twitter.png) 4px 4px no-repeat; padding-left: 120px; }
a:link {

These are the images that aren’t appearing.

[chrisburton]

Try this:

.slide-up-boxes a:nth-child(1) div { background: #EBAC8B url(/images/flickr-2.png) 4px 4px no-repeat; padding-left: 120px; }

.slide-up-boxes a:nth-child(2) div { background: #367db2 url(/images/facebook.png) 4px 4px no-repeat; padding-left: 120px; }

.slide-up-boxes a:nth-child(3) div { background: #9A8F9A url(/images/twitter.png) 4px 4px no-repeat; padding-left: 120px; }

You still need to fix the rest of your code

[plainyjane]

I did try that. It hasn’t made a difference. I’m sorry I don’t really understand why it would. I have only been designing web sites for about 5 months so I don’t know what you mean by fixing the rest of the code.
Thanks for trying to help!

[chrisburton]

You have 19 Errors.

You have an XHTML Doctype but are using HTML5 elements in some cases. Try fixing those errors before implementing the sliding boxes.

*I tried going to the image by URL with no luck* Check to see if your images are in the right place.

[ruff]

…Maybe it’s a paths issue?
../images/facebook.png – or even ../../images/facebook.png to go up one or two levels

[Paulie_D]

@ChristopherBurton nailed most of the issues but that’s just the start.

The images are appearing with Chrome (Webkit) but it’s causing all sorts of other errors.

You seem to be using a lot of empty paragraph tags for some reason plus there are some strange declarations in your ‘head’ along with a lot of other weird things.

[argo]

Put “../” in front of images/facebook.png and is working fine.

[Author]

Posts