0

Hey all i am hoping someone could tell me what i need to change in order to get what i am currently seeing in IE9 to be the same when viewing in IE8.

This is what it looks like in IE9:

And this is what it looks like in IE8:

The CSS code for those two DIVS are:

body {
text-align:left;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
color:#6a7e8a;
background:#fff;
margin:0;
padding:0;
}

#logo span {
color:#fff;
padding-left:50px;
text-transform:none;
font-family:arial, sans-serif;
}

#logo span.header1 {
font-size:0.4em;
display:block;
top:0;
line-height:0.8em;
}

.logoheader h1 a {
text-decoration:none !important;
}

.logoheader {
top:22px;
left:0;
text-decoration:none !important;
border:none !important;
position:absolute;
color:#fff;
z-index:10;
}

.logoheader h1 {
border:none !important;
}


.logoheader2 {
    top:5px;
    left:398px;
    text-decoration:none !important;
    border:none !important;
    position:absolute;
    color:#fff;
    z-index:10;
    height: 144px;
    width: 521px;
}



#line {
    position:absolute;
    right:20px;
    top:5em;
    max-width:38em;
    padding:5px 0 2px 2px;
}

.main #maincolumn {
    padding-bottom:0 !important;
}

.item-page {
    padding-top:25px;
}

.contact h3 {
    font-size:30px;
    color:#144659;
}

img {
    border:none;
}

p {
    margin:8px 0;
}

em {
    font-weight:700;
}

#all {
    width:100%;
    height:100%;
    overflow:auto !important;
    left:0;
    top:0;
    min-width:1080px;
    margin:0 auto;
}

body,html {
    overflow:auto !important;
}

.main .all_bg {
    height:100%;
    z-index:1300;
}

#header form .button {
    font-weight:700;
    cursor:pointer;
    text-align:center;
    text-transform:uppercase;
    margin:0;
}

.main #header {
    position:absolute;
    top:50%;
    margin-top:-61px;
    left: -3px;
}

.main #head {
    background:none;
}

/* LINE!!! */
#header {
    width:100% !important;
    height:150px;
    text-align:left;
    background-color:#FFF;
    z-index:1300;
    position:relative;
    margin:0 auto 23px;
    border: 1px solid #CCC;
    filter:alpha(opacity=85);
    opacity: 0.85;
    -moz-opacity:0.85;
}

/* the center stuff */
#head {
    height:150px;
    text-align:left;
    position:relative;
    width:920px;
    margin:0 auto;
}

#header > #head > .main_menu > ul.menu {
    display:block;
    text-align:left;
    list-style-type:none;
    position:absolute;
    top:3px;
    right:0;
    z-index:1300;
    padding:0;
}

#header .main_menu ul.menu > li {
    list-style:none;
    border:none;
    float:left;
    position:relative;
    margin:0;
    padding:0 0 0 1px;
}

#header .main_menu ul.menu > li:first-child {
    background:none !important;
}

#header .main_menu a {
position:relative;
float:left;
overflow:hidden;
font-size:12px;
text-transform:uppercase;
text-decoration:none;
color:#fff;
width:109px;
text-align:center;
background:#0af;
padding:40px 0 33px;
}

#header .main_menu a:hover,#header .main_menu ul.menu > li.actives > a,#header .main_menu ul.menu > li.current > a {
background:#0a2034;
}

#header .main_menu ul.menu ul {
display:none;
top:91px;
position:absolute;
left:0;
background:#0af;
width:112px;
padding:0;
}

#header .main_menu ul.menu ul ul {
left:112px;
top:0;
background:#0af !important;
padding:0;
}

#header .main_menu ul.menu ul li,#header .main_menu ul.menu ul ul li {
display:block;
height:30px;
float:none !important;
position:relative !important;
line-height:30px;
width:106px !important;
border-bottom:1px solid #0ca4f1;
}

#header .main_menu ul.menu ul li.active,#header .main_menu ul.menu ul li:hover {
background-position:0 0 !important;
}

.main #content {
display:none;
margin:0 auto;
padding:0 0 17px;
}

#content {
width:960px;
position:relative;
overflow:hidden;
margin:0 auto 50px;
}

.clear {
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
}

.clearfix:after {
clear:both;
content:' ';
display:block;
font-size:0;
line-height:0;
visibility:hidden;
width:0;
height:0;
}

.clearfix {
display:block;
}

* html .clearfix {
height:1%;
}

h1#logo {
margin:0 !important;
padding:0 !important;
}

#bg {
position:fixed;
z-index:1;
overflow:hidden;
}

#bgimg {
display:none;
}

#preloader {
position:relative;
z-index:1350;
width:32px;
top:50%;
margin:-32px auto;
}

*,fieldset {
margin:0;
padding:0;
}

#header .main_menu ul.menu ul li a,#header .main_menu ul.menu ul ul li a {
display:block;
background:none;
text-align:center;
font-weight:400 !important;
line-height:30px;
height:30px;
font-size:10px;
width:112px !important;
color:#fff;
float:none !important;
padding:0 !important;
}

#header .main_menu ul.menu ul li a:hover,#header ul.menu ul li.actives a,#header ul.menu ul li.current a,#header .main_menu ul.menu ul ul li a:hover {
color:#fff;
font-weight:400 !important;
background:#0a2034;
}


button.GreyB {
  background-color: #bfbfbe;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c6c6c6), color-stop(100%, #a7a7a7));
  background-image: -webkit-linear-gradient(top, #c8c8c8, #a6a6a6);
  background-image: -moz-linear-gradient(top, #c8c8c8, #a6a6a6);
  background-image: -ms-linear-gradient(top, #c8c8c8, #a6a6a6);
  background-image: -o-linear-gradient(top, #c8c8c8, #a6a6a6);
  background-image: linear-gradient(top, #c8c8c8, #a6a6a6);
  border: 1px solid #a6a6a6;
  border-bottom: 1px solid #969795;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 0 #cbcbcb;
  -moz-box-shadow: inset 0 1px 0 0 #cbcbcb;
  box-shadow: inset 0 1px 0 0 #cbcbcb;
  color: #fff;
  font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 7px 0 8px 0;
  text-align: center;
  text-shadow: 0 -1px 0 #8b8b8a;
  width: 100px; 
  height: 30px;
  }
  button.GreyB:hover {
    background-color: #b4b5b4;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b4b4b3), color-stop(100%, #989998));
    background-image: -webkit-linear-gradient(top, #b3b3b3, #989898);
    background-image: -moz-linear-gradient(top, #b3b3b3, #989898);
    background-image: -ms-linear-gradient(top, #b3b3b3, #989898);
    background-image: -o-linear-gradient(top, #b3b3b3, #989898);
    background-image: linear-gradient(top, #b3b3b3, #989898);
    -webkit-box-shadow: inset 0 1px 0 0 #c1c1c0;
    -moz-box-shadow: inset 0 1px 0 0 #c1c1c0;
    box-shadow: inset 0 1px 0 0 #c1c1c0;
    cursor: pointer; }
  button.GreyB:active {
    border: 1px solid #979796;
    border-bottom: 1px solid #898a88;
    -webkit-box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px #8b8b8b, 0 1px 0 0 #eeeeee; }

.textBox {
    width: 200px;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    border: 1px solid #999;
    position:absolute;
    left: 1px;
    top: 48px;
    border: 3px solid #39a0c7;
    border-radius:15px;
    -moz-border-radius:15px;
    box-shadow: 2px 5px 5px #1b627b;
}

.textBoxVin {
    width: 110px;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    border: 1px solid #999;
    position:absolute;
    left: 90px;
    top: 48px;
    border: 3px solid #39a0c7;
    border-radius:15px;
    -moz-border-radius:15px;
    box-shadow: 2px 5px 5px #1b627b;
}

/* label 1 (left) pic */

.imgLabelPost 
{
    float: left;
    margin: 0px 0px 0px 0px;
    position: absolute;
    top: -25px;
    z-index: 1500;
}

.imgLabelPost img,
img.theLblButton
{
    float: left;
    background-color: #CCC;
    border: 1px solid #666;
    padding: 4px;
    z-index: 1600;
}

.imgLabelPost .lblCaption 
{
    background: url('../img/banner.png') no-repeat left bottom;
    bottom: 30px;
    color: #fff;
    left: -23px;
    padding: 8px 10px 18px 13px;
    position: absolute;
    z-index: 1700;
}


/* label 2 (right) pic */

.imgLabelPost2
{
    float: right;
    margin: 0px 0px 0px 0px;
    position: absolute;
    top: -25px;
    left: 230px;
    z-index: 1500;
}

/* so that image still floats and looks nice even if JS is turned off */
.imgLabelPost2 img,
img.theLblButton2
{
    float: left;
    background-color: #CCC;
    border: 1px solid #666;
    padding: 4px;
    z-index: 1600;
}

.imgLabelPost2 .lblCaption2 
{
    background: url('../img/banner.png') no-repeat left bottom;
    bottom: 30px;
    color: #fff;
    left: -23px;
    padding: 8px 10px 18px 13px;
    position: absolute;
    z-index: 1700;
}

HTML code

<div id="header">
    <div id="head">
        <div class="logoheader">
            <h1 id="logo">
                <img src="img/cssMainLogo.png" alt="" height="99" width="389">
            </h1>
        </div><!-- end logoheader -->
        <div class="main_menu">
            <div class="logoheader2" align="center"><br>
                <br>
                <div id="theContent">
                    <div class="imgLabelPost">
                        <div id="printableDRV">
                            <img src="aspPages/PFS.asp?PhotoId=31" title="DRV" class="theLblButton" height="210" width="210">
                        </div>
                        <div class="lblCaption">
                            <button class="GreyB" name="drvPrint" id="drvPrint">
                                <span style="color: rgb(0, 0, 0); font-size:12px; font-family:Arial, Helvetica, sans-serif;">Print DRV Label</span>
                            </button>
                        </div>
                    </div>
                    <div class="imgLabelPost2">
                        <div id="printablePAS">
                            <img src="aspPages/PFS.asp?PhotoId=32" title="PAS" class="theLblButton2" height="210" width="210">
                        </div>
                        <div class="lblCaption2">
                            <button class="GreyB" name="pasPrint" id="pasPrint">
                                <span style="color: rgb(0, 0, 0); font-size:12px; font-family:Arial, Helvetica, sans-serif;">Print PAS Label</span>
                            </button>
                        </div>
                    </div><!-- end imgLabelPost2-->
                </div><!-- end theContent -->
            </div><!-- end logoheader -->
        </div><!--end main menu-->
    </div><!--end head-->
</div><!--end header-->

Any help would be great!

David

4
  • Looks like some z-index issues going on. Your css is a bit of a mess. Why everything position absolute? Plus you have a style where you first float the element and then position absolute. Makes no sense...
    – elclanrs
    Mar 7, 2012 at 8:59
  • need to see some html code to see what the layout is.
    – kolin
    Mar 7, 2012 at 9:09
  • @StealthRT Need to see the css for your header #header and container #theContent to properly diagnose the problem, but try this just to double check: #theContent, #header { position:relative; z-index:1; } Mar 7, 2012 at 14:56
  • @StealthRT created a jsfiddle with the information you provided and still can't see the offending divs. Can you modify it to display your full layout so we can take a look? jsfiddle.net/79Qyr Mar 8, 2012 at 10:56

3 Answers 3

0

there are some possibilities coming up with this problem:

1) make your container of this cut off elements overflow: auto;

2) maybe your container missing some needed information like the "hasLayout" problem... simpy fix it by giving this container zoom: 1;

3) your container has a fixed height (by margin, paddings or height for example) and overflow: hidden; you should take out the overflow hidden then.

2
  • What would you be called "container"?
    – StealthRT
    Mar 8, 2012 at 5:12
  • i would say #header seems to be the overall container, then followed by #head
    – kolin
    Mar 8, 2012 at 9:44
0

Taking position:relative out of #head and #header seems to 'fix' your

/* LINE!!! */
#header {

and

/* the center stuff */
#head {

as far as I can see.

the best thing to possibly do is to add an IE conditional stylesheet to your code to deal with IE versions

<!--[if IE 8]>
    <link type="text/css" rel="stylesheet" media="all" href="ie8.css" />
<![endif]-->

from a personal viewpoint, the html and css looks confusing, i personally, would consider rewriting the html/css to make it do the same thing, but with less code.

1
  • I made those 2 changes and all it did was just shifted everything to the left. Still chopped off the squares.
    – StealthRT
    Mar 8, 2012 at 10:03
0

IE8 has some issues with width and height in % so try this: Use specific styling for IE8.

<!--[if lt IE 9]>

    <style>
        #image_id{
                min-height:(some value in px);
                min-width:(some value in px);
                zoom:0.8;(some value less than 1 to make the image fit)
            }
    </style>

<![endif]-->

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.