IE-9 Display Declaration

HTML & CSS
1

I have an issue to display horizontally a block of three bullets to the left in IE-9, while in IE-8 or IE-7 I have no problems. Any help would be appreciated.

Here is the html:

<ul class=“navicons” id=“secondary-nav”>
<li>
<a id=“rss” href=default.aspx" target=“_blank” title=“RSS”>RSS</a></li>
<li>
<a id=“videos” href=“video_resources.aspx” target=“_blank” title=“>videos</a></li>
<li>
<a id=“marketplace” href=“marketplace.aspx” target=”_blank" title="marketplace”>marketplace >/a></li>
</ul>

This is the CSS:
ul.navicons {
list-style: none;
margin: 0 0 0 15px;
line-height: 25px;
display: block;
}
ul.navicons li {
background-position: 100% 3pt;
display: inline;
font-size: 12px;
float: left;
padding: 0 4px 0 0;
margin-left: 10px;
background-color: transparent;
background-image: url(‘…/images/Splitter_NavBar.png’);
background-repeat: no-repeat;
}
ul.navicons li a {
margin: 0 6px 0 8px;
display: inline;
font-size: 11px;
padding: 0 0px 0 18px;
font-family: “segoe UI”;
font-weight: bold;
color: #494a4b;
text-transform: uppercase;
}
#secondary-nav {
float: left;
}
#secondary-nav li a#marketplace {
text-indent: -10px;
display: ;
}
#secondary-nav li a#videos {
background: transparent url(…/images/Video_16.png) no-repeat scroll left center;
text-indent: 12px;
display: block;
}
#secondary-nav li a#rss {
background: transparent url(…/images/RSS_16.png) no-repeat scroll left center;
text-indent: 1px;
display: block;
}

2

Hi QuiQue69, welcome to SitePoint! :slight_smile:

Wow, the first problem with IE9 I’ve seen here. Could you post the images for that page too?

3 
<ul class="navicons" id="secondary-nav">
<li>
<a id="rss" href=default.aspx" target="_blank" title="RSS">RSS</a></li>
<li>
<a id="videos" href="video_resources.aspx" target="_blank" title=">videos</a></li> 
<li>
<a id="marketplace" href="marketplace.aspx" target="_blank" title="marketplace&#8221;>marketplace >/a></li>	
</ul>

Code highlighting can be good.

As you can see you have:

  • a missing opening " in: a id=“rss” href="default.aspx"
  • a missing value (not a mistake really) but also a missing closing " in: title="">videos
  • a wrong closing > and a missing opening < in: title="marketplace”>marketplace ></a>

I guess IE9 didn’t took those too kindly :slight_smile:

What’s left to say: validate your code before posting your problem. It may be that by doing so the problem may solve by it self :slight_smile:

4

Yes, and thank you for your catch. You are right with all those typos I had in my posting, but the point is (forgetting about those typeo) that the html is correct on my end and the “display declaration” is not working properly with IE-9. I am looking for a solution to make it work properly. Any suggestions to the CSS

5

You know of copy-paste right? :slight_smile:

Post a live page or a full/working code for us to work on and possibly a screen shot of how it looks in IE9 :slight_smile: The discussion is much too philosophical w/o one of these. The problem may be in some other place than in your posted code.

Also, since IE9 is beta, maybe it’s a specific IE9 beta problem due to incomplete or wrong implementation so far, that will be solved before RTM, and so, IF your page is properly coded, it’s something you don’t need to worry about.