CODEWITHSUNDEEP
htmlcssinternet-explorer-8internet-explorer-7
Carrie Medine
Carrie Medine

Reputation: 13

IE8 and IE7 CSS issue with div and positioning

I need help figuring out why my div class="content" is not showing up right in IE7 & IE8 - looks great in IE9: http://kathykroening.com/

The content should have a dark background overlay but it doesn't seem to be coming through and the positioning isn't right either as the caption appears on the top it should be below.

Here is the HTML: 

    <body class="home page page-id-81 page-template-default">

    <div id="wrapper">

        <header>
            <div class="toph">
                <h1 class="logo"><a href="http://kathykroening.com">Kathy Kroening</a></h1><!-- /.logo -->
            </div>
            <div class="bottomh">
                <nav class="main">
<ul class="inner"><li id="menu-item-194" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-81 current_page_item menu-item-194"><a href="http://kathykroening.com/">Home</a></li>
<li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151"><a href="http://kathykroening.com/about-kathy/">About Kathy</a></li>
<li id="menu-item-152" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-152"><a href="http://kathykroening.com/experience/">Experience</a></li>
<li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="http://kathykroening.com/ideas/">Ideas</a></li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="http://kathykroening.com/open-house/">Open House</a></li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155"><a href="http://kathykroening.com/cabinetry/">Cabinetry</a></li>
</ul>
                </nav><!-- /.main -->
                <nav class="crumbs">
                </nav><!-- /.crumbs -->
            </div>
        </header><!-- /header -->

        <section id="container">
                <img src="http://kathykroening.com/wp-content/uploads/2012/11/homebg.jpg" alt="" class="pagebg">



        <div class="inner">
            <div class="content">

                <p>Before color, fabric and furnishing, there’s interior architectural design – the essential space planning that literally makes room for your ultimate vision.</p>

            </div>
        </div>

        <div class="caption">
            <h2>Interior Architectural Design</h2>
        </div><!-- /.caption -->
                </section><!-- /#container -->



    </div><!-- /#wrapper -->


</body>

Here is the CSS:

* { 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;}

Upvotes: 1

Views: 1264

Answers (2)

Ricardo Souza
Ricardo Souza

Reputation: 16456

Your first problem is that IE bellow 9 doesn't understand RGBA colors.

The workaround is to use filters for gradient background, but use the same color on both sides:

background-color: rgba(0, 0, 0, 0.75); /* R G B Alpha */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BF000000', EndColorStr='#BF000000'); /* Alpha R G B */

Notice that the filter takes the first 2 chars as the hexadecimal value for the alpha, between 00 and FF.

An easy way to get the desired value is to make some simple calculations:

alpha:
    range: 0 - 1
    value: 0.75

hexa:
    range: 00 - FF = 0 - 255
    value: 0.75 * 255 = 191 = BF

To get the hexadecimal value from a decimal, you can use the Windows calculator in programmer mode, some tool like Photoshop's color picker or any online converter tool (even Google can do that: https://www.google.com/?q=191+to+hex)

Your second problem is that IE below 9 doesn't support HTML 5 tags.

You can use some tools to help with this, like:

and so on...

I highly recommend the use of http://html5boilerplate.com/

Upvotes: 1

Jared
Jared

Reputation: 12524

Here are three things you can do to improve your situation.

1) Use normalize.css instead of * { margin:0; padding:0;} for a css reset. This will help add support for tags like section, article, header etc that were added in html5.

2) Use html5shiv This completes the support for the html5 elements that are unknown to ie8 and lower and will allow you to style them.

3) For rgba support in the lower IEs take a look at this article on cross browser rgba support

Add for good measure it looks like you are styling a wordpress theme, and I would suggest following their guidelines for formatting your css. Wordpress CSS Coding Standards

Upvotes: 1

Related Questions