CODEWITHSUNDEEP
cssinternet-exploreroracle-apex
NiiL
NiiL

Reputation: 2827

DIV color not displaying properly in IE

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 ??

Upvotes: 1

Views: 165

Answers (1)

Ayman Safadi
Ayman Safadi

Reputation: 11552

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/

Upvotes: 2

Related Questions