Web Analytics Made Easy -
StatCounter css shadows - how to get working in IE? - CodingForum

Announcement

Collapse
No announcement yet.

css shadows - how to get working in IE?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • css shadows - how to get working in IE?

    Hi All,

    Im trying to get some shadows on my div boxes, in firefox its working ok but not in IE does anyone know how to get them working for IE?

    here is my page code

    css
    Code:
    body {
    	background-color:#F1F1F1;
    	font-family:Arial, Helvetica, sans-serif;
    }
    #wrapper{
    width:960px; margin:0px auto;
    } 
    #header{
    width:960px; margin:0px auto; height:80px; margin-bottom:10px; background-color:#FFFFFF;
    }
    #taller{
    overflow:auto;
    }
    #left{
    width:205px; float:left; margin-right:5px;
    }
    #center{
    width:540px; background-color:#FFFFFF; float:left; margin-right:5px;
    }
    #right{
    width:205px; background-color:#FFFFFF; float:left;
    }
    .cntrside{
    width:180px; padding:10px; margin-bottom:10px; background-color:#FFFFFF; overflow:visible;
    }
    .cntrsideheader{
    font-size:18px; font-weight:bold;
    }
    .cntrsidetext{
    font-size:12px;
    }
    .shadow {
      -moz-box-shadow: 0px 1px 3px #999;
      -webkit-box-shadow: 0px 1px 3px #999;
      box-shadow: 0px 1px 3px #999;
    }
    html
    Code:
    <div id="wrapper">
    <div id="header" class="shadow"></div>
    <div id="taller">
    <div id="left">
    <div class="cntrside shadow"><div class="cntrsideheader">Main Menu</div><div class="cntrsidetext">Option 1<br />Option 2</div></div>
    </div>
    <div id="center"></div>
    <div id="right"></div>
    </div>
    </div>
    also i need some help getting the shadows to display at all in IE if anyone know how to do it?

    here is my page
    Last edited by LJackson; Aug 21, 2011, 11:53 AM.

  • #2
    also as its css related is it possible to position my li style icons so that they are in the center of the li text and not at the baseline?

    my code for this is
    Code:
    .cntrside{
    width:180px; padding:10px; margin-bottom:10px; background-color:#FFFFFF; overflow:visible;
    }
    .cntrside ul{
    margin-top:5px; margin-bottom:5px;
    list-style: none;
    vertical-align:middle;
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
    }
    .cntrside li{
    }
    .cntrside li:before {
    	content: "\00BB \0020";
    }
    thanks

    Comment


    • #3
      box-shadow isnt suppoerd in IE until IE9, you could try the IE filter if you want - http://placenamehere.com/article/384...rerblurshadow/
      - Firebug is a web developers best friend! - Learn it, Love it, use it!
      - Validate your code! - JQ/JS troubleshooting
      - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

      Comment


      • #4
        heres another method - http://css-tricks.com/snippets/css/css-box-shadow/
        - Firebug is a web developers best friend! - Learn it, Love it, use it!
        - Validate your code! - JQ/JS troubleshooting
        - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

        Comment


        • #5
          ok thanks mate wil have a look at it

          any idea how dto get my list style icons on the sme line as the text? the text has only moved a line down since wrapping the text in <a> tags?

          here is my css
          Code:
          .cntrside li{
          padding-top:6px; padding-bottom:6px; border-bottom:1px solid #EEEEEE;
          }
          .cntrside li:before {
          	content: "\00BB \0020";
          	clear:both;
          }
          .cntrside li a{
          display:block; width:100%, height:100%; text-decoration:none; color:#0000FF;
          }
          .cntrside li a:hover{
          display:block; width:100%, height:100%; text-decoration:underline; color:#0099FF;
          }
          and html
          Code:
          <div class="cntrsidetext">
          <ul>
          <li><a href="">Option 1</a></li>
          <li><a href="">Option 2</a></li>
          </ul>
          </div>
          any ideas?

          thanks
          Luke

          Comment


          • #6
            Code:
            .cntrside li a{
            display:block
            Very likely this.
            Blog | Twitter
            Useful links: W3C HTML Validator | W3C CSS Validator | HTML 5 Guide
            CF: HTML & CSS Resources/Tutorials Thread | HTML & CSS Posting Rules and Guidelines
            Remember: no link, no code, no help!

            Comment


            • #7
              yes mate that solved that problem but it has created another, lol my li's are now only links where the text is and not the whole container, any ideas how i can get both working together?

              many thanks
              Luke

              Comment

              Working...
              X