The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 2 of 2

Thread: CSS Rollover trouble

  1. #1

    CSS Rollover trouble

    Hi there,

    I went through the motions in Kirupa's CSS Rollover tutorial
    but it didn't turn out properly.

    I put up my test example here: http://flareforfashion.ca/test/test.htm

    CSS Code:

    #example{
    height: 14px;
    width: 66px;
    text-indent: 10000px;
    overflow: hidden;
    background: url(images/but_new_home2.gif) top left no-repeat;
    display: block;
    }

    #example:hover{
    background-position: bottom left;
    }


    HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "
    http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    @import "rollover.css";

    </style>
    </head>

    <body>
    <table width="66" cellspacing="0" cellpadding="0">
    <tr>
    <td><div>
    <a href="#" id="example">Home</a>
    </div> </td>
    </tr>
    </table>
    </body>
    </html>



    The height of the image is actually 28px but as the tut said put half.
    As you can see it goes partially up.
    I'm using the latest IE browser.

    Any help would be greatly appreciated

  2. #2
    Well first of all it works fine in firefox so atleast you got it right in a good browser. Firstly I cleaned up your html and took out the uneeded table stuff.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    
        <style type="text/css">
            @import "rollover.css"; 
        </style>
    </head>
    
    <body>
    <div> 
        <a href="#" id="example"><span>Home</span></a> 
    </div>
    </html>
    You'll notice i put a span tag around your home text within your a tag, this was so I could hide the text rather than indent it 10000px!

    and the css only added one thing and that was it and it works fine in IE
    PHP Code:
    #example{ 

    height14px
    width66px
    overflowhidden
    backgroundurl(images/but_new_home2.giftop left no-repeat
    displayblock



    #example span {
        
    displaynone;


    #example:hover{ 

    background-positionbottom left


    -Inept

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
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012