css-only rollover background image swap problem -- help?

Discussion in 'HTML' started by Miselaineous, Apr 17, 2005.

  1. Miselaineous

    Miselaineous Guest

    I wanted to do something that looked interesting, for a spoken-word
    artist's site.... I wanted the navigation background image appear to
    change with a rollover, and I wanted to do it with CSS.

    The following works as intended in Firefox, but breaks in IE and Opera
    -- so it's obviously not going to be a valid effect if I can't coax
    the code to accept the other browsers.

    http://ivanecoyote.com/test.php

    When the rollover image in the *span* tag is not a background, it
    works in all the browsers I've been able to test. This site of mine
    works fine with a very similar technique:
    http://sactaiko.org

    Anyone with an idea why it's breaking?

    Thanks for any input...

    -Elaine
    e l a i n e a t d y k e t e c h d o t c o m
    --
    +++++++++++++++++++++++++++++++++++++++++++++++++++++
    mer
    Miselaineous, Apr 17, 2005
    #1
    1. Advertising

  2. Miselaineous wrote:
    > I wanted to do something that looked interesting, for a spoken-word
    > artist's site.... I wanted the navigation background image appear to
    > change with a rollover, and I wanted to do it with CSS.
    >
    > The following works as intended in Firefox, but breaks in IE and Opera
    > -- so it's obviously not going to be a valid effect if I can't coax
    > the code to accept the other browsers.
    >
    > http://ivanecoyote.com/test.php
    >
    > When the rollover image in the *span* tag is not a background, it
    > works in all the browsers I've been able to test. This site of mine
    > works fine with a very similar technique:
    > http://sactaiko.org
    >
    > Anyone with an idea why it's breaking?
    >
    > Thanks for any input...
    >
    > -Elaine
    > e l a i n e a t d y k e t e c h d o t c o m
    > --
    > +++++++++++++++++++++++++++++++++++++++++++++++++++++
    > mer


    This imported stylesheet for http://ivanecoyote.com/test.php has a
    number of 'odd' elements.

    HTML comments <!-- ... --> are not allowed in a stylesheet but should be
    /* ... */, I believe they are allow in HTML documents between the
    <STYLE></STYLE> to hide the code from very old browsers

    You have HTML <STYLE></STYLE> in your external stylesheet also a no-no

    and not sure what this stuff is?

    <!--[if lt IE 6]>
    <style type="text/css" media="screen">>
    /* HR styles need for IE 5/Win and under. */
    #middle { position: relative; }
    </style>
    <![endif]-->

    these special MS conditional comments are for in your HTML document not
    your stylesheet, right?


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 17, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Niels Dekker (no reply address)

    What swap is called when using std::swap?

    Niels Dekker (no reply address), Jul 19, 2006, in forum: C++
    Replies:
    4
    Views:
    970
    Niels Dekker (no reply address)
    Jul 20, 2006
  2. Roamer
    Replies:
    0
    Views:
    355
    Roamer
    May 6, 2008
  3. LAshooter

    Image swap only works in IE

    LAshooter, Mar 5, 2006, in forum: Javascript
    Replies:
    12
    Views:
    144
    Thomas 'PointedEars' Lahn
    Mar 6, 2006
  4. Mark Szlazak
    Replies:
    3
    Views:
    160
    Fletch
    Apr 25, 2006
  5. twst3d
    Replies:
    0
    Views:
    90
    twst3d
    Jul 11, 2007
Loading...

Share This Page