CSS - Hyperink Class Format

could anyone tell me if there is something out of order here;?
css Code:
Original - css Code .heav {color: #333333; font-weight: bold; } .mast {color: #333333; font-size: x-small; font-family: Arial, Helvetica, sans-serif; } hr.center {color: #dddddd} .header {background: #CCCCCC; border-top: 2px solid #BB2F00; margin: 3px 0 0 0; padding: 3px; } .footer {background: #BB2F00; color: #FFFFFF; border-top: 2px solid #CCCCCC; border-bottom: 2px solid #CCCCCC; margin: 8px 0 0 0; padding: 2px; font-size: x-small; font-weight: normal; font-style: normal; } .carL {color: #999999; font-size: x-small; font-weight: normal; font-style: normal; clip: rect(auto auto auto auto); font-family: Arial, Helvetica, sans-serif;} .pvc {color: #BB2F00; font-weight: bold;} .talign {text-align: center;} .clip {color: #FFFFFF; font-size: small; background-color: #333333; clip: rect(auto auto auto auto); } .margin {margin: 5px;}

  

  


 .heav {color: #333333; font-weight: bold; }


 .mast {color: #333333; font-size: x-small; font-family: Arial, Helvetica, sans-serif; }


 hr.center {color: #dddddd}


 .header {background: #CCCCCC; border-top: 2px solid #BB2F00; margin: 3px 0 0 0; padding: 3px; }


 .footer {background: #BB2F00; color: #FFFFFF; border-top: 2px solid #CCCCCC; border-bottom: 2px solid #CCCCCC; margin: 8px 0 0 0; padding: 2px; font-size: x-small; font-weight: normal; font-style: normal; }


 .carL {color: #999999; font-size: x-small; font-weight: normal; font-style: normal; clip: rect(auto auto auto auto); font-family: Arial, Helvetica, sans-serif;}


 .pvc {color: #BB2F00; font-weight: bold;}


 .talign {text-align: center;}  


 .clip {color: #FFFFFF; font-size: small; background-color: #333333; clip: rect(auto auto auto auto); }


 .margin {margin: 5px;}


   

hi all,
i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly
how to display the 5th field in correct format...below is the code i have written in css..

if there are more than 4 fields tell me how to display all in correct format.

.form label
{
float:left;
width:100px;
padding:10px 10px 0 10px 0;
font-weight:bold;
}

I'm new to CSS but have read more in the past two days than I care to tell you about. I'm stuck on how to reference a deeply nested element that is automatically generated by a drupal view. The problem lies with the fact that I can select it directly and style it but other views (pages) are rendered with the exact same attributes (Name, Class, and ID). The Class of the page or view is different but is nested about seven tags back.

My question is: How can I select the Element to be styled when the only differentiator is so far back in the hierarchy of the page without using a local or inline CSS?

The following are snippets of the two pages that share the same Element attributes (<select name="filter0" class="form-select" id="edit-filter0" >)

Thanks for any suggestions you might have.

Mike

********* First page *******************
Code:

<div class='view view-firstview'>
  <form action="URL"  method="get" id="views-filters">
    <div>
      <table>
        <thead>
         </thead>
        <tbody>
           <tr class="odd">
             <td>
              <div class="form-item">
                 <select name="filter0" class="form-select" id="edit-filter0" >
                   <option value="**ALL**"><All></option>
                 </select>
              </div>
            </td>
            <td>
              <div class="form-item">
                 <select name="filter1" class="form-select" id="edit-filter1" >
                   <option value="**ALL**"><All></option>
                 </select>
              </div>
            </td>
            <td>
              <input type="submit" id="edit-submit" value="Submit"  class="form-submit" />
            </td> 
          </tr>
        </tbody>
      </table>
    </div>
  </form>
</div>

******** Second Page ********************
Code:

<div class='view view-secondview'>
  <form action="URL"  method="get" id="views-filters">
    <div>
      <table>
        <thead>
         </thead>
        <tbody>
           <tr class="odd">
             <td>
              <div class="form-item">
                 <select name="filter0" class="form-select" id="edit-filter0" >
                   <option value="**ALL**"><All></option>
                 </select>
              </div>
            </td>
            <td>
              <div class="form-item">
                 <select name="filter1" class="form-select" id="edit-filter1" >
                   <option value="**ALL**"><All></option>
                 </select>
              </div>
            </td>
            <td>
              <input type="submit" id="edit-submit" value="Submit"  class="form-submit" />
            </td> 
          </tr>
        </tbody>
      </table>
    </div>
  </form>
</div>

Dear Friends,

I have been trying to make a stupid title bar, that i did with tables, now using css. This is what the code for a titlebar looks like in table form:
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="10"> <img src="img_inside_article_title-bar_left.gif" width="10" height="30"></TD> <TD colspan=2 height="30" background="tile_inside_article_titlebar_bak.gif"> <p class="left"> <span class="strong_white">&nbsp;Title</span></p></TD> <TD width="14"> <img src="img_inside_article_title-bar_right.gif" width="10" height="30"></TD> </TR> </table>
and would like to convert it into css. All my attempts have been very wrong, and i need help. I'd give my css code, but it is sooo wrong.......that it would be better to start from scratch.

basically this is the idea:
(Left Corner Image)(Title area that streaches across width of web page)(Right Corner Image) HELP

Fz105

I have been scouring this forum trying to find the correct answer. I have a list of links in an unordered list. I am using css to style the list.

The one thing I can't seem to figure out is, if I have the wrong doctypes or my css is wrong.

I have replaced the bullet for the li tags with background images. One is just a line the other is a line with an arrow. I am trying to push the type over a little past my arrow. In the css I have put a padding-left: 1 em; on the li tag. It works in IE but not firefox, so I added padding-left: 10; This seemed to push the li tag over in firefox.

The next problem was when I went to put the doc types in. I put
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
above the <html> tag. Once again it worked in IE but not Firefox.

I took out the doctype tag and inserted
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
inside the <head> tags. This seems to work in both IE and Firefox.

Is this an incorrect way to put a doc type in?
Below please see the css I am using and my header info

Code:

/*right hand nav bar*/
#nav ul{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 13px;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#nav li{
	background: url(../images/divider_rht_nav.gif) repeat-x bottom;
	padding-top: 0.3em;
	padding-bottom: 0.6em;
	padding-left: 1 em; /*this is for IE*/
	padding-left: 10; /*this is for FireFox*/
}

#nav a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height: 13px;
	color: #325087;
}

#nav a:hover {
	color: #CC0000;
	line-height: 13px;
}

#nav li.selected {
	color: #174A4A;
	font-weight: bold;
	background-image: url(../images/divider_rht_nav_arrow.gif);
}

.heading {
	font-weight: bold;
	color: #174A4A;
	font-size:10px;
}

.headingspace {
	font-weight: bold;
	color: #174A4A;
	font-size:10px;
	margin-top: 1.5em;
}
/*end style*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin Area - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/master.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/master_print.css" rel="stylesheet" type="text/css" media="print">
<script language="javascript" type="text/javascript" src="scripts/validate_admin_login.js"></script>
</head>

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.

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

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

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

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.

I've noticed some characters at the beginning and end of CSS files: Quote:
/* <!-- */

/* CSS content here */

/* --> */

What is the purpose?

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

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