IE Positioning Issue

Question

I'm coming to the end of a new web project for my father's website, however after opening it in IE, I now want to jump off a bridge!

I have attached two screenshots of how the site is rendering in IE in comparison to any other browser. For some strange reason, it is pushing the page content underneath the slider.

In IE it renders like this: http://cl.ly/JVgZ

In other browsers is renders as expected, like this: http://cl.ly/JVgo

(Sorry, newbie so I can't post images directly -.-)

As you can see, the whole of the dark grey text area is hidden beneath the slider.

I'm assuming this is CSS related, and my code for the slider is as follows:

body { }
.panel h2.title { }
/* Most common stuff you'll need to change */

.coda-slider-wrapper { }
.coda-slider {  padding-bottom: 0px;  padding-top: 0px;  background-color: #262626;  }

/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { overflow: auto !important; }

/* Change the width of the entire slider (without dynamic arrows) */
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 1280px }

/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { }

/* Tab nav */
.coda-nav ul li a.current { 
color: white;
height: 60px; 
z-index: 9999;
position: relative;
}

.coda-nav ul li a.current:before {
    content: '';

    position: absolute;
    height: 0;
    width: 0;
    bottom: 2px;
    left: 50%;
    margin-left: -9px;
    z-index: 9999;


    border: 10px solid transparent;
    border-top: 10px solid #303030;
    border-bottom: none;
}


/* Panel padding */
.coda-slider .panel-wrapper { }

/* Preloader */
.coda-slider p.loading { text-align: center }

/* Tabbed nav */
.coda-nav ul { margin-left: 167px; margin-top: 0px; margin-bottom: 0px; clear: both; display: block; overflow: hidden;}
.coda-nav ul li { display: inline }
.coda-nav ul li a { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: #bfbfbf; display: block; float: left; text-decoration: none }


.coda-nav ul li a:hover { letter-spacing: 0.5px; margin-right: 30px; text-align: center; font-size: 20px; font-family: FreightSansBook; color: white; display: block; float: left; text-decoration: none }

/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { display: none; }
.coda-nav-left a, .coda-nav-right a { display: none; }
p { color: #bfbfbf; }

I hope someone is able to save me!

Thanks so much in advance for your time and any help you are able to offer.

Edit: This code is also present in my HTML document in the section...

<!--[if IE]>
    <style type="text/css">
     .timer { display: none !important; }
     div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
     #sliderarea {position: absolute !important; margin-top: 0px !important;}
     div.orbit-wrapper {margin-top: -140px !important; position: absolute !important;}
    </style>
    <![endif]-->

This might be of some help. It shows how to install firebug lite on IE: http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/ — Grixxly, Sep 17 '12 at 20:54
"!important" is an indication that you don't understand SPECIFICITY, a key concept in CSS. A good read: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ — Diodeus - James MacFarlane, Sep 17 '12 at 20:56
@Grixxly, thanks for the suggestion. I'm assuming that will inform me of any errors? — Luke Kendall, Sep 17 '12 at 20:58
@Diodeus, the !important declarations were suggested with the slider implementation code from Zurb. Is that what's causing the issue? — Luke Kendall, Sep 17 '12 at 20:59
@Luke Firebug will show you what css is being applied so you can figure out why it isn't being rendered correctly. — Grixxly, Sep 17 '12 at 20:59
The people at Zurb don't seem to understand specificity either, I guess. Maybe using their stuff isn't a great idea. — Diodeus - James MacFarlane, Sep 17 '12 at 21:01
@Diodeus, unfortunately it's the only slider I managed to find that had the functions I required. After the nightmare it has caused this time I may be looking for an alternative however. — Luke Kendall, Sep 17 '12 at 21:03
@Diodeus - Thanks to your suggestion I played around with those !important declarations. Removing them from this line: div.orbit-wrapper {margin-top: -140px !important; position: absolute !important;} seems to have done the trick! Thanks a lot! — Luke Kendall, Sep 17 '12 at 21:09

score 0 · Answer 1 · edited May 23 '17 at 12:21

I think the problem is with your clearfix technique. A “clearfix” is what gives floated elements, such as your slider, an externally-visible height, instead of the normal zero height of floated elements. Your clearfix is working in most browsers but not in IE.

Try the alternate methods of clearfixes described in this answer about methods for clearfixes. Maybe those other methods would work better than your current one. I’m have trouble telling what your current method is because your clearfix rules are mixed with your visual-display rules. Start with the micro-clearfix at the top of that answer:

/* For modern browsers */
.coda-nav ul li a.current:before,
.coda-nav ul li a.current:after {
    content:"";
    display:table;
}
.coda-nav ul li a.current:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.coda-nav ul li a.current {
    zoom:1;
}

Delete any rules in your existing code that the clearfix would override.

IE Positioning Issue

1 Answers1