0

I'm afraid my coding knowledge is very basic and I'm having trouble working on a website for a client. Basically I'm using a slideshow which I'm finding only works if I don't include < doctype ! html > for some reason.

I have also added captions, which works fine on chrome and firefox, however on IE they'll not show up at all unless doctype is there. However then the slideshow starts scrolling instead!

I'm trying to find a solution where I can get both an arrow controlled slideshow and captions that works on IE. My knowledge of jQuery is next to nothing. Please help!

Johannes Kuhn
  • 14,778
  • 4
  • 49
  • 73
Anoushka
  • 11
  • 3

2 Answers2

0

Did you download the file?

you shure you put this code?

figure {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 20px 20px 0;
}
figcaption {
  position: absolute;
  background: black;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  -webkit-transition: all 0.6s ease;<!--this is what make it works in safari/chrome-->
  -moz-transition:    all 0.6s ease;<!--this is what make it works in mozila-->
  -o-transition:      all 0.6s ease;<!--this is what make it works in opera-->
}
figure:hover figcaption {
  opacity: 1;
}
figure:before {
  content: "?";
  position: absolute;
  font-weight: 800;
  background: black;
  background: rgba(255,255,255,0.75);
  text-shadow: 0 0 5px white;
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;<!--this is what makes it works safari/chrome-->
  -moz-border-radius:    12px;<!--this is what make it works in mozila-->
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.75;
}
WaZZe
  • 1
  • 2
  • my coding is figure { display: inline-block; position: relative; overflow: hidden; } figcaption { position: absolute; background: rgba(0,20,40,0.60); color: white; padding: 10px 20px; } figcaption { position: absolute; background: rgba(0,20,40,0.60); color: white; padding: 10px 20px; opacity: 0; bottom: 0; left: -30; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } figure:hover figcaption { opacity: 1; left: 0; } – Anoushka Jul 11 '13 at 10:31
  • continued.. .cap-bot figcaption { left: 0; bottom: -30;} .cap-bot:hover figcaption { bottom: 0; } glancing over it it looks much the same, just I didn't include the question mark coding. – Anoushka Jul 11 '13 at 10:32
0

I FOUND THE PROBLEM All you need to do is put the css in the html page Like this

<head>
<style type="text/css">
all the css
</style>
</head>

<body>
your code
</body>

Normal, just with the css in the html page, im pretty shure that will work

WaZZe
  • 1
  • 2