CODEWITHSUNDEEP
htmlcssie8-compatibility-mode
Alyssa Reyes
Alyssa Reyes

Reputation: 2439

Navigation incompatible for IE 8

I don't know why this not working properly on ie8.

enter image description here

<div id="bluemenu" class="bluetabs">
<ul>
<li class="">
  <a rel="dropmenu3_c" href="company/">Company 
    <span><img width="11"height="7" src="images/arrow_btn.png"></span>
  </a>
</li>
</ul>
</div>

This is the css for the navigation ul

.bluetabs ul {
color: #FFFFFF;
float: right;
font: 13px 'Open Sans','Lucida Grande',Arial,"Verdana sans-serif";
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
text-transform: uppercase;
}

This is the css for the navigation li

.bluetabs li {
display: inline;
float: left;
height: 36px;
margin: 0;
padding: 0;
}

This is the css for the navigation li a 

.bluetabs li a {
background: url("../images/menu_nav_hover_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
margin: 0;
padding: 5px 15px;
text-decoration: none;
}

Any CSS hacks that I can make this work on IE 8?

Upvotes: 1

Views: 35

Answers (1)

davidpauljunior
davidpauljunior

Reputation: 8338

I can kind of reproduce this locally, but not entirely. Gonna take a shot in the dark...

Try:

.bluetabs li a {
  background: #ccc;
  color: #FFFFFF;
  margin: 0;
  padding: 5px 15px;
  text-decoration: none;
  display: inline-block; /* Add this */
}

/* Add this */
.bluetabs li a > span {
  display: inline-block;
}

Upvotes: 1

Related Questions