Home : Forums : ELATED.com Site Help : IE support for HTML5 elements.

IE support for HTML5 elements.

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register
10-Oct-10 00:27
DeleteDelete EditEdit
knotdnot knotdnot's avatar Rank: none
No stars yet
Posts: 3
Hello. I have a question about making HTML5 elements work in IE browsers. I am trying the very helpful and much appreciated Smooth Fading Image Captions with Pure CSS3 tutorial from this very site. Yay!! Anyway, everything seems to work fine except for the fact that I can't get it to work in Internet Explorer. The figure caption and heading display below my image. And my figure (and figure caption) are not where I positioned them. In Firefox, they are positioned in the middle of my page. In Internet Explorer they are displaying on the far left side. Gahh! Any help would be great. Thanks.
10-Oct-10 20:31
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
Hi knotdnot, welcome to Elated!

We'll need to see the page with the problem - can you upload it somewhere and post the URL?

Thanks
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
11-Oct-10 02:32
DeleteDelete EditEdit
knotdnot knotdnot's avatar Rank: none
No stars yet
Posts: 3
Hi Matt!

Nice to be here.

Here is the url:

www.cabinetsdeart.com/personal portfolio/pages/fullpagead.html

Thank you so much.

ps: sorry for the broken link, you actually need to type in the whole address in order for you to see it. Thanks again.

[Edited by knotdnot on 11-Oct-10 02:37]
12-Oct-10 00:48
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
Hmm, the figures are in the right place for me (in IE7/8). They don't have the semitransparent grey background - that might be because you have a space between progId: and DXImageTransform :


#wrapper #bits figure:hover figcaption{
  opacity: 1;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#aa000000,endColorstr=#aa000000);
}


Try:


#wrapper #bits figure:hover figcaption{
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#aa000000,endColorstr=#aa000000);
}


--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
12-Oct-10 20:45
DeleteDelete EditEdit
knotdnot knotdnot's avatar Rank: none
No stars yet
Posts: 3
Thank you Matt! Much appreciated. Will try that.

Quick question for you please and thank you:

Do you know of a useful tool that allows you to see if your site fully functions i.e., the transparent background for the figure:hover figcaption in various browsers such as IE 7/8? I don't think Adobe's Browserlab lets you.

Thank you!
13-Oct-10 20:10
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@knotdnot: A great free automated browser tester is http://browsershots.org/ . However this won't work for hover states (for obvious reasons).

You could of course just change your CSS temporarily to emulate the hover state, then run it through http://browsershots.org/ .

Generally though, there's no substitute for actually having the browsers to hand for testing! I run VMware Fusion on my Mac with 2 Windows VMs which gives me access to IE6/7/8 (and all Mac browsers of course).

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
 
New posts
Old posts

Follow Elated