SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Notification box icons work in all browsers but IE!?

    I'm working on creating a notification box using CSS and everything looks perfect in Firefox, Chrome, and Safari - the only browser that it doesn't work in is IE.

    By not working I mean I have an icon on the left hand side of the message box which these icons all show for the browsers listed above, but IE. This is what I'm working on now:

    <snip />

    Any suggestions on how to fix it for IE as well? Thanks in advance.
    Last edited by DaveMaxwell; Jan 5, 2011 at 08:27. Reason: removed at users request....

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I'm getting the same results in IE8, Chrome and Opera - can you be more specific about the problem? Which version of IE?

    Have you done something silly like forgotten to log in/out when using IE?

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here are the screen shots of what I'm getting:

    Chrome
    chrome.png


    IE8
    ie8.png

    Notice the bulls eye icon is missing in IE8 but is displaying correctly in Chrome (as well as Firefox and Safari).

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,254
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    It doesn't seem to like your tip::before content.

    As an alternative, you could just set the background to tip like this and get the same result.

    background: #f9d9a1 url(http://quadcopterforums.com/images/misc/tip.png) no-repeat 20px 20px;
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  5. #5
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dave,

    I gave that a try and now IE works, but all the other don't.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The gradient filter uses the background-image property so you can't have both on the same element. It's one or the other.

    Just leave the tip:before image in place and then they will all get what they need as IE8 doesn't understand gradients anyway.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Note that IE8 doesn't like the double colon syntax:

    tip::before {}

    If you use:

    .tip:before {}

    It should work.

  8. #8
    SitePoint Evangelist
    Join Date
    Apr 2003
    Location
    Lexington, KY
    Posts
    437
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I've completely re-written the code - which I think is cleaner than it was previously and it now works in all browsers. Granted IE isn't as pretty as Chrome, Firefox or Safari but at least it looks all the same for the most part and all graphics seem to be working.

    Thanks for all the help guys!


    Firefox:
    firefox.png

    IE8:
    ie.png
    Last edited by WoodiE55; Jan 5, 2011 at 08:46. Reason: added screen shots.


Bookmarks

Posting Permissions

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