3 replies [Last post]
wompninja
wompninja's picture
Offline
newbie
USA
Last seen: 3 years 40 weeks ago
USA
Timezone: GMT-7
Joined: 2010-10-12
Posts: 5
Points: 8

I'm building a site here and on the home page I have two tabs off to the right side that use javascript to switch the display property of two divs. This system all works fine and dandy in everything but IE of course... IE doesn't seem to recognize the z-index that each of the items is on and the main picture and text get shifted down when you click on one of the tabs. Can anyone help me resolve this problem?

Here's my CSS:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, del, dfn, em, font, img, ins, kbd, q, s, samp, acronym, address, big, cite, code,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;}caption, th, td {text-align:left;font-weight:normal;}table {border-collapse:separate;border-spacing:0;}blockquote:before,blockquote:after,q:before,q:after {content: "";}blockquote, q {quotes: "" "";}
{margin:0;padding:0;}
 
 
/*
Here is a list of all the <DIV>s in Whiteboard.
*/
 
#container{}
.post{}
.postmeta{}
.postnavigation{}
#searchform{}
#sidebar{}
#comments
.comments_navigation{}
.comments_navigation{}
.comments_reply{}
.comments_text{}
.comments_meta{}
 
/* GLOBAL STYLES */
 
@font-face {
    font-family: 'Frutiger45LightRegular';
    src: url('ftl_____-webfont.eot');
    src: local('☺'), url('ftl_____-webfont.woff') format('woff'), url('ftl_____-webfont.ttf') format('truetype'), url('ftl_____-webfont.svg#webfontYYyNKrX0') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body {
    background-color: #fff;
    background-image:url(images/bckgrd.jpg);
    background-repeat:repeat-x;
    background-attachment:fixed;
    font-family: "Frutiger-Light", san-serif;
    font-size-adjust: 0.51;
        font-size:12px;
}
 
a{
text-decoration:none;
color:#00b5cc;
}
 
 
#container {
width:820px;
margin:0 auto;
}
 
/* HEADER */
 
#header {
height:180px;
position:fixed;
top:0;
width:820px;
background-color: #fff;
background-image:url(images/bckgrd.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
font-family:Arial, helvetica, san-serif;
}
 
#logo {
float:left;
margin-top:23px;
margin-left:23px;
}
 
#secondarymenu {
padding:0;
margin:0;
margin-top:80px;
color:#fff;
font-family: arial, helvetica, sans-serif;
font-size:11px;
white-space:nowrap;
float:right;
list-style-type:none;
}
 
#secondarymenu li {display:inline;}
 
#secondarymenu li a {
padding-left:20px;
color:#A8A79A;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
float:left;
}
 
#secondarymenu li a:hover{
color:#00B5CC;
}
 
#secondarymenu li.current-menu-item a {
color:#00A94F;
}
 
#menu { list-style-type: none; height: 40px; padding: 0; margin: 0; float:right; margin-top:10px; margin-right:-15px;}
#menu li { float: left; position: relative; padding: 0; line-height: 25px; background: #fff; border-right: 2px dotted #a8a79a; -webkit-transition: all 0.2s; -moz-transform: all 0.2s; -o-transition: all 0.2s; z-index:100;}
#menu li:hover { background-position: 0 -40px; }
#menu li a { display: block; padding: 0 15px; color: #767662; text-decoration: none; -webkit-transition: all 0.5s; -moz-transform:all 0.5s; -o-transition: all 0.5s;}
#menu li a:hover { color: #00b5cc; }
#menu li ul { opacity: 0; position: absolute; left: 0; width: 13em; background: #63867f; list-style-type: none; padding: 0; margin: 0; -webkit-transition: all 1s; -moz-transform: all 1s; -o-transition: all 1s;}
#menu li:hover ul { opacity: 1; }
#menu li ul li { float: none; position: static; height: 0; line-height: 0; background: none; border-right:none; -webkit-transition: height 0.5s; -moz-transform: height 0.5s; -o-transition:height 0.5s;}
#menu li:hover ul li { height: 30px; line-height: 30px; border-bottom:2px dotted #fff;}
#menu li ul li a { background: #00B5CC; color:#fff !important;}
#menu li ul li a:hover { background: #00A4B6; color:#fff; }
 
#menu li.current-menu-item a { color: #00b5cc; }
#menu li ul li.current-menu-item a { color: #fff; }
.menu-item-13 a {border-right:none; padding-right:0px; color:#00A94F !important;}
#menu li:last-child {border-right:none;}
#menu li:last-child ul li a:hover{background: #54B948;}
#menu li:last-child ul li a{background: #00A94F;}
#menu li:hover ul li:last-child { border-bottom:none;}
 
/* Main Content */
 
#content {
    background-color: #fff;
    background-image:url(images/mainbckgrd.jpg);
    background-repeat:repeat-x;
       padding-left:25px;
    padding-top:20px;
    padding-bottom:30px;
    padding-right:65px;
        margin-top:180px;
}
 
#content h2 {
margin-bottom:5px !important;
font-family: 'Frutiger45LightRegular', sans-serif;
font-size-adjust: 0.51;
}
 
#content h2 a{
color:#00A94F;
font-size:40px;
font-family: 'Frutiger45LightRegular', sans-serif;
font-size-adjust: 0.51;
text-decoration:none;
}
 
#content h3{
color:#00B5CC;
font-size:22px;
font-family: 'Frutiger45LightRegular', sans-serif;
font-size-adjust: 0.51;
margin-bottom:15px;
}
 
#content p{
margin-bottom:35px;
color:#666666;
font-family: 'Frutiger45LightRegular', sans-serif;
font-size-adjust: 0.51;
}
 
#content ol {
margin-top:-25px;
}
 
#content ol li{
margin-bottom:10px;
margin-left:30px;
color:#666666;
font-family: 'Frutiger45LightRegular', sans-serif;
font-size-adjust: 0.51;
}
 
#homerotate {
height:300px;
margin-left:-25px;
}
 
#homefooter {
background:url(images/homefooter.png);
width:820px;
height:108px;
font-family: 'Frutiger45LightRegular', sans-serif;
font-size-adjust: 0.51;
}
 
#homefooter h3 a{
margin-top:5px;
margin-left:5px;
font-size:16px;
color:#F3EA00;
text-decoration:none;
line-height:22px;
}
 
#homefooter p{
margin-left:19px;
font-size:11px;
color:#FFF;
line-height:14px;
}
 
#works {
padding:10px;
padding-right:15px;
width:175px;
float:left;
}
 
#lifestyle {
padding:10px;
padding-right:15px;
margin-left:9px;
width:380px;
float:left;
}
 
#started {
padding:10px;
padding-right:15px;
width:172px;
margin-left:9px;
float:left;
}
 
#breadcrumb {
margin-bottom:20px;
}
 
#breadcrumb li {
display:inline;
padding-right:20px;
padding-bottom:15px;
font-size:10px;
font-weight:bold;
}
 
#breadcrumb li a{
text-decoration:none;
color:#AAA99B;
}
 
#breadcrumb li a:hover{
color:#00B5CC;
}
 
/* SIDEBUTTON POP UPS */
 
.success {
position:relative;
z-index:97;
}
 
.started {
position:relative;
z-index:99;
}
 
#sidebutton {
float:right;
margin-right:-43px;
width:43px;
}
 
#startedblock {
width:347px;
height:259px;
background:url(images/greenbox.png) no-repeat;
padding-left:30px;
padding-top:20px;
padding-right:35px;
padding-bottom:50px;
position:relative;
z-index:98;
float:right;
margin-right:-14px;
display:none;
color:#fff;
}
 
 
#startedblock h4{
color:#F3EA00;
font-size:16px;
}
 
#startedblock a{
color:#FFF;
}
 
#startedblock p{
padding-bottom:15px;
}
 
#successblock h4{
color:#F3EA00;
font-size:16px;
}
 
#successblock a{
color:#FFF;
}
 
#successblock p{
padding-bottom:15px;
}
 
#successblock {
width:347px;
height:259px;
background:url(images/bluebox.png) no-repeat;
padding-left:30px;
padding-top:20px;
padding-right:35px;
padding-bottom:50px;
position:relative;
z-index:96;
float:right;
margin-right:-14px;
display:none;
color:#fff;
}
 
/* Main Rotator */
/*
 * Color, Border, and Button Rules
 */
.contentslider {
  padding-left:30px; padding-right:30px; /* This acts as a border for the content slider */
  background:none; /* This is the color of said border */
}
.cs_wrapper, .cs_article {
  background:none; /* Background color for the entries */
}
.cs_leftBtn, .cs_rightBtn {
  width:30px; /* Should be as wide as the button graphic being used */
  background:none; /* This will probably match the contentslider bg color */
}
 
/*
 * Article styles (font, color, etc.)
 *
 * If textResize is set to TRUE, sizing shouldn't need to be touched. However,
 * depending on the sizes you have defined, additional tweaking may be
 * required in order to get the text to display properly.
 */
.cs_article h2 {
color:#00b5cc !important;
font-size:40px;
font-family: 'Frutiger45LightRegular', sans-serif;
font-size-adjust: 0.51;
text-decoration:none;
}
  .cs_article h2 a {
color:#00b5cc !important;
font-size:40px;
font-family: 'Frutiger45LightRegular', sans-serif;
font-size-adjust: 0.51;
text-decoration:none;
  }
.cs_article p {
font-family: 'Frutiger45LightRegular', sans-serif;
text-decoration:none;
font-size:12.5px !important;
font-size-adjust: 0.51;
line-height:18px;
}
.cs_article .readmore {
  font-size:80%;
color:#00A94F !important;
font-size:12px;
}
 
.cs_article .readmore a {
color:#00A94F !important;
}
 
.larger {
font-size:17px;
line-height:30px;
}
 
/*
 ******************************************************************************
 * These styles may be affected by the plugin, so avoid changing them if 
 * it's not absolutely necessary.
 ******************************************************************************
 */
.contentslider {
  position:relative;
  display:block;
  width:725px;
  height:300px;
  margin:0 auto;
  overflow:hidden;
  z-index:1;
}
.cs_wrapper {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
.cs_slider {
  position:absolute;
  width:10000px;
  height:100%;
  margin:0;
  padding:0;
}
.cs_article {
  float:left;
  position:relative;
  top:0;
  left:0;
  display:block;
  width:725px;
  height:300px;
  margin:0 auto;
  padding:0;
}
.cs_article h2 {
  display:block;
  width:315px;
  margin:10px 26px 5px 55%;
  text-align:left;
}
.cs_article img {
  float:left;
  position:absolute;
  top:0;
  left:0;
  width:365px;
  border:0;
  -ms-interpolation-mode:bicubic;
}
.cs_article p {
  display:block;
  width:315px;
  margin:0 26px 5px 55%;
  padding:0;
  border:0;
}
.cs_article .readmore {
  display:block;
  width:315px;
  margin:-20px 6% 1% 55%;
  text-align:left;
}
 
.cs_leftBtn, .cs_rightBtn {
  position:absolute;
  top:0;
  height:300px;
  padding:0px 0;
  z-index:90;
}
.cs_leftBtn {
  left:0;
  outline:0;
}
.cs_rightBtn {
  right:0;
  outline:0;
}
.cs_leftBtn img, .cs_rightBtn img {
  border:0;
  position:relative;
  top:140px;
  margin:0;
}
 
/* BLOG */
.postmeta{ 
border-bottom: dotted 1px #00B5CC;
margin-bottom:20px;
padding-bottom:0px;
}
 
.postmeta a{
text-decoration:none;
color:#00b5cc;
}
 
/* FOOTER */
 
#footer {
margin-top:33px;
margin-right:10px;
padding-bottom:50px;
}
 
#footer img {
    float:right;
}
 
#bottombar {
width:100%;
position:fixed;
bottom:0;
left:0;
hegiht:30px;
background-color:#666666;

Here's the Main Page code for page_home.php

<?php
/*
Template Name: Home Page
*/
?>
 
<?php get_header(); ?>
<div id="sidebutton">
<a href="#" onclick="toggle_visibility('successblock'); document.getElementById('startedblock').style.display='none'"><img src="<?php bloginfo('template_url'); ?>/images/successstories.png" class="success" /></a>
<a href="#" onclick="toggle_visibility('startedblock'); document.getElementById('successblock').style.display='none'"><img src="<?php bloginfo('template_url'); ?>/images/getstarted.png" class="started"/></a>
</div>
<div id="startedblock">
<h4>Congratulations!</h4>
<p>You are about to take the first steps in resetting your life to a healthy state. Body Reset will provide you with the tools and support to make this transition quick, effective and lasting.</p>
<a href="<?php bloginfo('url'); ?>/personaleval/"><img src="<?php bloginfo('template_url'); ?>/images/eval.png" style="margin-left:-15px; margin-top:-5px;" /></a>
<p>To get started, we recommend a “personal evaluation” to understand what your goals are and how to get there.</p>
<a href="<?php bloginfo('url'); ?>/store/"><img src="<?php bloginfo('template_url'); ?>/images/purchase.png" style="margin-left:-15px; margin-top:-5px;" /></a>
<p>If you know what you want, or have been here before. Click <a href="#">here</a> to purchase your supply of HCG drops.</p>
</div>
<div id="successblock">
<h4>With Body Reset, you are never alone.</h4>
<p>Once you start the Body Reset program, you will be part of the growing population that is experiencing real, lasting change with HCG.</p>
<p>Connect with the community of real life people who are sharing their experiences and helping others to transform their lives.</p>
<p><a href="<?php bloginfo('url'); ?>/greg-lori/">Greg & Lori,  Portland, OR</a></p>
<p><a href="<?php bloginfo('url'); ?>/gary/">Gary, Chicago, IL</a></p>
<p><a href="<?php bloginfo('url'); ?>/nicole/">Nicole, Chicago, IL</a></p>
<p><a href="<?php bloginfo('url'); ?>/bill-linda/">Bill & Linda, Lindon, UT</a></p>
</div>
<div id="content">
   <div id="homerotate" > 
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div id="one" class="contentslider">
            <div class="cs_wrapper">
                <div class="cs_slider">
 
                    <div class="cs_article">
                        <h2> <a href="#">Susan.</a> </h2>
                        <a href="#">
                            <img src="<?php bloginfo('template_url'); ?>/images/mainimage.png"
                                alt="Susan" />
                        </a>
                        <p>
                            <span class="larger">I have never really enjoyed exercise. </span><br/ >
And when I did exercise, I treated myself to some cheese fries and a chocolate milk shake.  I was having the hardest time controling my cravings and losing those extra pounds that I was carrying around.  With Body Reset, I lost an amazing 20 pounds in 30 days.  It seemed to come mainly off my trouble spots, so everybody is very surprised to hear it was only 20 pounds because it looks like so much more!
                        </p>
                        <a href="<?php the_permalink() ?>" class="readmore">> more</a>
                    </div><!-- End cs_article -->
 
                    <div class="cs_article">
                        <h2> <a href="#">Susan.</a> </h2>
                        <a href="#">
                            <img src="<?php bloginfo('template_url'); ?>/images/mainimage.png"
                                alt="Susan" />
                        </a>
                        <p>
                            <span class="larger">I have never really enjoyed exercise. </span><br/ >
And when I did exercise, I treated myself to some cheese fries and a chocolate milk shake.  I was having the hardest time controling my cravings and losing those extra pounds that I was carrying around.  With Body Reset, I lost an amazing 20 pounds in 30 days.  It seemed to come mainly off my trouble spots, so everybody is very surprised to hear it was only 20 pounds because it looks like so much more!
                        </p>
                        <a href="<?php the_permalink() ?>" class="readmore">> more</a>
                    </div><!-- End cs_article -->
 
                    <div class="cs_article">
                        <h2> <a href="#">Susan.</a> </h2>
                        <a href="#">
                            <img src="<?php bloginfo('template_url'); ?>/images/mainimage.png"
                                alt="Susan" />
                        </a>
                        <p>
                            <span class="larger">I have never really enjoyed exercise. </span><br/ >
And when I did exercise, I treated myself to some cheese fries and a chocolate milk shake.  I was having the hardest time controling my cravings and losing those extra pounds that I was carrying around.  With Body Reset, I lost an amazing 20 pounds in 30 days.  It seemed to come mainly off my trouble spots, so everybody is very surprised to hear it was only 20 pounds because it looks like so much more!
                        </p>
                        <a href="<?php the_permalink() ?>" class="readmore">> more</a>
                    </div><!-- End cs_article -->
 
                </div><!-- End cs_slider -->
            </div><!-- End cs_wrapper -->
        </div><!-- End contentslider -->
 
 
        <?php endwhile; else: ?>
        <p><strong>There has been a glitch in the Matrix.</strong><br />
        There is nothing to see here.</p>
        <p>Please try somewhere else.</p>
        <?php endif; ?>
   </div>
 
</div><!-- end #content-->
 
<div id="homefooter">
    <div id="works"><h3><a href="<?php bloginfo('url'); ?>/about/" >> how it works</a></h3><p>HCG is a kickstart to your ideal weight. Understand how it
works here.</p></div>
        <div id="lifestyle"><h3><a href="<?php bloginfo('url'); ?>/healthy-lifestyle/" >> healthy lifestyle</a></h3><p>Body Reset provides you with the tools you need for a healthy lifestyle.
Combined with a reduced calorie diet, healthy eating habits and a steady
metabolism, the results are quick, effective and lasting.</p></div>
    <div id="started"><h3><a href="<?php bloginfo('url'); ?>/get-started/" >> get started</a></h3><p>Start now to become part of the growing population that has experienced real change with the Body Reset program.</p></div>
</div>
 
 
        <!-- Site JavaScript -->
        <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.ennui.contentslider.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#one').ContentSlider({
                    width : '725px',
                    height : '300px',
                    speed : 800,
                    easing : 'easeInOutBack'
                });
            });
        </script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.chili-2.2.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/chili/recipes.js" type="text/javascript"></script>
 
 
<?php get_footer(); ?>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The shifting down isn't a

The shifting down isn't a z-index issue, its a float issue. IE doesn't feel there is enough room for the two items to be side by side, so it renders the later item after the earlier item.

Your page css seems overly complex making it difficult to figure out what is going on. For me the question isn't why IE moves the content down, but why the other browsers don't move the content down.

wompninja
wompninja's picture
Offline
newbie
USA
Last seen: 3 years 40 weeks ago
USA
Timezone: GMT-7
Joined: 2010-10-12
Posts: 5
Points: 8

Ok, any idea how to fix it?

Ok, any idea how to fix it? The items shouldn't be side to side they should be stacked one on top of the other. That's why all of the other browsers work.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I don't see a simple fix.

I don't see a simple fix. Redo the page, initially without your tabs and their content. Aim to eliminate the position used in the rest of the page and try to let elements flow naturally.

When the rest of the page is sorted out, add in your tabs and their content.