css: image rollovers stumps IE
Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: css: image rollovers stumps IE

  1. #1
    the beign of authority kurt_der_koenig's Avatar
    Join Date
    Jan 2004
    Location
    Pa
    Posts
    567

    Angry css: image rollovers stumps IE

    I'm currently coding a webpage which is not finished. There is one thing that really has stumped me. I created the image rollover effect with css which works perfectly on Mozilla .9.3 but has problematic problems with Internet Explorer 6. In IE it continously loads the pics and even when it stops it never shows up!?!::: IE has to definately work because of the situation of it being used at school and by people who never even heard of Mozilla and the such. Also Javascript is also definately out of the question cause of the schools and other students/teachers problems with other school related sites that have it!

    Here is the main site code so far:
    Code:
    <html>
     <head>
      <title>&nbsp&nbsp Open G-source &nbsp&nbsp</title>
     <link rel="stylesheet" href="main.css">
     <link rel="stylesheet" href="links.css">
    </head>
     <body>
      <table  width="900" align="center" border="0" bordercolor="white">
      <tr>
       <td>
    <!--begin content-->
    <table width="890"  valign="top" align="center">
     <tr>
     <td><img src="header.png"><br><br><br><br>
        <center>
        <a href="dis.html" class="dis"></a>
        <a href="about.html" class="about"></a>
        <a href="sections.html" class="sec" target="linki"></a>
        </center>
     </td>
     </tr>
     <tr><td>
      <iframe src="dumb.html" name="linki" width="500" height="25" frameborder="0">
     </td></tr>
    </table>
    </table>
    <!--end content-->
      </td>
      </tr>
      </table>
     </body>
    </html>
    And here is the css code for the rollover:::
    Code:
    a.dis {
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 200px;
    padding-top: 40px;
    }
    a.dis:link {
    background-image: url(dis.png)
    }
    a.dis:visited {
    background-image: url(dis.png)
    }
    a.dis:hover {
    background-image: url(blank.png)
    }
    a.dis:active {
    background-image: url(dis.png)
    }
    a.about {
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 200px;
    padding-top: 40px;
    }
    a.about:link {
    background-image: url(about.png)
    }
    a.about:visited {
    background-image: url(about.png)
    }
    a.about:hover {
    background-image: url(blank.png)
    }
    a.about:active {
    background-image: url(about.png)
    }
    a.sec {
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 200px;
    padding-top: 40px;
    }
    a.sec:link {
    background-image: url(sec.png)
    }
    a.sec:visited {
    background-image: url(sec.png)
    }
    a.sec:hover {
    background-image: url(blank.png)
    }
    a.sec:active {
    background-image: url(sec.png)
    }
    Is it some new security with sp2 or is it my code or even IE itself? Ahh. the pic below is how its supposed to look so far with mozilla and the IE pic, just imagin white screen. Thanz.

  2. #2
    Webius Designerous Indiginous
    Join Date
    Mar 2002
    Location
    South Florida
    Posts
    1,123
    Your main site code has some errors and does not comply to w3 standards. You should put in a proper doctype, and validate the code using www.w3.org's html validator. CSS and "tag soup" do not always work well together.

  3. #3
    You can't do image rollovers with CSS, can you? I thought it was only javascript. In fact I am almost positive?
    Hyperlinks use CSS for rolls, but not images.

  4. #4
    the beign of authority kurt_der_koenig's Avatar
    Join Date
    Jan 2004
    Location
    Pa
    Posts
    567
    Your main site code has some errors and does not comply to w3 standards. You should put in a proper doctype, and validate the code using www.w3.org's html validator. CSS and "tag soup" do not always work well together.
    as I said I'm not done!

    You can't do image rollovers with CSS, can you? I thought it was only javascript. In fact I am almost positive?
    Hyperlinks use CSS for rolls, but not images.
    Yes you can soda! see google
    http://www.google.com/search?q=css+r...utf-8&oe=utf-8

  5. #5
    Senior Member
    Join Date
    Jan 2002
    Posts
    227
    soda: Of course you can, see this example at wellstyled.com.

    kurt_der_koenig: Yes you are not done, but your code is messy. As xmaddness said, tag soup doesn't always work well with css. Take a look at the example at wellstyled, it could help you.
    http://promote.opera.com/small/opera94x15.gif

    [gloworange]Sun7dots[/gloworange]

  6. #6
    Senior Member
    Join Date
    Aug 2001
    Posts
    251
    Yeah, I've had great success with the Method 2 from sun7dots example site.
    I adapted eric meyer's "Pure CSS popups with images" though from http://www.meyerweb.com/eric/css/edge

    The css and html validators from w3c should become your friend. They won't guarantee success, but they will atleast point out any serious flaws.

    The inclusion of a doctype is important, because it often changes the way a browser parses and renders the underlying html/css. Often without one the browser goes lazy, and causes weird results. Ofcourse every browser is unfortunatly different.
    The owl of Minerva spreads its wings only with the falling of dusk. -Hegel

  7. #7

    Well I guess thats what happens when you use WYSIWYG. GoLive uses javascript for their rollovers if I'm not mistaken again.

  8. #8
    @kurt_der_koenig I have observed you are using .png's on your images. As far as I know .png's has several compatibility issues with IE an in other browsers as well, it fails to display them properly. Browsers of Mozilla on the other hand supports .png images very well.

    Try changing your images to .jpg's or .gif's...and see if that works. If your very much concerned about the quality of these images (since you choose .png-less compression) use graphics softwares like photoshop and save it to the maximum quality possible.

  9. #9
    Senior Member
    Join Date
    Jan 2002
    Posts
    227

    Post

    wedjarl: I don't think this could be the problem, afaik although IE has problems with png, it is problem with rendering .png alfa channel. So this could cause malfunction of transparency, but not of this rollover effect.
    http://promote.opera.com/small/opera94x15.gif

    [gloworange]Sun7dots[/gloworange]

  10. #10
    the beign of authority kurt_der_koenig's Avatar
    Join Date
    Jan 2004
    Location
    Pa
    Posts
    567
    umm... thanx everybody. The doctype solved some of the problems. Only thing is that the sp2 version of IE blocks some of the css. Fortunately the school still uses sp1. oh well got to do some testing! thanx again.

Posting Permissions

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