Grow your CSS skills. Land your dream job.

Help IE8 doesn’t render my css correctly

  • # December 8, 2012 at 12:59 pm

    Hello,

    I am hoping someone can help me out here – my webpage: http://www.kathykroening.com

    Is not rendering correctly in IE8 or IE7 and I cannot figure out why here is the CSS:

    header, nav, article, footer, address {
    display: block;
    }
    * { margin: 0; padding: 0;}
    html { height: 100%; overflow: auto;}
    body { font-family: ‘Questrial’, sans-serif; font-size: 12/13px; line-height: 115%; }
    a { text-decoration: none; outline: none !important;}

    .alignleft { float: left;}
    .alignright { float: right;}

    #wrapper { width: 1024px; margin: 0 auto; position: relative; display: block;}
    .inner { width: 900px; margin: 0 auto; position: relative; }

    header { height: 215px; overflow: hidden;}
    .toph { height: 150px; line-height: 150px; text-align: center;}
    .logo a { display: inline-block; width: 360px; height: 96px; background: url(‘assets/img/logo.png’) no-repeat; text-indent: -9999px; position: relative; line-height: 96px;}
    .bottomh { height: 65px;}
    header ul { list-style: none;}
    header nav { clear: both; display: inline-block; width: 100%; position: relative;}
    header nav li { float: left;}
    header nav li a { text-transform: uppercase; font-size: 14px; }
    nav.main { height: 35px; background: url(‘assets/img/mainnavbg.jpg’) no-repeat; line-height: 35px;}
    nav.main li { padding: 0 45px;}
    nav li.first { padding-left: 0 !important; border-left: 0 !important;}
    nav li.last { padding-right: 0 !important; border-right: 0 !important;}
    nav.main li.last { float: right;}
    nav.main a { color: #fff;}
    nav.main a:hover,
    nav.main li.current_page_item a,
    nav.main li.current-page-ancestor a { border-bottom: 1px solid #fff; padding-bottom: 3px;}
    nav.crumbs a { color: #726658; font-size: 13px;}
    nav.crumbs ul { height: 13px; line-height: 13px; padding: 3px 0;}
    nav.crumbs a:hover,
    nav.crumbs li.current_page_item a { color: #90492d;}
    nav.crumbs li { padding: 0 10px; border-right: 1px solid #e1dedb; border-left: 1px solid #716558;}

    footer { margin-top: 5px; height: 30px; line-height: 30px; clear: both; font-size: 12px; color: #797979; }

    section#container { height: 550px; position: relative; display: block;}
    .pagebg { position: absolute; z-index: 1; }
    .pagebg.block { right: 45px;}
    .content { z-index: 999; position: absolute; left: -50px; width: 250px; height: 470px; background: rgba(0,0,0,0.8); color: #fff; padding: 40px 35px;}
    .scroller { height: 500px; overflow: auto; width: 250px;}
    .content.block { background: #262223;}
    .content h2 { font-weight: 100; text-transform: uppercase; font-size: 21px; margin-bottom: 10px;}
    .content h3 { text-transform: uppercase; font-size: 15px; font-weight: 100; padding: 3px 5px; background: #58595b; display: inline-block; margin-bottom: 10px;}
    .content p { font-size: 14px; padding-bottom: 10px; }
    .content a { color: inherit; text-decoration: underline; }
    .content ul { list-style-position: inside;}

    body.home .content p { font-size: 19px; line-height: 150%;}
    .caption { background: rgba(255,255,255,.8); padding: 10px 5px; position: absolute; bottom: 20px; width: 100%; text-transform: uppercase; z-index: 9999;}
    .caption h2 { width: 875px; margin: 0 auto; font-size: 17px; letter-spacing: 20px; font-weight: 100;}

    # December 8, 2012 at 1:42 pm

    Can you define what you mean by ‘not rendering correctly’ ….?

    RGBa is not supported by IE below IE9. http://css-tricks.com/rgba-browser-support/

    I’m also not familiar with ‘Questrial’ as a font…is that a non-standard fornt?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".