Width disappears when DOCTYPE added

[Harlan Messinger]

I created a page, currently viewable at

http://mywebpages.comcast.net/hmessi...sbuttons1.html

that displays a couple of buttons simulated with styles applied to <span>
tags. The buttons have two classes applied to them, one of which has the
sole effect of setting a fixed width of 125px.

Then I added a DOCTYPE tag at the top of the file. In IE6, this killed the
width and padding on the buttons, as seen at
http://mywebpages.comcast.net/hmessi...sbuttons2.html

This happens for both strict and transitional DTDs. The HTML on the page
does pass the W3C HTML validator, and the CSS file passes the W3C CSS
validator.

I see that Firebird ignores the width and padding for both pages.

I'm gathering that there's no way to fix the width of inline buttons created
in this way. (The width and padding are restored if I change the <span> tags
to <div>, of course, but then I'm restricted to non-inline use of this
trick.) Is that right?

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[David Dorward]

Harlan Messinger wrote:

<span> tags.
fixed width of 125px. Then I added a DOCTYPE tag at the top of the file. In IE6, this killed the
width and padding on the buttons, as seen at
http://mywebpages.comcast.net/hmessi...sbuttons2.html
The Doctype takes MSIE out of "Emulate the stupid mistakes that IE 5 made
mode", one of these was allowing width to be set on inline elements.

Its a pity MSIE doesn't yet support inline-block.
I see that Firebird ignores the width and padding for both pages.
Firebird doesn't have that IE 5.x bug.
I'm gathering that there's no way to fix the width of inline buttons
created in this way. (The width and padding are restored if I change the
<span> tags to <div>, of course, but then I'm restricted to non-inline use
of this trick.) Is that right?

Yes, you probably want something from the horizontal section of
<http://css.maxdesign.com.au/listamatic/>

--
David Dorward <http://dorward.me.uk/>

[Harlan Messinger]

"David Dorward" <do*****@yahoo.com> wrote in message
news:bt*******************@news.demon.co.uk...

Harlan Messinger wrote:

<span> tags.
fixed width of 125px.

Then I added a DOCTYPE tag at the top of the file. In IE6, this killed the width and padding on the buttons, as seen at
http://mywebpages.comcast.net/hmessi...sbuttons2.html

The Doctype takes MSIE out of "Emulate the stupid mistakes that IE 5 made
mode", one of these was allowing width to be set on inline elements.

Its a pity MSIE doesn't yet support inline-block.

I see that Firebird ignores the width and padding for both pages.

Firebird doesn't have that IE 5.x bug.

I'm gathering that there's no way to fix the width of inline buttons
created in this way. (The width and padding are restored if I change the
<span> tags to <div>, of course, but then I'm restricted to non-inline use of this trick.) Is that right?

Yes, you probably want something from the horizontal section of
<http://css.maxdesign.com.au/listamatic/>

Nifty! Not as flexible, since not inlineable, but very nice. Also, it gives
me the answer to my question of the other day about the proper way to make
the bottom of a containing element clear the bottom of its floating
children--except that none of the browsers I have implements :after yet. At
least, the content="." part isn't showing up in any of them.

[Beauregard T. Shagnasty]

Quoth the raven named Harlan Messinger:

I created a page, currently viewable at

http://mywebpages.comcast.net/hmessi...sbuttons1.html

....

David already explained about the size bug, but I have a question as
to why you need the cumbersome JavaScript for the rollover.

CSS can do that as well. See this site of mine; the buttons are just a
styled list.
http://www.freezeblock.com/

(Please don't complain about the colors. The client's wife chose them,
and I'm not allowed to change. <g>)

--
-bts
-This space intentionally left blank.

[Harlan Messinger]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:lU********************@twister.nyroc.rr.com.. .

Quoth the raven named Harlan Messinger:

I created a page, currently viewable at

http://mywebpages.comcast.net/hmessi...sbuttons1.html ...

David already explained about the size bug, but I have a question as
to why you need the cumbersome JavaScript for the rollover.

CSS can do that as well. See this site of mine; the buttons are just a
styled list.

Absolutely, for rollover only, :hover is fine. But you need script for
mousedown and mouseup, and as long as I was doing that anyway, it was no
trouble to do it for mouseover and mouseout as well. In fact, it would be
necessary if I were to implemented a more elaborate version as described in
my previous post.
http://www.freezeblock.com/

(Please don't complain about the colors. The client's wife chose them,
and I'm not allowed to change. <g>)

[Anne van Kesteren]

Harlan Messinger wrote:

Absolutely, for rollover only, :hover is fine. But you need script for
mousedown and mouseup, and as long as I was doing that anyway, it was no
trouble to do it for mouseover and mouseout as well. In fact, it would be
necessary if I were to implemented a more elaborate version as described in
my previous post.

":active" (ok, mouseup is impossible)

AND

<http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/>

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[Harlan Messinger]

"Anne van Kesteren" <ma**@annevankesteren.nl> wrote in message
news:bt**********@reader11.wxs.nl...

Harlan Messinger wrote:

Absolutely, for rollover only, :hover is fine. But you need script for
mousedown and mouseup, and as long as I was doing that anyway, it was no
trouble to do it for mouseover and mouseout as well. In fact, it would be necessary if I were to implemented a more elaborate version as described in my previous post.
":active" (ok, mouseup is impossible)

Besides which, if you hit the Back button after reaching the next page, the
button will still be inset.

AND

<http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/>

Rubs me the wrong way, somehow!

[Harlan Messinger]

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:bt************@ID-114100.news.uni-berlin.de...

"Anne van Kesteren" <ma**@annevankesteren.nl> wrote in message
news:bt**********@reader11.wxs.nl...

AND

<http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/>

Rubs me the wrong way, somehow!

Besides which, now that I've tried it, it's VERY slow in IE6, though it's
snappy enough in Opera and Firebird .

[Eric B. Bednarz]

"Harlan Messinger" <h.*********@comcast.net> writes:

Then I added a DOCTYPE tag at the top of the file.
[0] There is no 'DOCTYPE *tag*'.

Rule of thumb: if you think there is, omit it.
This happens for both strict and transitional DTDs.
Point-and-drool malware like MSIE, Mozilla and Opera typically doesn't
know or care about [0] either and just does something random whenever
pointy brackets are proceeded by exclamation marks.
I'm gathering that there's no way to fix the width of inline buttons created
in this way. (The width and padding are restored if I change the <span> tags
to <div>, of course, but then I'm restricted to non-inline use of this
trick.) Is that right?

| 'width'
| [...]
| Applies to: all elements but non-replaced inline elements, [...]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<http://localhost/rtfm/w3c/css2/visudet.html#propdef-width>

(or wherever you keep it :)
--
| ) 111010111011 | http://bednarz.nl/
-(
| ) Distribute me: http://binaries.bednarz.nl/mp3/aisha