Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE messes up list background image - how to workaround?

    I've built a website, CSS, that seems to work as intended in Mozilla FF, however, when opened in IE, something goes terribly wrong;

    Allow me to demonstrate via this link: www.ciemdan.com/Out/Yariv

    the CSS code puts a background image for each list item, and a background image upon rollover (:hover) of each list item. Firefox works like a charm.

    I can't even begin to describe the IE oddity here: the images required don't appear, the original images appear and remain upon rollover, but only for the last 3 list items. Also, no rollover images appear in IE.

    The code in question follows:

    Code:
    #nav {
    	margin: 18px 35px 25px 0;
    	color: black;
    
    }
    #nav a {
      text-decoration:none;
      	color: #B9C8F0;
        font-weight: bold;
    }
    #nav a:hover {
      color:white;
    }
    #nav li {
      background: top right url(images/nav_bg.jpg) no-repeat;
      font-size: 16px;
      padding: 7px 110px 16px 12px;
    }
    #nav li:hover{
      background: top right url(images/nav_bg_c.jpg) no-repeat;
    }
    That's the CSS that IMO is relevant, but perhaps there is some other interference that I'm not seeing here...

    Question is straightforward: how to make the IE look like the FF page? If additional IE styles are required, I can add them via the [if IE] command, with an additional file - style_ie.css.

    Thank you guys for your help, much appreciated,

    Sincerely,

    -Dan.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    :hover pseudo doesn't work with li or any other elements in IE, except on a.
    So you have to apply those styles to a. In order to stretch your anchor, apply display:block; to them.
    And in CSS, the pseudo order should be :link, :visited, :hover, :active (LoVe-HAte)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It's fine in IE7 and above, though.


  •  

    Posting Permissions

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