473,881 Members | 1,561 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Width disappears when DOCTYPE added

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
8 1995
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.c om.au/listamatic/>

--
David Dorward <http://dorward.me.uk/>
Jul 20 '05 #2

"David Dorward" <do*****@yahoo. com> wrote in message
news:bt******** ***********@new s.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.c om.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
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

"Beauregard T. Shagnasty" <a.*********@ex ample.invalid> wrote in message
news:lU******** ************@tw ister.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
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/cssnopreloadrol lovers/>

--
Anne van Kesteren
<http://www.annevankest eren.nl/>
Jul 20 '05 #6

"Anne van Kesteren" <ma**@annevanke steren.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/cssnopreloadrol lovers/>


Rubs me the wrong way, somehow!

Jul 20 '05 #7

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

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

<http://www.pixy.cz/blogg/clanky/cssnopreloadrol lovers/>


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
"Harlan Messinger" <h.*********@co mcast.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#pr opdef-width>

(or wherever you keep it :)
--
| ) 111010111011 | http://bednarz.nl/
-(
| ) Distribute me: http://binaries.bednarz.nl/mp3/aisha
Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
22360
by: Holli Graham | last post by:
Hi all, I'm checking to see if anyone knows of a hack or trick or whatever to get IE6 to keep a minimum width of a tableless page. I have the entire page content wrapped in a container div called bodywrap that sets the min-width to 760px and I added the spacer.gif for IE5.x and NN4 in the body of the html and added the trick suggested here: http://www.svendtofte.com/code/max_width_in_ie The trick worked when IE6 was running in quirks...
2
16840
by: Clemens Quoss | last post by:
Hello, I just encountered a strange thing when switching the doctype on and off in the following html testpage (with IE 6.0): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
3
2189
by: stan | last post by:
I have code that produces 5 boxes across the screen width. So far I have only tested it in IE 6 and NS 8. It works in IE, but in NS I am not able to fit in the 5th box. I am using two different style sheets, one for IE and on e for NS. The box widths are set to 20%. I would appreciate suggestions on how to get the 5 boxes to fit the screen
50
6105
by: Shadow Lynx | last post by:
Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Strict kills my widths!</title> </head> <body> <table style="width:400px; table-layout:fixed;">
3
2346
by: Louis. | last post by:
Hello, I have a cell that I making 200px wide with a style sheet. I am setting the padding-left to 40px and the padding-right to 0px. I have 160x3 px gif in the cell. There should be no space between the gif and the right side of the cell (40 + 160 = 200). http://www.netadvies.nl/test/index.html http://www.netadvies.nl/test/layout.css http://www.netadvies.nl/test/160x3.gif
2
1667
by: mszanto | last post by:
I've read a bunch of posts on this and none of the answers are legitimate (IMHO) so I thought I'd throw it out there again. Using the html code below, if you set the doctype to HTML 4.0, and view the page in IE 6 or 7, the text element fills the table cell perfectly. If you change the doctype to XHTML 1.0, the text element extends beyond the width of the table cell. On the other hand, if you view the page in FireFox, the page displays...
5
11029
by: Taras_96 | last post by:
Hi everyone, Can anyone tell me why the top paragraph block stretches across the screen (as you would expect), while the bottom div doesn't stretch across the entire screen? When I set the width to 100% (which I interpret as saying 'make this width the same width as the parent (which is the entire screen)) the div is made just wide enough to fit it's contents, and if I decrease the value for the width, the width of the div stretches?!
1
2821
by: =?Utf-8?B?d2NsYXJrZTEwMQ==?= | last post by:
Hello all, I've created the following ASP.NET code sample which, when rendered, displays a 100% textbox within a single cell table. The problem is that Internet Explorer (6 or 7) truncates the right-hand edge of the textbox. The textbox renders correctly on Firefox and Netscape. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="Content_test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
4
4340
by: Christopera | last post by:
Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are then smaller than the website is wide. I have tried fixed positioning but then i get the dreaded overlap when the browser is smaller than the website. Absolute positioning gets rid of the overlap but then brings on the width issue. Is there a way to...
0
9927
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9776
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11098
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10401
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9552
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7953
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5781
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5977
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4597
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.