Proper CSS syntax

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Proper CSS syntax

Post by Pavilion »

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:

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

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;
}
script for data table

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>
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
User avatar
tr0gd0rr
Forum Contributor
Posts: 305
Joined: Thu May 11, 2006 8:58 pm
Location: Utah, USA

Re: Proper CSS syntax

Post by tr0gd0rr »

`label` elements are inline by default. Inline elements ignore some properties such as `width`, `height`, and `padding`. You probably want to use `display:block` with a float or perhaps `display:inline-block`. IIRC the latter isn't well supported in Internet Explorer.

There is no such thing as `float:top` or `float:bottom`. You can use Firebug or other dev tools to see what styles are being ignored or overridden. That will help you find any other problems.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Proper CSS syntax

Post by Celauran »

Doesn't floating an element automatically switch its display to block?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Proper CSS syntax

Post by pickle »

Celauran wrote:Doesn't floating an element automatically switch its display to block?
No, I believe they become "inline".
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Proper CSS syntax

Post by Pavilion »

Thanks everyone:

I did get the label thing figured out. Now onto bigger CSS problems.

I'm having some problems with CSS formatting as it is displayed in IE. Following is the applicable block of CSS:

Code: Select all

.leftContainer
{
	float:left;
	margin-top:2%;
	margin-left:5%;
	min-width: 10%;
	max-width: 25%;
	border-radius: 15px; 
    border: 3px solid transparent;
    border-color: #754f31; */
    color:black;
    padding: 20px 20px;
    box-shadow:
		inset 0 0 12px #754f31, /* Inset shadow */
		0 0 12px #f7f5e4, /* Outset shadow */
		inset -999px 0 0 #fff; /* The background color */
}
Here is how it displays in Firefox:
In Firefox
In Firefox

Here is how it displays in IE:
CSS_2.jpg
How can I "fix" the CSS????

Thanks in advance:

Pavilion
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Proper CSS syntax

Post by pickle »

IE doesn't necessarily support all CSS. box-shadow and border-radius are properties that aren't supported in IE6/7/8 (and possibly 9)
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Proper CSS syntax

Post by Pavilion »

pickle wrote:IE doesn't necessarily support all CSS. box-shadow and border-radius are properties that aren't supported in IE6/7/8 (and possibly 9)
And there is no work around?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Proper CSS syntax

Post by pickle »

Not really. Google has some info on the subject.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Proper CSS syntax

Post by Pavilion »

OK....

Is there anything I can do about the way the border acts in the following screen shots?

In Firefox:
CSS_3.jpg
In IE:
CSS_4.jpg
Applicable CSS follows:

Code: Select all

{
	border-radius: 15px; 
    border: 3px solid transparent;
    border-color: #754f31;
    color:black;
    padding: 20px 20px;
    box-shadow:
		inset 0 0 12px #754f31, /* Inset shadow */
		0 0 12px #f7f5e4, /* Outset shadow */
		inset -999px 0 0 #fff; /* The background color */
}
Any advice you have to help me deal with IE's imperfections would be greatly appreciated.

Thanks in advance - Pavilion
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Proper CSS syntax

Post by Celauran »

Create separate style sheets for IE, perhaps going so far as creating a separate sheet for each major version.

Code: Select all

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/path/to/file" />
<!--[endif]-->
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Proper CSS syntax

Post by Pavilion »

Celauran wrote:Create separate style sheets for IE, perhaps going so far as creating a separate sheet for each major version.

Code: Select all

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/path/to/file" />
<!--[endif]-->
OK - that's an approach. But if an element ID or class links to CSS styling, then how does the element ID or class know to reference both CSS files?
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Proper CSS syntax

Post by Celauran »

Only IE understands the if syntax above, so other browsers will ignore that sheet altogether. Place it after your normal stylesheets since, if the same rule exists twice, the latter of the two is applied.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Proper CSS syntax

Post by Pavilion »

Celauran wrote:Only IE understands the if syntax above, so other browsers will ignore that sheet altogether. Place it after your normal stylesheets since, if the same rule exists twice, the latter of the two is applied.
Thank you Celauran - this is interesting information to have. Now - for another question about element IDs and CSS. In this post you stated:
IDs are meant to be unique
So much of CSS styling is id related. Styles are either picked up through class= or id=. If IDs are meant to be unique - why are they attached to styling elements. In short, if the advantage of using CSS styling sheets is to apply the same style uniformly, throughout an application, then why are styling elements applied to html elements via IDs?

This question has come to the fore in my mind recently. As I want to create effective styling sheets moving forward, I've been trying to figure out the difference between styling by class and styling by ID.

Thanks again - Pavilioni
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Proper CSS syntax

Post by Celauran »

Pavilion wrote:if the advantage of using CSS styling sheets is to apply the same style uniformly, throughout an application, then why are styling elements applied to html elements via IDs?
The point of CSS is to separate content and presentation.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Proper CSS syntax

Post by Pavilion »

Celauran wrote:
Pavilion wrote:if the advantage of using CSS styling sheets is to apply the same style uniformly, throughout an application, then why are styling elements applied to html elements via IDs?
The point of CSS is to separate content and presentation.
If the only point of CSS is to separate content and presentation, then I have to ask .. "WHY"?

I can understand uniformity, the ability to make adjustments to presentation by simply adjusting global CSS styles. That makes sense to me. But ... if I'm reading your comment correctly... applying styles to unique element IDs offers no advantage to applying inline styling. At the end of the day, what is the difference if a unique CSS style is created, or if the style is applied inline?

Celauran - I've been playing at creating some necessary CSS styles for my application. This whole thing of whether to apply the style via a class or an id is directly applicable to these efforts. So.. this conversation is very timely.

Thanks - Pavilion
Post Reply