PDA

View Full Version : strange IE rendering problem

Wee Bubba
02-03-2006, 12:43 AM
this is frustrating me. can somebody pls explain to me why the following HTML table stretches off the screen in 800 by 600 in IE6, when it is ok in Firefox? the table is specified 100% width in CSS and the text is not too long that it should cause the table to stretch, so i dont understand. many thanks

here is my HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML><HEAD>
<LINK href="k2.css" type=text/css rel=stylesheet>

<STYLE type=text/css>INPUT {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}

SELECT {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}

TABLE {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}

TEXTAREA {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
</STYLE>
</HEAD>

<BODY>

<FORM>

<TABLE class=table1>

<TBODY>

<TR>

<TD colSpan=2><I>Your password can be between 8 and 16 characters in

length and must contain a mixture of UPPERCASE, lowercase and digits

(0-9)</I></TD></TR>

<TR>

<TD>Please enter your current password:</TD>

<TD width="100%">PASSWORD</TD></TR>

<TR>

<TD>Please enter your NEW password:</TD>

<TD>PASSWORD</TD></TR>

<TR>

<TD>Please re-enter your NEW password:</TD>

<TD>PASSWORD</TD></TR></TBODY></TABLE>

</FORM></BODY></HTML>

here is my css

body
{
background-color: White;
font-family: Verdana, Arial, Tahoma, sans-serif, Helvetica;
padding: 0px;
margin: 10px;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
table.td
{
padding: 0;
}
.normal
{
font-weight: normal;
}
.strong
{
font-weight: bold;
}
.table1
{
width: 100%;
background-color: #F4F3EE;
border: solid 1px #7BA4E0;
margin-bottom: -1px;
}
.table1 td
{
padding: 5px;
white-space: nowrap;
}
mlse
02-03-2006, 07:06 PM
Could be the width thing on the table ... try display:block?
mark87
02-03-2006, 07:14 PM
Might be the fact you have margin: 10px; on the body... 100% + 20px means it'll go off the page.
mlse
02-03-2006, 07:19 PM
Also, just had a play - it works when white-space:nowrap is commented out, but that screws up the text in the left-hand column (because of colspan = 2) - fixed when you take the title outside, I think.
mlse
02-03-2006, 07:28 PM
Fixed it:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML><HEAD>
<LINK href="k2.css" type=text/css rel=stylesheet>

<STYLE type=text/css>INPUT {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}

SELECT {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}

TABLE {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}

TEXTAREA {
FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
</STYLE>
</HEAD>

<BODY>

<FORM>

<TABLE class=table1>

<TBODY>

<TR>

<TD colSpan=2><I>Your password can be between 8 and 16 characters in

length and must contain a mixture of UPPERCASE, lowercase and digits

(0-9)</I></TD></TR>

<TR class="nowrap">

<TD>Please enter your current password:</TD>

<TD width="100%">PASSWORD</TD></TR>

<TR class="nowrap">

<TD>Please enter your NEW password:</TD>

<TD>PASSWORD</TD></TR>

<TR class="nowrap">

<TD>Please re-enter your NEW password:</TD>

<TD>PASSWORD</TD></TR></TBODY></TABLE>

</FORM></BODY></HTML>


CSS:

body
{
background-color: White;
font-family: Verdana, Arial, Tahoma, sans-serif, Helvetica;
padding: 0px;
margin: 10px;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
table.td
{
padding: 0;
}
.normal
{
font-weight: normal;
}
.strong
{
font-weight: bold;
}
.table1
{
width: 100%;
background-color: #F4F3EE;
border: solid 1px #7BA4E0;
margin-bottom: -1px;
}

.table1 tr.nowrap td {
white-space:nowrap;
}

.table1 td
{
padding: 5px;
}


:D