+ Post New Thread
Results 1 to 3 of 3
Web Development Thread, CSS3 elements not displaying correctly in Coding and Web Development; I need a bit of help with this... Im doing some work on our website and I want to incorporate ...
  1. #1
    Admiral208's Avatar
    Join Date
    Mar 2008
    Location
    Bridgwater
    Posts
    723
    Thank Post
    176
    Thanked 63 Times in 55 Posts
    Rep Power
    40

    CSS3 elements not displaying correctly

    I need a bit of help with this... Im doing some work on our website and I want to incorporate a few CSS3 elements into the mix. The elements are box-shadow, border-radius and text-shadow.

    As you can see from the 3 screen shots, in chrome, everything works as it should. There is a shadow around the outside of the site, the horizontal menu has a drop shadow under the text and headings on the page have rounded corners. Opera has a shadow around the outside of the page, drop shadow under the text but no rounded corners for the headings. IE9 has a shadow around the site, no drop shadow under the text and no rounded corners on the headings.

    1. Box Shadow - this should work in IE9 but I have had to include a line in the css to run a file called ie-css3.htc. I would have included this anyway to make it work in IE8 but why doesnt it work in IE9 without it. Heres the css im using to create a box shadow around the outside of the page.
    Code:
    .shadow {
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
    -moz-box-shadow:    0px 0px 15px rgba(0, 0, 0, 1);
    box-shadow:         0px 0px 15px rgba(0, 0, 0, 1);
    behavior: url(https://slp2.somerset.gov.uk/schools/rbsc/_catalogs/masterpage/ie-css3.htc);
    }
    2. Border Radius - Aparently this should also work in all three browsers but it only seems to work in Chrome, Firefox and Safari. Opera and IE9 dont seem to be able to cope with the rounded borders. heres the css im using
    Code:
    .ms-WPHeader td {
    border:1px black solid;
    height:24px;
    padding: 0px 0px 0px 8px;
    background:url(https://slp2.somerset.gov.uk/schools/rbsc/Images/button_bg.jpg);
    border-radius:8px; 
    -moz-border-radius:8px; 
    -webkit-border-radius:8px; 
    behaviour:url(https://slp2.somerset.gov.uk/schools/rbsc/_catalogs/masterpage/ie-css3.htc);
    }
    3 - Text Shadow - This should work in all browsers but again, it doesnt appear to work in IE9. CSS below
    Code:
    .ms-topnav {
    font: bold 13px "Verdana";
    border:none; 
    border-right:2px solid #fff 
    background-color:transparent; 
    background-image:none; 
    background-repeat:repeat; 
    background-attachment:scroll;
    height:40px; 
    text-shadow:1px 1px black; 
    behavior: url(https://slp2.somerset.gov.uk/schools...ge/ie-css3.htc)
    }

    All of the browsers im using should support CSS3 by default and I cant see any reason why its not working. The site is based around Sharepoint. Im starting to think that it might only be my computer that is not displaying the site correctly but because ive got the only copy of IE9 in the school, I cant test on anyone else.

    Does anyone have any experience with CSS3 and help me out. Its not a major problem but I would like to get it right.

    And sorry for such a long post.

    Thanks!
    James
    Attached Images Attached Images

  2. #2
    JJanisch's Avatar
    Join Date
    Nov 2011
    Location
    Swindon
    Posts
    228
    Thank Post
    21
    Thanked 21 Times in 21 Posts
    Rep Power
    12
    From what I see this should work OK, what I would suggest is to create a blank page with one element. Apply these styles and test in all browsers - that way you can rule out if it's another function causing your problems or not. The problem I often see people have is based around parent and child elements, where the parent is preventing something from happening in the stylesheet.

    When it comes to working with CSS3 you have to be a little cautious. Make sure one style works before applying the next, and try not to use (a bloat of) classes where it's not necessary.
    Last edited by JJanisch; 2nd February 2012 at 10:26 AM.

  3. #3
    JJanisch's Avatar
    Join Date
    Nov 2011
    Location
    Swindon
    Posts
    228
    Thank Post
    21
    Thanked 21 Times in 21 Posts
    Rep Power
    12
    Also just a heads up I've noticed a couple of missing semi colons in the topnav class.



SHARE:
+ Post New Thread

Similar Threads

  1. [CLOSED] Bug/Error: Avatar not displaying correctly
    By elsiegee40 in forum EduGeek.net Site Problems
    Replies: 5
    Last Post: 12th April 2010, 03:27 PM
  2. [CLOSED] Bug/Error: Signature not displaying correctly
    By kearton in forum EduGeek.net Site Problems
    Replies: 2
    Last Post: 9th January 2008, 10:20 AM
  3. Replies: 2
    Last Post: 1st May 2007, 10:17 AM
  4. Replies: 9
    Last Post: 18th December 2006, 11:07 PM
  5. Active desktop not displaying fully..........?
    By tosca925 in forum Windows
    Replies: 7
    Last Post: 18th November 2005, 01:09 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •