Buttons wont work with DOCTYPE ?

SHEPME

11-17-2011, 04: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, 04: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, 05: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, 05: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, 05: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, 05: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, 05: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, 05: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, 05:48 PM