SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Iceland
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE and Dirty(?) CSS Usage

    Can someone tell me what's wrong with the following code? It's supposed to create image hover effects via CSS, and it does so. Beautifully, I might add. Unfortunately, that's just Firefox. After writing the code and seeing it worked in Firefox I decided to open it up in IE and well... it was really fscked up.

    Relative CSS code:
    Code:
    img {
            display: block;
            border: 0;
    }
    
    #link1 {
            background-image: url('/impact/layout/infohover.gif');
    }
    
    #link1 a:hover img {
            visibility: hidden;
    }
    Relative XHTML:
    Code:
                                            <td id="link1" width="128" height="72">
                                                    <a href="/"><img src="layout/info.gif" /></a>
                                            </td>
    I'd appreciate if someone with more experience than me could look over this and tell me if something is wrong. If the information provided is not enough, I'll gladly post a link to this part of the website, so just let me know.

    Thanks.

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/cssrollover4.htm

    That link helped me out when I was trying to do about the same thing.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that'll work if you just change this

    Code:
    #link1 a:hover img {
            visibility: hidden;
    }
    to this :


    Code:
    #link1 a:hover {
            visibility: hidden;
    }
    (Though I could be wrong)

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Iceland
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies. Unfortunately, though, I'm still in some trouble...

    First of all, BonRouge, that didn't not work, thanks though.

    deronsizemore, I looked through the source of that link, thanks for pointing it out. I found I was missing:
    Code:
    #toplink img {width: 100%; height: 100%; border: 0; }
    * html a:hover {visibility:visible}
    Which I added in appropriate places. That almost worked but it's almost worse though... and to top it off I have another problem, that I did not post about because I thought I could fix it myself. IE bothces the link table somehow, untill you hover the links. I think it's best for clarity to link to this particular part of the site. I'd really appreciate if any of you would take the time to look at this and help me...

    Here's the fsckd up part of the site
    Here's the XHTML code
    Here's the CSS code

    Thanks for your time.

    Oh, and as you can see, everything looks as it should in Firefox...

    Edit: I actually forgot to describe the current problem. Aside from the botchiness of the table the links, when highlighted, flicker. Alot. This is probably something you'll have to check for yourselves.
    Last edited by anti; Jan 3, 2005 at 05:15.

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simon Pieters

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie likes something to change on a:hover at the same time as it hides the image. It also likes dimensions for the anchor and a position:relative.

    Putting it all together looks like this.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Impact of Reason - Alliance Guild on Illidian</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css" media="all">
    body {
    		color: #FFFBDD;
    		background: #000000;
    		margin: 0px;
    		padding: 0px;
    		font-size: 12px;
    		font-family: Sans, Arial;
    }
    img {
    display: block;
    border: 0;
    }
    .bar {
    background-image: url(http://itami.ath.cx/impact/layout/bar.gif);
    }
    #barleft {
    background-image: url(http://itami.ath.cx/impact/layout/barleft.gif);
    }
    #barright {
    background-image: url(http://itami.ath.cx/impact/layout/barright.gif);
    }
    #dragon {
    background-image: url(http://itami.ath.cx/impact/layout/dragon.jpg);
    }
    #headerfill {
    background: #000000;
    }
    #impact {
    background-image: url(http://itami.ath.cx/impact/layout/title.jpg);
    }
    #link1 {
    background-image: url(http://itami.ath.cx/impact/layout/infohover.gif);
    }
    #toplinks a:hover{border:0px solid red}/* ie needs this*/
    #link1 a:hover img {
    visibility: hidden;
    }
    #link2 {
    background-image: url('http://itami.ath.cx/impact/layout/raidshover.gif');
    }
    #link2 a:hover img {
    visibility: hidden;
    }
    #link3 {
    background-image: url('http://itami.ath.cx/impact/layout/infohover.gif');
    }
     
    #link3 a:hover img {
    visibility: hidden;
    }
    #link4 {
    background-image: url('http://itami.ath.cx/impact/layout/raidshover.gif');
    }
    #link4 a:hover img {
    visibility: hidden;
    }
    #title {
    table-layout: fixed;
    }
    #toplinks {
    table-layout: fixed;
    }
    #toplinks img, #toplinks a{
    width: 100%;
    height: 100%;
    position:relative;/* ie needs this*/
    }
    </style>
    </head>
    <body>
    <table id="header" width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr> 
    	<td> <table id="title" width="100%" cellspacing="0" cellpadding="0" border="0">
    		<tr> 
    		 <td id="impact" width="512" height="256"> </td>
    		 <td id="headerfill" height="128"> </td>
    		 <td id="dragon" width="256" height="256"> </td>
    		</tr>
    	 </table></td>
    </tr>
    <tr> 
    	<td> <table id="toplinks" width="100%" cellspacing="0" cellpadding="0" border="0">
    		<tr> 
    		 <td class="bar" height="72"> </td>
    		 <td id="barleft" width="7" height="72"> </td>
    		 <td id="link1" width="128" height="72"> <a href="/"><img src="http://itami.ath.cx/impact/layout/info.gif" /></a> 
    		 </td>
    		 <td id="link2" width="128" height="72"> <a href="/"><img src="http://itami.ath.cx/impact/layout/raids.gif" /></a> 
    		 </td>
    		 <td id="link3" width="128" height="72"> <a href="/"><img src="http://itami.ath.cx/impact/layout/info.gif" /></a> 
    		 </td>
    		 <td id="link4" width="128" height="72"> <a href="/"><img src="http://itami.ath.cx/impact/layout/raids.gif" /></a> 
    		 </td>
    		 <td id="barright" width="7" height="72"> </td>
    		 <td class="bar" height="72"> </td>
    		</tr>
    	 </table></td>
    </tr>
    </table>
    <table id="main" width="100$" cellspacing="0" cellpadding="0" border="0">
    <tr> 
    	<td> <table id="left" cellspacing="0" cellpadding="0" border="0">
    	 </table></td>
    	<td> <table id="center" cellspacing="0" cellpadding="0" border="0">
    	 </table></td>
    	<td> <table id="right" cellspacing="0" cellpadding="0" border="0">
    	 </table></td>
    </tr>
    </table>
    </body>
    </html>
    Works in ie and firefox now

    Hope that helps.

    Paul


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
  •