treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] html5shim/v

  • So while on a friends machine, I loaded the page I was working with, http://people.ysu.edu/~jtpenezich, on IE8, using the shim/v it wont load any of the html5 containers correctly. Any ideas? Also,http://browsershots.org (a website to test sites for ie) shows it the same way. Also nearly positive javascript was turned on.
  • You don't even need the shiv - you're not using any of the new html5 elements.

    For me, it's showing everything fine except for the background and box shadows. The box shadows you can forget about and you need a background fallback (or separate stylesheet) for IE

    edit// it appears you have a fallback background image (why not just a color?) but it has a bad url
  • Yeah, I switched them all to normal divs from header/section/nav/footer/aside. Because the shiv never worked.
  • @Jeager Did you set all HTML5 elements to display: block? You still need to do that manually, even when using the shim.
  • Yeah, I had the reset up. And now that I set them all to divs, it still isnt loading properly in IE6-8. But works normally in everything else, even FF 3.6.
  • did you see where I pointed out that you have bad urls in the background image rules?
  • Im not seeing the bad url. Also, I have it as a graphic rather then a solid color to be able to have the transparency regardless of browser. Also, just did a validate, besides the image not having alt tag, it checks out.

    Edit: The only background descrepency I saw was with a background-position: whatever; while declaring a background: rgba(); --- Not sure if it would take both into account, but I fixed that, however wouldnt change the problem im having in IE 6 with the shim. However, the background was messing up as well, and I declared a filter for IE
    body {
    line-height: 1;
    font-size:62.5%;
    background:#5cbc04;
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#5cbc04);
    zoom: 1;
    background:url(../images/background_gradient.png) repeat-x #5cbc04;
    font-family: Arial, Helvetica, sans-serif;
    }


    And after some more messing around after my meeting with the client, she wanted the content box to be more centered. Works in every browser except IE5-6, which the right column, with the map, gets pushed down.

    Edit2 ::: Found it. % =/= good. I fixed it then forgot to ftp it onto the site, thinking I didn't find the problem. But works now, However there's just the one issue of the weird gradient, is the fallback correct? Seems to work fine, just wondering if its semantic. Also the right column with the map being pushed down. Seems to be the only problems left.
  • You really don't need to worry about IE5/6.
  • I'm going to guess the shim/v wasn't working due to the background error. But whats the likely hood of someone having java off, or updated. If the user is using a crappy browser, wouldn't they more then likely not even know what javascript is? So im wondering if I should return all my divs to html5 or just keep them there. Or will the reset to display:block be enough to render them correctly anyways.
  • I'd say go ahead with the shiv and new elements. If it still doesn't work, there's another problem to sort out, but it should work.
  • I second that.
  • Roger that. I'll reset them and if the new elements work with the shiv i'll mark as solved. Im pretty sure it was only the background problem as wolf pointed out though.

    Edit: Yup, solved.