2 Replies Latest reply on Apr 1, 2010 6:03 PM by Eliminateur

    conditional <div> for IE?

    Eliminateur

      i want to make en entire div conditional on IE, i put the standard DIV and then afterwards the "modified" DIV for IE with:

      <!--[if IE]>
          <div id="header">
            <![endif]-->

       

      but it doesn't seems to be working, it's processing the first div no matter what i do.

      If i put the conditional comment BEFORE the standard div, it shows two times on IE :S

      but the other way the IE comment gets ignored.

       

      i've tried replacing the last bits inside the div with a conditional comment but it does not work, if only there where a non-IE conditional comment or an ELSE there i could do this...

       

      any ideas?

        • 1. Re: conditional <div> for IE?
          Nancy OShea Adobe Community Professional & MVP

          What you have won't work.

           

          Try this:

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>Untitled Document</title>
          
          <style type="text/css">
          body {
          font: 1em/1.75em Georgia, Times, 'Times New Roman', serif;
          width: 35em;
          margin: 25px auto;
          color: #FFF;
          background: #00162a;
          }
          
          #header1 {color: red} /**served to non-IE browsers**/
          </style>
          
          <!--[if IE]>
          <style type="text/css">
          #header1 {display:none}
          #header2 {color:yellow} 
          </style>
          <![endif]-->
          
          </head>
          <body>
          <div id="header1">
          <h1>This Header content is for non-IE browsers only</h1>
          </div>  <!--end header1 -->
          
          <!--[if IE]>
          <div id="header2">
          <h1>This Header content is for IE browsers only</h1>
          </div> 
          <![endif]-->
          
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac tellus urna. Phasellus imperdiet neque eget libero consectetur sed hendrerit enim placerat. In interdum, erat in luctus fringilla, turpis purus porttitor turpis, congue pulvinar arcu quam in arcu. Mauris posuere sem sed diam vulputate faucibus. Quisque et arcu eros, non tempor orci. Etiam ultricies, lorem ac vulputate bibendum; turpis dolor scelerisque dui, vitae gravida magna ligula quis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tempor aliquet gravida! Curabitur feugiat metus velit. Etiam convallis congue tempor.</p>
          </body>
          </html>
          
          

           

          Hope this makes sense.

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: conditional <div> for IE?
            Eliminateur Level 1

            i see, so you use the display:none in IE so that it hides the "standard" header, then IE processes it's own header(i must take notice to put two different names for the headers too!).

            When non-IE browser shows, the none display comments out and the standard one gets pictured.

             

            thanks for the headsup i'll try it now