...

View Full Version : Buttons wont work with DOCTYPE ?



SHEPME
11-17-2011, 05:50 PM
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

VIPStephan
11-17-2011, 05:59 PM
I can’t currently be bothered to download anything and assemble it manually.
First thing that comes to mind is: validate your HTML (http://validator.w3.org/). 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.

Amphiluke
11-17-2011, 06:07 PM
Setting width and height on inline elements does nothing unless they are absolutely positioned or floating. Try to use display:inline-block instead.

SHEPME
11-17-2011, 06:07 PM
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>

SHEPME
11-17-2011, 06:12 PM
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?

Amphiluke
11-17-2011, 06:16 PM
#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.

SHEPME
11-17-2011, 06:20 PM
#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

Amphiluke
11-17-2011, 06:30 PM
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

<!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>

SHEPME
11-17-2011, 06:48 PM
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

<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum