Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Buttons wont work with DOCTYPE ?

    Good day:
    I am trying to use a series of css rollover buttons. It works great until you add a DOCTYPE to the top of the html page, then the buttons dissapear?
    I have no clue what I am doing wrong. I have attached the html and buttons. If you download all of the attached into a file on your desktop then click on the html the buttons work, but try to add a DOCTYPE and see what happens. Any help would be greatly appreciated.
    Shepard
    Attached Images Attached Images
    Attached Files Attached Files

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    I can’t currently be bothered to download anything and assemble it manually.
    First thing that comes to mind is: validate your HTML. Valid code is mandatory in order to get a document that’s working equally well across all major browsers – and this includes a (strict!) doctype.

    After you’ve fixed your errors post the code here (use the smal ‘#’ button in the reply window) or upload it somewhere so we can see it live.

  • #3
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Setting width and height on inline elements does nothing unless they are absolutely positioned or floating. Try to use display:inline-block instead.
    I am still learning English

  • #4
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you for you quick reply: I have validated with the w3c but as I told you when a DOCTYPE is added nothing works. If you remove the DOCTYPE is works great?
    Here is the code. I know your busy, I appreciate your help. If you get some time download the buttons and you will see what I mean.
    Thanks

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
    <style type="text/css">

    #package{border:1px solid black; margin-left:200px; margin-top:20px;width:400px;height:50px;}

    #home{margin-left:15px;display: inline;width: 107px;height: 23px;background: url("home.bmp") no-repeat 0 0;}
    #goals{margin-left:25px;display: inline;width: 107px;height: 23px;background: url("goals.bmp") no-repeat 0 0;}
    #void{margin-left:30px;display: inline;width: 107px;height: 23px;background: url("void.bmp") no-repeat 0 0;}


    #home:hover{background-position: 0 -26px;}
    #goals:hover{background-position: 0 -26px;}
    #void:hover{background-position: 0 -26px;}



    #home span{position: absolute; top: -999em;}
    #goals span{position: absolute; top: -999em;}
    #void span{position: absolute; top: -999em;}




    </style>
    <title></title>
    </head>
    <body>
    <div id="package"><a id="home" href="#" title="home" name="home"></a> <a id="goals" href="#" title="goals" name="goals"></a>

    <a id="void" href="#" title="goals" name="void"></a></div>
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Amphiluke View Post
    Setting width and height on inline elements does nothing unless they are absolutely positioned or floating. Try to use display:inline-block instead.
    Setting the width is the only way I can get them spaced out properly. If I insert what you suggested it does nothing?

  • #6
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Code:
    #home{margin-left:15px;display: inline-block;width: 107px;height: 23px;background: url("home.bmp") no-repeat 0 0;}
     #goals{margin-left:25px;display: inline-block;width: 107px;height: 23px;background: url("goals.bmp") no-repeat 0 0;}
     #void{margin-left:30px;display: inline-block;width: 107px;height: 23px;background: url("void.bmp") no-repeat 0 0;}
    This works for me (I have replaced display:inline with display:inline-block).


    P.S. If you want these styles to work also in IE6-7, you should set the hasLayout property on that elements.
    Last edited by Amphiluke; 11-17-2011 at 05:21 PM. Reason: remark for IE6-7
    I am still learning English

  • #7
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Amphiluke View Post
    Code:
    #home{margin-left:15px;display: inline-block;width: 107px;height: 23px;background: url("home.bmp") no-repeat 0 0;}
     #goals{margin-left:25px;display: inline-block;width: 107px;height: 23px;background: url("goals.bmp") no-repeat 0 0;}
     #void{margin-left:30px;display: inline-block;width: 107px;height: 23px;background: url("void.bmp") no-repeat 0 0;}
    This works for me (I have replaced display:inline with display:inline-block)
    Yes but it works exactly the same if I insert your code or without it? My problem is that when I add a doctype to the page everything dissapears? Can you assist me with that issue please. Please download what I have posted above and try it!
    I am gratefull for the help

  • #8
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Yes, I did downloaded your files and tested them in IE6-9, FF 5.0, Opera 9-11, Chrome and Safari. The buttons disappear unless I use inline-block instead of inline.

    Try it yourself
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     <html>
     <head>
     <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
     <style type="text/css">
    
     #package{border:1px solid black; margin-left:200px; margin-top:20px;width:400px;height:50px;}
    
     #home{margin-left:15px;display: inline-block;width: 107px;height: 23px;background: url("home.bmp") no-repeat 0 0;}
     #goals{margin-left:25px;display: inline-block;width: 107px;height: 23px;background: url("goals.bmp") no-repeat 0 0;}
     #void{margin-left:30px;display: inline-block;width: 107px;height: 23px;background: url("void.bmp") no-repeat 0 0;}
    
    
     #home:hover{background-position: 0 -26px;}
     #goals:hover{background-position: 0 -26px;}
     #void:hover{background-position: 0 -26px;}
    
    
    
     #home span{position: absolute; top: -999em;}
     #goals span{position: absolute; top: -999em;}
     #void span{position: absolute; top: -999em;}
    
    
    
    
     </style>
     <title></title>
     </head>
     <body>
     <div id="package"><a id="home" href="#" title="home" name="home"></a> <a id="goals" href="#" title="goals" name="goals"></a> 
    
     <a id="void" href="#" title="goals" name="void"></a></div>
     </body>
     </html>
    Last edited by Amphiluke; 11-17-2011 at 05:32 PM.
    I am still learning English

  • #9
    New Coder
    Join Date
    Mar 2011
    Posts
    96
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Amphiluke View Post
    Yes, I did downloaded your files and tested them in IE6-9, FF 5.0, Opera 9-11, Chrome and Safari. The buttons disappear unless I use inline-block instead of inline.

    Try it yourself
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     <html>
     <head>
     <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
     <style type="text/css">
    
     #package{border:1px solid black; margin-left:200px; margin-top:20px;width:400px;height:50px;}
    
     #home{margin-left:15px;display: inline-block;width: 107px;height: 23px;background: url("home.bmp") no-repeat 0 0;}
     #goals{margin-left:25px;display: inline-block;width: 107px;height: 23px;background: url("goals.bmp") no-repeat 0 0;}
     #void{margin-left:30px;display: inline-block;width: 107px;height: 23px;background: url("void.bmp") no-repeat 0 0;}
    
    
     #home:hover{background-position: 0 -26px;}
     #goals:hover{background-position: 0 -26px;}
     #void:hover{background-position: 0 -26px;}
    
    
    
     #home span{position: absolute; top: -999em;}
     #goals span{position: absolute; top: -999em;}
     #void span{position: absolute; top: -999em;}
    
    
    
    
     </style>
     <title></title>
     </head>
     <body>
     <div id="package"><a id="home" href="#" title="home" name="home"></a> <a id="goals" href="#" title="goals" name="goals"></a> 
    
     <a id="void" href="#" title="goals" name="void"></a></div>
     </body>
     </html>
    ---------------
    Ok, now I understand what you were talking about. Yes by adding the display:inline-block; it works 100%, with or without the DOCTYPE. Thank you very very much. I really appreciate your help. I was going crazy trying to figure it out.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •