2 replies [Last post]
cmedine's picture
Last seen: 9 years 35 weeks ago
Timezone: GMT-6
Joined: 2012-12-08
Posts: 2
Points: 3

Please help I can't understand why the content div isn't showing in IE8 here is the code:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<meta charset="UTF-8" />
<title>Kathy Kroening</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://kathykroening.com/wp-content/themes/kathykroening/style.css" />
<link rel="pingback" href="http://kathykroening.com/xmlrpc.php" />
<link rel="icon" type="image/png" href="http://kathykroening.com/wp-content/themes/kathykroening/favicon.png" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel='stylesheet' id='jquery.lightPin-css'  href='http://kathykroening.com/wp-content/plugins/pinterest-lightbox/stylesheets/jquery.pinterest-lightbox.css?ver=2.03' type='text/css' media='all' />
<link rel='stylesheet' id='NextGEN-css'  href='http://kathykroening.com/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
<script type='text/javascript' src='http://kathykroening.com/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
<script type='text/javascript' src='http://kathykroening.com/wp-content/plugins/pinterest-lightbox/javascript/jquery.pinterest-lightbox.js?ver=2.03'></script>
<script type='text/javascript' src='http://kathykroening.com/wp-includes/js/comment-reply.js?ver=3.4.2'></script>
<script type='text/javascript' src='http://kathykroening.com/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
<script type='text/javascript' src='http://kathykroening.com/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
<link rel='canonical' href='http://kathykroening.com/' />
<!-- <meta name="NextGEN" version="1.9.7" /> -->
<script type="text/javascript">
	    var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"], a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
    $("nav li:first-child").addClass("first");
    $("nav li:last-child").addClass("last");
	    return false;
<body class="home page page-id-81 page-template-default logged-in">
	<div id="wrapper">
			<div class="toph">
				<h1 class="logo"><a href="http://kathykroening.com">Kathy Kroening</a></h1><!-- /.logo -->
			<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>
				</nav><!-- /.main -->
				<nav class="crumbs">
				</nav><!-- /.crumbs -->
		</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 class="caption">
			<h2>Interior Architectural Design</h2>
		</div><!-- /.caption -->
				</section><!-- /#container -->
	</div><!-- /#wrapper -->

and the CSS:

@import url('assets/fonts/fonts.css');
@import url('http://fonts.googleapis.com/css?family=Questrial');
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;}

cmedine's picture
Last seen: 9 years 35 weeks ago
Timezone: GMT-6
Joined: 2012-12-08
Posts: 2
Points: 3

Here is the url:

Here is the url: http://kathykroening.com/

gary.turner's picture
Last seen: 1 year 23 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not positive

You're using html5 elements, which IEs<9 don't grok. Since IE8 doesn't know these elements, it ignores them.

The v.8 DOM shows, for example,


<section />This may or may not be the source of your woes.

There are javascripts available to cause old IEs to act as if they know html5. If you're expected to support IE8 (and Google, for one, will drop IE8 when IE10 is released), simply don't use html5 elements. There are not enough benefits for a site like this to justify the hassle.

BTW, a width of 1024px on the wrapper and the big image is causing a horizontal overflow in a 1024px browser window. After allowance for chrome and scrollbar, a more sane width is 980px.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.