CSS - Css Format

Hi. How do I know the shorthand property value format?

For example:

p { margin: 1em 2em 2em 1em; }

How do I know which one is top, bottom, left, right?

Can u do this as well?

p { margin: 1em 2em; }

What about other property do they always follow the same format and order?

Any help will be great.

Thanks.

Hwo can a drop menu display individual colors as actual labels?

ex #' to be used as css:

value Label
1 #FFFFCC
2 #9999FF
3 #E2D9FF

The #'s can be stored as table column values in the 'Color' table, but I can figure that out later. Right now I'm working on the initial insert into this Color table so its manual.
(but can css be called on the page from dynamic values?)

I need to know how to format a selection list, what I want to do is change the color of the arrow how do I do this?

Tim

Lately, I see articles everywhere telling us to ditch tables and use CSS to position forms. I don't necessarily have a problem with using CSS although I'm admitedly a bit new to using it for anything more than basics like sizing, color, borders and backgrounds. But my basic question is why ditch the tables?

Tables have been around since the inception of html. They work with any browser you care to name and the provide a valid function allowing developers to position things on the screen in a pleasing manner. The flow of data in tables is simple, so the developer and usually the user can predict where the cursor will go when the user hits the tab key. There are certainly problems with tables, such as text wrapping or being truncated when the screen resolution is lower than the developer designed for and the positioning is not as clean as absolute positioning with CSS.

Absolute positioning with CSS can lead to its own problems though. If the user has fonts set to a different size or odd video settings the size of the object positioned may not be large enough to display the text. This can cause object to overlap making the page unreadable.

It may sound as if I'm just trying to hang on to the old way of doing things, and there may be a bit of truth in that, but more I'm asking for valid reasons to change the way I do things. I actually like finding new ways of doing things but there has to be a benefit to it. How will swithing to CSS layout instead of tables make my pages better for my users or easier to develop and maintain for me?

I look forward to your responses.

Suppose I have a few tables I want to format vertically. If they are quite wide, chances are simply doing <table id="a">...</table> this will probably happen automatically. Ever, with a wide enough screen they might format horizontally.

To fix this, I could to the following: <table id="a">...</table><br><table id="b">...</table><br><table id="c">...</table> but unfortunately, <br> also adds extra unwanted spacing.

Is there a was to CSS the <br> tag to avoid this, or is there a CSS method to indicate that each successive table should be below the last, not to the right?


Skolem

I am trying to define 5 different types of links in one style sheet. I have three questions.

1. How would I declare it in the style sheet? I have tried the following, which does not work:

a.typea {
font-weight: bold;
color: #E8C960;
text-decoration: underline;
}

2. How would I refer to the class in the HTML? I have tried the following which does not work:

<a href="link.htm" class="typea">Some Link</a>

and

<span class="typea"><a href="link.htm">Some Link</a>

3. Can you assign a rollover class to link classes? I tried the following which does not work:

a.typea:hover {
font-weight: bold;
color: #06FF00;
text-decoration: none;
}

Any help on this is appreciated. I can't be limited to only one type of link throughout an entire dynamic website.

D

Hi All,

I am trying to echo a table that I have given the following css style:
PHP Code:
 table.paginationtable {
cell-spacing: 1px;
border: 1px solid #000;
}

table.paginationtable td.location {
background-color: #6699FF;
color: #FFF;
font-family: arial, verdana;
font-size: 11px;
padding: 5px;
font-weight: normal;
line-height: 130%;
text-align:left;
} 




In the html I have:
PHP Code:
echo "<table class=\"paginationtable\"><tr>";
echo "<td class=\"location\">$location</td>";
echo "</tr></table>"; 




For some reason the 1 px border that I styled for the table is not showing up around my paginationtable. Can anyone see anything wrong with my code? Do the echo's look ok? Or is my CSS logic the problem?

Brad.

When a div gets smaller due to window resizing or screen resolution whats the attribute to make the text reformat with it.
A div thats not as wide means that the lines of text need to not be as wide..you get the idea..and im not talking about using overflow:auto.
This is due on wednesday
Heres my main divs
Code:

#wrap {
      width:75%;
	  margin-left: auto;    
      margin-right: auto;
	  min-width:700px;
	 
	  
}

#header {background:url(images/black.png);
        height:60px;
		margin-bottom:0px;
		
}
/*For Site Title Image*/
.title {float:left;
       
}
/*Contains the menu*/

		  
#menu {background:#000000;
	  height:30px;
	  margin:0px;
	  padding-bottom:5px;
	  padding-right:10px;
	  }
/*Fix margins/padding*/	  
.link {float:right;
	  margin-top:0px;
	 
	  background:url(images/gradient.png);
	  
	  height:auto;
	  width:auto;
	  border-right:1px solid #000000;
	  text-align:center;
	  padding:5px;
	  
	  
	  
	  

}











#floatright {float:right;
            width:300px;
			margin:auto;
			padding-left:10px;
			border-left:2px double grey;
			height:350px;
			background:#000000;
			
			}
#content {
         background:url(images/back.png);
		 color:#000000;
		 padding-top:10px;
		 padding-bottom:10px;
		 padding-left:20px;
		 padding-right:20px;
		 
		 height:auto;
		 font-family:Verdana;
		 
}

i have the following css:
Code:

.table1 {
	border-collapse: collapse;
	width: 50%;
	margin: 24px;
	font-size: 1.1em;
}

.table1 th {
	background: #3e83c9;
	color: #fff;
	font-weight: bold;
	padding: 2px 11px;
	text-align: left;
	border-right: 1px solid #fff;
	line-height: 1.2;
}

.table1 td {
	padding: 6px 11px;
	border-bottom: 1px solid #95bce2;
	vertical-align: top;
}

.table1 td * {
	padding: 6px 11px;
}

.table1 tr.alt td {
	background: #ecf6fc;
}

.table1 tr.over td, tr:hover td {
	background: #bcd4ec;
}

However all tr and td's now getting a hover effect.
i tried several methods but I'm to unpracticed with css.

Grtzz whitehat

my layout is a left border, main content, then right border, all vertical columns. here is their code:

Code:

.left {
    background-image: url('images/obj_left.gif');
	background-repeat:repeat-y;
	width:28px;
	margin:0px;
}

.maintable {
	width: 100%;
	background-color:#FFFFFF;
	border-left:3px solid black;
	border-right:3px solid black;
}

.right {
    background-image: url('images/obj_right.gif');
	background-repeat:repeat-y;
	width:28px;
	margin:0px;
}

i also float them left, so imagine that is there.

so i have code like this

<div class='left floatleft'></div>
<div class='maintable floatleft'></div>
<div class='right floatleft'></div>

but why cant i see the images in right and left?

Hiya, im trying to place a blog inside a table and also have a picture above the table and some links.

In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work.

Please help

Thanks guys

Im using this to make an onscroll effect
Code:

table.left {border-collapse:collapse;
                float:left;
		  margin-left:10px;
		  margin-right:10px;
		  background:#8f8f8f;
		  padding:5px;
	          color:#000000;
                 font-family:Verdana;
		  text-decoration:none;
	
     }

td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}

td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;



}

And the links don't format with the typical css markup
Code:

a:active {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:link {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}
a:hover {color:#000000;
         font-family:Verdana;
		 text-decoration:none;}

Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck
Note:this is in IE


Nevermind...I just figured it out..used a link class and set the visited attribute

I tried this to change the background color of a select tag by using color code and nothing happens. It works only in NS6+ and not in IE. IE only accepts color names but not color codes.

Code:

<select name="sele1" onfocus="this.style.background='#ffffcc'">

If I put a color name eg. 'red' then the background color changes. Is there a way for it to accept color codes too.

Thanks

I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container.

Anyone know why there is a shift, and what I can do about it?



Style sheet code pasted below:

Code:

body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3; 
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}

h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}

h2 {
font-size:2em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1.25em;
}





a:link {
color:#8090AC;
text-decoration:none;
}

a:visited {
color:#B17F6C;
text-decoration:none;
}

a:hover {
color:#E9DF55;
text-decoration:underline;
}

a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}

#header {
height:200px;
width:760px;
margin:0;
padding:0;
}

#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
	font-size: 12pt;
	color: #e9df55;
	background-color:transparent;
	text-indent: 200pt;
	vertical-align: text-bottom;
}
navigate{
	color : #105BAC;
	background-color : transparent;
	height : 20px;
	font-size: 100%;
	border-top : 1px solid #999999;
}

#navigate ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 0px;
	padding: 2px 0 0 0;
}
#navigate ul li {
	display: inline;
}
td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}
p {
	font-size: 14px;
	color: #FFFFFF;
	left: 50px;
	right: 50px;
}



#main {
	width: 660px;
	padding-right: 50px;
	padding-left: 50px;
}
#footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #666666;
	height: 100px;
	width: 760px;
	vertical-align: text-bottom;
	text-align: center;
	
}

#SplashImage {
	float: left;
}
.image-left {
	clear: none;
	margin-bottom: 10px;
	float: left;
	margin-right: 20px;
	margin-left: 10px;
}
.image-right {
	clear: none;
	margin-bottom: 10px;
	margin-left: 10px;
	float: right;
}