Text element's width is too wide when doctype is set to XHTML

mszanto

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
perfectly regardless of which doctype you use.

I'm really looking for a better solution than to set the doctype to
HTML 4.0. Or perhaps is this just another anomaly in IE?

Please note that I have included both doc type headers. The first
doctype header is always used so just reverse the order to try each
one out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table>
<tr>
<td width="200">
<input type="text" style="width:100%" />
</td>
</tr>
</table>
</body>
</html>

Mar 23 '07 #1

Subscribe Post Reply

1639

bruce barker

you just need to understand html 4.0. object have a width, border and
margin. the border and margin extend beyond the width. so if you make an
object 100px wide with a 2px margin and a 2px border it will be 108px
wide. if you make the width 100% (of the parent), with margin and border
it will be 8px wider than the parent. now if the parent has padding the
control is offset and will extend beyond the parent unless overflow is set.

because you are not setting the borders, margins, and padding, you get
the default, which differs by browser.

-- bruce (sqlwork.com)

ms*****@hotmail.com wrote:

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
perfectly regardless of which doctype you use.

I'm really looking for a better solution than to set the doctype to
HTML 4.0. Or perhaps is this just another anomaly in IE?

Please note that I have included both doc type headers. The first
doctype header is always used so just reverse the order to try each
one out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table>
<tr>
<td width="200">
<input type="text" style="width:100%" />
</td>
</tr>
</table>
</body>
</html>

Mar 23 '07 #2

mszanto

I've done a bit more research, and understand what you mean, but that
that really only applies for XHTML doctypes. HTML doc types
automatically take these other factors into account when determining
the display width of an object whose style width is set to 100%.

Apparently XHTML uses a strict box model which really causes a lot of
aggravation when laying out a web page. Another example being that you
can't set the height of a Table inline, you have to set it in the
style sheet. I'm okay with that as long as the XHTML doctype is used
in the appropriate situations.

Having said all that, why oh why did Microsoft decide to set the
default doctype to XHTML for new WebForms in VS 2005. That is
completely idiotic considering the aggravation it will cause for the
majority of developers.

mike

Mar 23 '07 #3

Similar topics

xhtml <body> w/ text() nodes-- why?

by: Gordon - Adelphia | last post by:

I have a question regarding xhtml. Why, why, why does the ELEMENT <body> allow “unblocked” text. HTML does not (though, most browsers will render). Xhtml (transitional) however allows text nodes...

.NET Framework

min-width in IE6?

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

HTML / CSS

text box too wide when width set to 100%

by: Piers Lawson | last post by:

If the following is displayed in IE6 or FireFox, the text box forces the second DIV to expand beyond its 15em width. Is there a way to have the text box fit within the DIV (preferably without...

HTML / CSS

How to add a text into a table as e.g. <h5>

by: Stefan Mueller | last post by:

With the following code I can add a new row to an existing table. That really works great. Many thanks to all who helped me so far. But my problem is that the added cells do somehow not have the...

Javascript

Why is the table less wide than the div when they both have the same width?

by: Robert | last post by:

Probably something simple i'm overlooking, taking the below html and css style settings, when you view in a browser (IE or Mozilla for example), the table is a tiny bit less wide than the div. Yet...

HTML / CSS

vert and hor centering text in <div>

by: John Pote | last post by:

1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...

HTML / CSS

Container in text flow needs to have block elements

by: David Golightly | last post by:

I'm taking a stab at making CSS sparklines - see http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1&topic= <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC...

HTML / CSS

Hide input text

by: C.W.Holeman II | last post by:

I what to hide an input element and the following text. I have the selector for the input working and just need to grab the text following it. CSS: form{ display:table; text-align:center; }

HTML / CSS

IE6 not displaying text correctly - IE 7 & Firefox 3 are fine!

by: littlealex | last post by:

IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

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

General

Problem With Comparison Operator <=> in G++

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

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server