October 22nd, 2005, 01:35 AM
|
|
|
|
Join Date: Apr 2007
Location: San Diego, CA USA
Posts: 129
Time spent in forums: < 1 sec
Reputation Power: 2
|
|
|
CSS Rendering Differently at Random
The following images are good (first) and bad (second). Sometimes it renders as shown in image 1, others as shown in image 2. This is the same page, using the same stylesheet - nothing changes aside from the page being refreshed. I can't figure it out, the HTML and CSS are 100% W3C Valid - no warnings even. Any help would be greatly appreciated.
Image 1 (Good)
Image 2 (Bad)
External Stylesheet (style.css)
Code:
html,body,div,input,SELECT,OPTION{
font-size:12px;}
a:link,a:visited,a:active{
color: black;
background: inherit;
text-decoration:none;}
a:hover{
text-decoration:underline;
background: inherit;
color:black;}
.contact_list{
float: left;
width: 200px;
height: 90%;
overflow:auto;}
.cardview{
float: left;
margin-left:25px;}
.cardtable{
width: 400px;
border: 1px solid #5555FF;
border-collapse: collapse;}
td{
vertical-align: top;
border: 0px;
padding: 0px;
font-size:12px;}
td.name{
background: #aaaaFF;
color: #000000;
font-size:14px;
font-weight: bold;
text-indent: 10px;}
td.address{
width:50%;}
td.messengers{
width:50%;}
.itemtitle{
background: #DDDDFF;
color: #000000;
font-weight: bold;
border: 0px;
padding: 3px;
margin: 0px;}
.aim{
background: #ffdd00;
color: #000000;
font-weight: bold;
border: 0px;
padding: 3px;
margin: 0px;}
.msn{
background: #b5efb5;
color: #000000;
font-weight: bold;
border: 0px;
padding: 3px;
margin: 0px;}
.yahoo{
background: #ff3333;
color: #000000;
font-weight: bold;
border: 0px;
padding: 3px;
margin: 0px;}
.info{
padding:5px;}
Page Source (index.php)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="?" method="post"><TABLE CLASS="cardtable">
<TR>
<TD CLASS="name" COLSPAN="2">
<INPUT TYPE="text" NAME="firstname" STYLE="width: 30%;">
<INPUT TYPE="text" NAME="lastname" STYLE="width: 40%;">
</TD>
</TR>
<TR>
<TD CLASS="address">
<DIV CLASS="itemtitle">
Address</DIV>
<DIV CLASS="info">
<INPUT TYPE="text" NAME="addressline1" STYLE="width: 100%;"><br>
<INPUT TYPE="text" NAME="addressline2" STYLE="width: 100%;"><br>
<INPUT TYPE="text" NAME="aptnumber" STYLE="width: 20%;"><br>
<INPUT TYPE="text" NAME="city" STYLE="width: 50%;">
<SELECT NAME="state" STYLE="width: 25%;">
<OPTION></OPTION>
<OPTION value="AL">AL</OPTION>
<OPTION value="AK">AK</OPTION>
<OPTION value="AZ">AZ</OPTION>
<OPTION value="AR">AR</OPTION>
<OPTION value="CA">CA</OPTION>
<OPTION value="CO">CO</OPTION>
<OPTION value="CT">CT</OPTION>
<OPTION value="DE">DE</OPTION>
<OPTION value="DC">DC</OPTION>
<OPTION value="FL">FL</OPTION>
<OPTION value="GA">GA</OPTION>
<OPTION value="HA">HA</OPTION>
<OPTION value="ID">ID</OPTION>
<OPTION value="IL">IL</OPTION>
<OPTION value="IN">IN</OPTION>
<OPTION value="IA">IA</OPTION>
<OPTION value="KS">KS</OPTION>
<OPTION value="KY">KY</OPTION>
<OPTION value="LA">LA</OPTION>
<OPTION value="ME">ME</OPTION>
<OPTION value="MD">MD</OPTION>
<OPTION value="MA">MA</OPTION>
<OPTION value="MI">MI</OPTION>
<OPTION value="MN">MN</OPTION>
<OPTION value="MS">MS</OPTION>
<OPTION value="MO">MO</OPTION>
<OPTION value="MT">MT</OPTION>
<OPTION value="NE">NE</OPTION>
<OPTION value="NV">NV</OPTION>
<OPTION value="NH">NH</OPTION>
<OPTION value="NJ">NJ</OPTION>
<OPTION value="NM">NM</OPTION>
<OPTION value="NY">NY</OPTION>
<OPTION value="NC">NC</OPTION>
<OPTION value="ND">ND</OPTION>
<OPTION value="OH">OH</OPTION>
<OPTION value="OK">OK</OPTION>
<OPTION value="OR">OR</OPTION>
<OPTION value="PA">PA</OPTION>
<OPTION value="RI">RI</OPTION>
<OPTION value="SC">SC</OPTION>
<OPTION value="SD">SD</OPTION>
<OPTION value="TN">TN</OPTION>
<OPTION value="TX">TX</OPTION>
<OPTION value="UT">UT</OPTION>
<OPTION value="VT">VT</OPTION>
<OPTION value="VA">VA</OPTION>
<OPTION value="WA">WA</OPTION>
<OPTION value="WV">WV</OPTION>
<OPTION value="WI">WI</OPTION>
<OPTION value="WY">WY</OPTION>
</SELECT>
<INPUT TYPE="text" NAME="zip" STYLE="width: 20%;">
</DIV>
</TD>
<TD CLASS="messengers">
<DIV CLASS="aim">
AIM
</DIV>
<DIV CLASS="info">
<INPUT TYPE="text" NAME="aim" STYLE="width: 100%;">
</DIV>
<DIV CLASS="msn">
MSN
</DIV>
<DIV CLASS="info">
<INPUT TYPE="text" NAME="msn" STYLE="width: 100%;">
</DIV>
<DIV CLASS="yahoo">
YAHOO
</DIV>
<DIV CLASS="info">
<INPUT TYPE="text" NAME="yahoo" STYLE="width: 100%;">
</DIV>
</TD>
</TR>
<TR>
<TD COLSPAN="2">
<DIV CLASS="itemtitle">
Birthday
</DIV>
<DIV CLASS="info">
<SELECT NAME="month" STYLE="width: 58%;">
<OPTION VALUE="00"></OPTION>
<OPTION value="01">01- January</OPTION>
<OPTION value="02">02- February</OPTION>
<OPTION value="03">03- March</OPTION>
<OPTION value="04">04- April</OPTION>
<OPTION value="05">05- May</OPTION>
<OPTION value="06">06- June</OPTION>
<OPTION value="07">07- July</OPTION>
<OPTION value="08">08- August</OPTION>
<OPTION value="09">09- September</OPTION>
<OPTION value="10">10- October</OPTION>
<OPTION value="11">11- November</OPTION>
<OPTION value="12">12- December</OPTION>
</SELECT>
<SELECT NAME="day" STYLE="width: 20%;">
<OPTION VALUE="00"></OPTION>
<OPTION value="01">01</OPTION>
<OPTION value="02">02</OPTION>
<OPTION value="03">03</OPTION>
<OPTION value="04">04</OPTION>
<OPTION value="05">05</OPTION>
<OPTION value="06">06</OPTION>
<OPTION value="07">07</OPTION>
<OPTION value="08">08</OPTION>
<OPTION value="09">09</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="11">11</OPTION>
<OPTION value="12">12</OPTION>
<OPTION value="13">13</OPTION>
<OPTION value="14">14</OPTION>
<OPTION value="15">15</OPTION>
<OPTION value="16">16</OPTION>
<OPTION value="17">17</OPTION>
<OPTION value="18">18</OPTION>
<OPTION value="19">19</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="21">21</OPTION>
<OPTION value="22">22</OPTION>
<OPTION value="23">23</OPTION>
<OPTION value="24">24</OPTION>
<OPTION value="25">25</OPTION>
<OPTION value="26">26</OPTION>
<OPTION value="27">27</OPTION>
<OPTION value="28">28</OPTION>
<OPTION value="29">29</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="31">31</OPTION>
</SELECT>
<SELECT NAME="year" STYLE="width: 20%;">
<OPTION VALUE="0000"></OPTION>
<OPTION value="2000">2000</OPTION>
<OPTION value="1999">1999</OPTION>
<OPTION value="1998">1998</OPTION>
<OPTION value="1997">1997</OPTION>
<OPTION value="1996">1996</OPTION>
<OPTION value="1995">1995</OPTION>
<OPTION value="1994">1994</OPTION>
<OPTION value="1993">1993</OPTION>
<OPTION value="1992">1992</OPTION>
<OPTION value="1991">1991</OPTION>
<OPTION value="1990">1990</OPTION>
<OPTION value="1989">1989</OPTION>
<OPTION value="1988">1988</OPTION>
<OPTION value="1987">1987</OPTION>
<OPTION value="1986">1986</OPTION>
<OPTION value="1985">1985</OPTION>
<OPTION value="1984">1984</OPTION>
<OPTION value="1983">1983</OPTION>
<OPTION value="1982">1982</OPTION>
<OPTION value="1981">1981</OPTION>
<OPTION value="1980">1980</OPTION>
<OPTION value="1979">1979</OPTION>
<OPTION value="1978">1978</OPTION>
<OPTION value="1977">1977</OPTION>
<OPTION value="1976">1976</OPTION>
<OPTION value="1975">1975</OPTION>
<OPTION value="1974">1974</OPTION>
<OPTION value="1973">1973</OPTION>
<OPTION value="1972">1972</OPTION>
<OPTION value="1971">1971</OPTION>
<OPTION value="1970">1970</OPTION>
</SELECT>
</DIV>
</TD>
</TR>
<TR>
<TD COLSPAN="2">
<DIV CLASS="itemtitle">
E-Mail Address
</DIV>
<DIV CLASS="info">
<INPUT TYPE="text" NAME="email" STYLE="width: 100%;">
</DIV>
</TD>
</TR>
<TR>
<TD>
<DIV CLASS="itemtitle">
Cell Phone
</DIV>
<DIV CLASS="info">
<INPUT TYPE="text" NAME="cellphone" STYLE="width: 100%;">
</DIV>
</TD>
<TD>
<DIV CLASS="itemtitle">
Land Line
</DIV>
<DIV CLASS="info">
<INPUT TYPE="text" NAME="landphone" STYLE="width: 100%;">
</DIV>
</TD>
</TR>
<TR>
<TD COLSPAN="2" STYLE="text-align:center;">
<INPUT TYPE="SUBMIT" NAME="add" VALUE="Add Contact">
</TD>
</TR>
</TABLE>
</form>
</body>
</html>
|
Codewalkers Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
