1

I am developing Application in ORACLE APEX with custom theme.

application run perfectly in all browser except IE, IE doesn't show color properly as I was expecting.

this result comes from my chrome browser. enter image description here

now in Internet Explorer 8 (IE8) all this messed up, the color effect is not displaying properly. enter image description here

Here is my CSS for 1,2,3,4 <div>

.top-tabs .tab:nth-child(1),.head1 .region-header {
   background-color: #014fa2;
}

.top-tabs .tab:nth-child(2),.head2 .region-header {
   background-color: #1e69b9;
}

.top-tabs .tab:nth-child(3),.head3 .region-header {
   background-color: #3481d2;
}

.top-tabs .tab:nth-child(4),.head4 .region-header {
   background-color: #58a1f0;
}

Here is my HTML

<ul class="top-tabs">
    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">1</div>
        <div class="top-tab-label">Admission<br>Application</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">2</div>
        <div class="top-tab-label">Pay<br>Application Fee</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">3</div>
        <div class="top-tab-label">Submit<br>Required Documents</div>
      </a>
    </li>

    <li class="tab">
      <a href="#">
        <div class="top-tab-nr">4</div>
        <div class="top-tab-label">Sign up<br>Information</div>
      </a>
    </li>
</ul>

any help / guideline to overcome from this ??

124
  • 2,757
  • 26
  • 37
  • 5
    Don't think IE8 supports `nth-child` selector – Pete Apr 23 '14 at 13:04
  • Well, since it looks like an whole other page ( no steps completed and so on ), my first guess would be that you missed an include to an CSS file? Maybe inside the `!--[if IE....` stuff? – Mathlight Apr 23 '14 at 13:05
  • 1
    Since it's not supported in `IE8`, maybe the `jQuery` version will be an alternative `$(".tab:nth-child(1n)")`. – Ali Bassam Apr 23 '14 at 13:07
  • @pete - what would be the possible soulution? – 124 Apr 23 '14 at 13:10
  • 1
    [Try this post](http://stackoverflow.com/questions/10577674/how-to-make-internet-explorer-8-to-support-nth-child-css-element) – Pete Apr 23 '14 at 13:12

1 Answers1

2

No JavaScript necessary...

Option A
Give each list item a class, the same way you did the headers.

Option B
Use the + (adjacent sibling) selector. Like this:

.top-tabs .tab:first-child,.head1 .region-header {
   background-color: #014fa2;
}

.top-tabs .tab:first-child + .tab,.head2 .region-header {
   background-color: #1e69b9;
}

.top-tabs .tab:first-child + .tab + .tab,.head3 .region-header {
   background-color: #3481d2;
}

.top-tabs .tab:first-child + .tab + .tab + .tab,.head4 .region-header {
   background-color: #58a1f0;
}

Try it out: http://jsfiddle.net/3q9cD/

Ayman Safadi
  • 11,502
  • 1
  • 27
  • 41
  • 1
    Yes, as long as you use a `doctype`. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors#Browser_compatibility – Ayman Safadi Apr 23 '14 at 14:02