SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    hover problem with ie

    This hover works in ff, but not in ie.

    Is there a work around available?

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <?php session_start(); ?>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="description" content="Save money" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>savebop </title>
    <style type="text/css">
    .button {
    padding:0px;
    width:82px;
    height:40px;
    vertical-align:top;
    }
    
    .message {
    position:relative;
    margin:10px 0px 0px -5px;
    background:white;
    width:100px;
    display:none;
    border-style:solid;
    border-width:4px;
    }
    
    button.button:hover div.message {display:block;}
    </style>
    
    </head>
    
    <body>
    <?php
      echo '<button class="button" >Company Info';
    	$item = "This item.";			  
          echo '<div class="message">' . $item . '</div>';
      echo '</button>'; 
    ?>		  
    </body>
    </html>
    
    
    

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi . In the future, please avoid posting PHP. Luckily the code was simple enough to convert to pure HTML.

    It's because you have invalid HTML. You can't put a div inside a <button>. It just doesn't work like that . I'm sure a validation would confirm.

    I would do something more like this.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><?php session_start(); ?>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="description" content="Save money" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>savebop </title>
    <style type="text/css">
    .button {
    padding:0px;
    width:82px;
    height:40px;
    vertical-align:top;
    }
    
    
    .message {
    position:relative;
    margin:10px 0px 0px -5px;
    background:white;
    width:100px;
    display:none;
    border-style:solid;
    border-width:4px;
    }
    
    
    button.button:hover + div.message {display:block;}
    </style>
    
    
    </head>
    
    
    <body><button class="button" >Company Info</button>		  
          <div class="message">this item</div>
      	  
    </body>
    </html>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    I made the changes and set the script for two hovers.

    How do I keep the "Company Hover" from displacing the "Item Button" (ie how do I keep the button from jumping around)?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <?php session_start(); ?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="description" content="Save money" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>savebop </title>
    <style type="text/css">
    .button {
    padding:0px;
    width:82px;
    height:40px;
    vertical-align:top;
    }
    .message {
    position:relative;
    margin:10px 0px 0px -5px;
    background:white;
    width:100px;
    display:none;
    border-style:solid;
    border-width:4px;
    }
    .button2 {
    padding:0px;
    width:82px;
    height:40px;
    vertical-align:top;
    }
    .message2 {
    position:relative;
    margin:10px 0px 0px -5px;
    background:white;
    width:100px;
    display:none;
    border-style:solid;
    border-width:4px;
    }
    button.button:hover + div.message {display:block;}
    button.button2:hover + div.message2 {display:block;}
    </style>
    </head>
    <body>
    <button class="button" id="a1" >Company Info</button>
    <div class="message" id="a2">This company.</div>
      
    <button class="button2" id="b1" >Item Info</button>
    <div class="message2" id="b2">This item.</div>   
    </body>
    </html>

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Your HTML was wrong (both divs and both buttons have the same class ). BUt I'd change the HTML and CSS up a bit.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="description" content="Save money" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>savebop </title>
    <style type="text/css">
    .button {
    padding:0px;
    width:82px;
    height:40px;
    vertical-align:top;
    }
    .message {
    position:relative;
    margin:10px 0px 0px -5px;
    background:white;
    width:100px;
    border-style:solid;
    display:none;
    border-width:4px;
    }
    .button2 {
    padding:0px;
    width:82px;
    height:40px;
    vertical-align:top;
    }
    .message2 {
    position:relative;
    margin:10px 0px 0px -5px;
    background:white;
    display:none;
    width:100px;
    border-style:solid;
    border-width:4px;
    }
    button.button:hover ~ div.message {display:block;}
    button.button2:hover ~ div.message2 {display:block;}
    </style>
    </head>
    <body>
    <button class="button" id="a1" >Company Info</button>
    <button class="button2" id="b1" >Item Info</button>
    <div class="message" id="a2">This company.</div>
    <div class="message2" id="b2">This item.</div>   
    </body>
    </html>
    If the page was bigger, I'd probably not use ~. Well, it depends on how hte page would be setup. For this example, ~ is perfectly fine (apposed to ~).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I see. The order was wrong. Right?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well it's just how the HTML was structured really. It would be awkward to make it work anyway else unless you used some sort of script.

    I'm not saying by any means that it was impossible. I just gave the easy solution to it .

    The order was wrong, in short (and the HTML class names).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Shouldn't I use IDs instead of classes?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Depends. It doesn't really matter though, unless you plan on reusing some elements on a page, potentially at least twice. Then use IDs.

    My comment about the classes was that you had id="message" twice. Which is fine, but I assumed that you want one div to show on hover PER each <button>
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    How do you write the hove if the IDs were used?

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Say in the HTML you did id="message" instead of class="message". Same with message2 . And the buttons. In fact, in my below example. Say I just replaced every instance oef class, with ID.

    You'd change the CSS like this. The only difference is that IDs are referenced via hash tag (#) instead of period (.)
    Code:
    button#button:hover ~ div#message {display:block;} button#button2:hover ~ div#message2 {display:block;}


    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Last question. What's the tilde saying that the + isn't?

    I just experience the power of the tilde.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I don't understand what you are asking....
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's about the tilde (~).

    I started using what I am learning from you in a much larger script and had to change this:

    Code:
    button.button:hover + div.message {display:block;}
    button.button2:hover + div.message2 {display:block;}
    to this (just as you suggested):
    Code:
    button.button:hover ~ div.message {display:block;}
    button.button2:hover ~ div.message2 {display:block;}
    I was just wondering what the ~ was saying that the + wasn't?

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can read up on both of them on the following links. I'd basically just echo what is being said.

    http://reference.sitepoint.com/css/a...iblingselector
    http://reference.sitepoint.com/css/g...iblingselector
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    453
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    RyanReese, I really appreciate your help. You made this a very satisfying topic for me.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,585
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad I could be of help . You're welcome.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •