Proper CSS syntax
Posted: Sat May 05, 2012 7:50 am
Hello Everyone:
I've got a problem with my CSS styling. It is probably syntax, but I'm not sure. In order to isolate the problem, I pulled the applicable CSS and corresponding html elements into a test file. Then I eliminated all links to my two css files. So... whatever is going on is directly related to the following CSS script:
You will notice that I'm using solid brown as a border and yellow background. This is to ensure that my elements are actually reading the CSS.
Now for the problem
Even though my label is set for width: 160px;, it is NOT displaying that width. If I change the width setting it does NOTHING to the display. The label ONLY displays as much width as the enclosed text needs. NOTHING MORE, even when I change width:160px; to min-width: 160px;.
In addition - and probably more important - the input[type=text] loses its height settings when used in conjunction with other elements. Specifically, the <div id="control_bx"> block will be used at the bottom of a table displaying the user's email address book. There will be an input for every column of the address book table, so the user can add new contacts to his/her address book.
I realize you can not guide me on possible conflicts with other elements without applicable script. So.. following is the needed script:
table.css
script for data table
The data is flowing into the table beautifully. The table scrolls, and leaves my headings and the l_name input element at the bottom of the table in place. But, the <input type = "text" name ='l_name'></input> loses height settings. It is picking up the background setting and the border setting, but it loses its height setting.
So... where am I going wrong with the CSS???
Thanks in advance - Pavilion
I've got a problem with my CSS styling. It is probably syntax, but I'm not sure. In order to isolate the problem, I pulled the applicable CSS and corresponding html elements into a test file. Then I eliminated all links to my two css files. So... whatever is going on is directly related to the following CSS script:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<style TYPE="text/css">
#control_bx
{
float:left;
width: 160px;
height:relative;
border: solid brown;
position:relative;
margin-left:18px;
margin-top:2px;
margin-bottom:2px;
}
label
{
background:#754f31;
border: solid brown;
color:#fff;
height: 14px;
width: 160px;
text-align:left;
float: top;
}
input[type=text]
{
background-color:yellow;
border: solid brown;
width: 155px;
height: 14px;
float: left;
float: bottom;
margin-right: 2px;
}
</style>
</head>
<body>
<form>
<div id="control_bx">
<label>New Last Name</label>
<input type="text" name='l_name' value='Last'></input>
</div>
</form>
</body>
</html>Now for the problem
Even though my label is set for width: 160px;, it is NOT displaying that width. If I change the width setting it does NOTHING to the display. The label ONLY displays as much width as the enclosed text needs. NOTHING MORE, even when I change width:160px; to min-width: 160px;.
In addition - and probably more important - the input[type=text] loses its height settings when used in conjunction with other elements. Specifically, the <div id="control_bx"> block will be used at the bottom of a table displaying the user's email address book. There will be an input for every column of the address book table, so the user can add new contacts to his/her address book.
I realize you can not guide me on possible conflicts with other elements without applicable script. So.. following is the needed script:
table.css
Code: Select all
.outer {
float:right;
margin-right:5%;
border-radius: 15px;
border: 3px solid transparent;
border-color: #754f31;
color:black;
box-shadow:
inset 0 0 12px #754f31, /* Inset shadow */
0 0 12px #f7f5e4, /* Outset shadow */
inset -1500px 0 0 #fff; /* The background color */
position:relative;
padding:4em 0em 1em 0;
min-width:40%;
max-width:70%;
}
.innera { /* This section is wraps the rows and scrolls*/
margin-left:18px;
margin-right:12px;
overflow-y:scroll; /* overflow pushes the scrolling */
overflow-x:hidden;
width:relative;
min-height:5em; /* Height of scrolled area.*/
max-height:25em;
background:#fff;
border:#fff;
}
.outer table caption {
margin: 12px;
position:absolute;
width:80%;
text-align:center;
top:0;
left:0;
height:1.5em;
background:#fff;
border:0.1em solid #fff;
color:black;
}
.outer thead tr { /* header section - brown.*/
margin-top:12px;
margin-left:18px;
position:absolute;
top:1.5em;
height:1.5em;
width:80%;
left:0;
background:#754f31;
}
.outer tfoot td {
position:absolute;
margin-bottom:12px;
margin-left:18px;
width:90%;
background:#fff;
bottom:0;
left:0;
}
.outer td
{
background:#eee; /* Controls color of table cells.*/
width:160px; /* Should control width, but I can't force a fixed width. */
margin-right:2px;
text-align:left;
overflow:hidden;
}
.outer th
{
background:#754f31; /* Header brown and 1st column brown */
color:#fff;
width:160px;
margin-right:2px;
text-align:left;
}
.footer_div
{
position:relative;
margin-left:18px;
margin-top:2px;
margin-bottom:2px;
width:80%;
background:#eee;
color:#eee;
bottom:1;
left:1;
}
#control_bx
{
float:left;
width: 160px;
height:relative;
border: solid brown;
position:relative;
margin-left:18px;
margin-top:2px;
}
label
{
background:#754f31;
border: solid brown;
color:#fff;
height: 14px;
text-align:left;
float: top;
}
input[type=text]
{
background-color:yellow;
border: solid brown;
width: 155px;
height: 16px;
float: left;
float: bottom;
}Code: Select all
<div class="outer">
<div class="innera">
<table name='addressbk' border='0'>
<caption>EMAIL ADDRESS BOOK</caption>
<thead>
<tr>
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope='col' style='width:270px'>Email</th>
<th scope="col">Desk Phone</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<?php
foreach($results as $row)
{
$bk_owner = $row['BookOwner'];
$addrss_owner = $row['AddressOwner'];
$f_name = $row['FName'];
$l_name = $row['LName'];
$email = $row['EmailAddress'];
$d_phone = $row['DeskPhone'];
$ext = $row['Ext'];
$cell = $row['CellPhone'];
echo "<tr>";
echo "<td>".$l_name ."</td>";
echo "<td>".$f_name ."</td>";
echo "<td>".$email ."</td>";
echo "<td>".$d_phone ."</td>";
echo "<td>".$ext."</td>";
echo "<td>".$cell."</td>";
echo "</tr>";
}
echo"</tbody>";
?>
</table>
</div>
<div id="control_bx">
<label>New Last Name</label>
<input type="text" name='l_name' value='Last'></input>
</div>
</div>So... where am I going wrong with the CSS???
Thanks in advance - Pavilion