SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sigh; another CSS hover button problem in IE

    In the following code I show two buttons, the first button looks wrong in IE but right in Firefox. The second looks right in both IE and Firefox. The difference is the first button contains a table inside the <li><a></a></li>, the second does not. Adding a table there causes IE to NOT change the cursor to the familiar hand-finger-link-thing when you hover over the button. All other hover effects work fine.

    I'd be grateful if anyone can figure out how to keep the table inside the <li></li> and get IE to show the hand-finger-link-cursor when you hover over it.

    Code:
    <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style>
    ul#cssnav {
            list-style-type:none;
    }
    
    #cssnav li a {
            display:block;
            width: 150px;
            text-decoration:none;
    }
    
    #cssnav li a:hover {
            background:green;
            color:black;
    }
    </style>
    </head>
    <ul id="cssnav">
    <li><a href="#"><table cellspacing="3"><tr><td valign="top" width="1%" style="font-size:large;">1.&nbsp;&nbsp;</td><td><img src="pic.jpg" width="40" border="1" /></td><td valign="top">Button 1</td></tr></table></a></li>
    <li><a href="#">2.&nbsp;&nbsp;<img src="pic.jpg" width="40" border="1" />Button 2</a></li>
    </ul>
    </body>
    </html>
    Thanks!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    table, table *{position:relative;}
    Add that and it works (though I can't get the actual things clickable throughout.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I got it working. I added "cursor: pointer;" to #cssnav li a{} to get the correct cursor. Then I added an onclick action to the <li> element in the html which does a javascript redirect. Not ideal, but it works now.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A table inside an <a> is invalid coding - you can't put block elements inside inline elements. Besides that, a table makes no sense there anyway as there is no tabular data.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How else can you get text to appear directly next to the image (ie if the text overflows, it becomes two lines of text directly to the right of the picture), and not wrap to the line below the image?

    The only thing I could come up with is a table using two cells, one for the image and one for the text.

    And, it is tabular data. Think of each button as selecting a record from a database. I considered creating a table and making the rows clickable but this was easier.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought I offered a solution to that in this thread ....

    One row or one column would hardly be considered tabular data - it is just a link containing an image and text.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately I tried what you suggested but it didn't work.

    And I have 10 rows with 3 columns. That's tabular. I didn't post my entire site, only the part I'm having trouble with.

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hadn't had the chance to set up my other suggestion locally, and you did not reply back. However, this change works fine :
    Code:
    ul#cssnav {
            list-style-type:none;
    }
    #cssnav li a {
    	display:block;
    	width: 100px;
    	text-decoration:none;
    	padding:5px 5px 5px 50px;
    	overflow: hidden;
    }
    #cssnav li a:hover {
            background:#1f1f1f;
            color:#fffff8;
    }
    #cssnav li a img {
    	margin-left: -45px;
    	float: left;
    }

  9. #9
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lschmidt View Post
    Unfortunately I tried what you suggested but it didn't work.

    And I have 10 rows with 3 columns. That's tabular. I didn't post my entire site, only the part I'm having trouble with.
    Unless the image is somehow very important, the best thing to do is just make the image the background of the <a> element via CSS. Then you don't need any more HTML markup to align things, and only your necessary info (text) is coded.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com


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
  •