Forums

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

<section class="slide-up-boxes">
<!-- <section> is an element of HTML5 -->

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.

treehouse : what would you like to learn today?

Forums

slide up boxes...images not appearing