title: Css before and after usage
body: <p>Hi I am trying to insert left and right side images for my UL. The Blueprint css framework is included in my app. Can anyone tell me what I am doing wrong please. Thanks</p>
  <pre><code>CSS 
    
   
  
  body{
      margin:0;
  }
  
  #header {
      height:150px;
      background: url(&quot;../images/header_bg.png&quot;) repeat-x;
      border-bottom: 1px solid #ccc;
  }
  
  #logo{
      height:100%;
      width:40%;
      float:left;
  }
  
  #top_nav{
      width:100%;
      height:65px;
  }
  
  #navigation{
      height:100%;
      width:55%;
      float:right;
      padding-right:50px;
      text-align: right;
  }
  
  #navigation ul:BEFORE{
      background-image: url(&quot;../images/header_menu_left.png&quot;);
  }
  
  #navigation ul:AFTER{
      background-image: url(&quot;../images/header_menu_right.png&quot;);
  }
  
  #navigation li{
      list-style: none;
      float:right;
      background: url(&quot;../images/header_menu_bg.png&quot;);
      height:35px;
      padding-top:10px;   
      padding-left:15px;
      padding-right:10px; 
  }
  </code></pre>
  <h1>HTML</h1>
  <pre><code>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link href=&quot;css/blueprint/screen.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; /&gt;
    &lt;link href=&quot;css/blueprint/print.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot;&gt;
    &lt;link href=&quot;css/screen.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
    &lt;!--[if IE]&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/blueprint/ie.css&quot; type=&quot;text/css&quot; media=&quot;screen, projection&quot; /&gt;&lt;![endif]--&gt;
    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;&gt;
    &lt;title&gt;Site Ismi | Page Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;!-- Header Div Start --&gt;
  &lt;div id=&quot;header&quot; class=&quot;span-24 last&quot;&gt;
      &lt;div id=&quot;logo&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;navigation&quot;&gt;
          &lt;div id=&quot;top_nav&quot;&gt;&lt;/div&gt;
          &lt;div id=&quot;menu_nav&quot;&gt;
              &lt;ul&gt;
                  &lt;li class=&quot;first&quot;&gt;Item 1&lt;/li&gt;
                  &lt;li&gt;Item 2&lt;/li&gt;
                  &lt;li class=&quot;last&quot;&gt;Item 3&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  &lt;!-- Content Div Start --&gt;
  &lt;div id=&quot;content&quot; class=&quot;span-24 last&quot;&gt;
     Ruby Content Here
  &lt;/div&gt;
  &lt;!-- Footer Div Start --&gt;
  &lt;div class=&quot;footer&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>