By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,446 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,446 IT Pros & Developers. It's quick & easy.

Width disappears when DOCTYPE added

P: n/a
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.

Jul 20 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
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/>
Jul 20 '05 #2

P: n/a

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

Jul 20 '05 #3

P: n/a
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.
Jul 20 '05 #4

P: n/a

"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>)


Jul 20 '05 #5

P: n/a
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/>
Jul 20 '05 #6

P: n/a

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

Jul 20 '05 #7

P: n/a

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

Jul 20 '05 #8

P: n/a
"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
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.