Search code examples
htmlcssbrowserconditional-comments

Conditional Statements on IE browser check

I have the following code to display a certain UL while in IE7. How can I then apply the other UL style for all browsers except IE7? for example to chrome, firefox, and IE8 - IE10 

<!--[if IE 7]>
        <ul class="toggle" style="margin-right:30px; list-style:none">
          @if (Model.CourseSections != null)
          {
            foreach (var sectionItem in Model.CourseSections)
            {                     
              <li>
                <h5 class="accordion-title">@sectionItem.Title<span class="accordion-icon"></span></h5>
                <div class="accordion-content">
                  <ul>
                    @foreach (var subSectionItem in sectionItem.SectionContents)
                    {
                      <li><a href="#" id="menuItem @subSectionItem.ContentID @sectionItem.CourseSectionID" onclick="SubItemMenu(id)">@subSectionItem.Content.Name</a></li> 
                    }
                  </ul>
                </div>
              </li>
            }
          }
        </ul>
        <![endif]-->

        <ul class="toggle" style="list-style:none">
          @if (Model.CourseSections != null)
          {
            foreach (var sectionItem in Model.CourseSections)
            {                     
              <li>
                <h5 class="accordion-title">@sectionItem.Title<span class="accordion-icon"></span></h5>
                <div class="accordion-content">
                  <ul>
                  @foreach (var subSectionItem in sectionItem.SectionContents)
                  {
                    <li><a href="#" id="menuItem @subSectionItem.ContentID @sectionItem.CourseSectionID" onclick="SubItemMenu(id)">@subSectionItem.Content.Name</a></li> 
                  }
                  </ul>
                </div>
              </li>
            }
          }
        </ul>
Solution

  • If the difference is just in the styling you could use the conditional comments at the start of the page to set a class on the actual html element. (Thanks Paul Irish)

    <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>...

    and then just modify the stylesheet appropriately:

    .toggle {list-style:none}
.lt-ie8 .toggle {margin-right:30px;}