SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    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,745
    Mentioned
    11 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>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    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,745
    Mentioned
    11 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 ~).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    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,745
    Mentioned
    11 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).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    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,745
    Mentioned
    11 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>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    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,745
    Mentioned
    11 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;}


    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    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,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I don't understand what you are asking....
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    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,745
    Mentioned
    11 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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Evangelist
    Join Date
    Jun 2010
    Posts
    455
    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,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Glad I could be of help . You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.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
  •