SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling textarea in a td [Was: Problems]

    Hey, Im having some problems with css styling on my site. I am trying to apply style to a table td, but don't want the textarea inside this td to have the style I'm applying to the td. Heres a link and the code.

    http://www.completesailormoon.com/forum/replypost.php

    style1.css
    Code:
    * {
    	padding: 0;
    	margin: 0;
    	border: 0;
    }
    
    body {
    	padding: 0;
    	margin: 0;
    	border: 0;
    	font: 12px Arial;
    	color: #999999;
    	min-width:425px;
    	text-align: left;
    }
    
    h1 {
    	font-size: 20px;
    	color: #FF2492;
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 10px;
    }
    
    p {
    	padding: 0px;
    	margin: 0px;
    	color: #999999;
    }
    
    ol, ul {
    	padding: 12px 0 12px 40px;
    }
    
    #wrapper {
    	height: 100%;
    	width: 100%;
    }
    
    #wrapper div {
    	vertical-align: bottom;
    	bottom: 0;
    }
    
    #header {
    	height: 97px;
    	background: url(../../../../images/header.png) repeat-x;
    	border-bottom: solid #FF2492 1px;
    }
    
    #logodiv {
    	float: left;
    }
    
    #logodiv img {
    	_width: 164px;
    	_height: 94px;
    }
    
    #login {
    	float: right;
    	padding-right: 10px;
    	padding-top: 10px;
    }
    
    input, textarea {
    	border: solid #FF2592 2px;
    	background-color: #FFFFFF;	
    }
    
    #login img {
    	margin-left: 10px;
    	color: #FF2592;
    }
    
    .button {
    	background: #FF53A9;
    	color: #FFFFFF;
    	font: 12px Arial;
    	padding: 1px 3px 1px 3px;
    	_padding: 0;
    }
    
    #navbar {
    	height: 17px;
    	_height: 18px;
    	background: url(images/navbar.png) repeat-x;
    	border-bottom: solid #CCCCCC 1px;
    	font: 12px Arial;
    	color: #FF2492;
    	vertical-align: middle;
    	padding-top: 6px;
    	_padding-top: 5px;
    }
    
    #navbar a {
    	text-decoration: none;
    	padding-left: 10px;
    }
    
    #navbar a:link {
    	color: #FF2492;
    }
    
    #navbar a:visited {
    	color: #FF2492;
    }
    
    #navbar a:hover {
    	color: #C21C70;
    }
    
    #content {
    	padding: 20px;
    }
    
    #footer {
    	height: 16px;
    	background-color: #FF2492;
    	border-top: solid #999999 1px;
    	font: 12px Arial;
    	color: #FFFFFF;
    	vertical-align: middle;
    	padding-top: 3px;
    	padding-left: 10px;
    }
    
    #footer a {
    	text-decoration: none;
    }
    
    #footer a:link {
    	color: #FFFFFF;
    }
    
    #footer a:visited {
    	color: #FFFFFF;
    }
    
    #footer a:hover {
    	color: #E5E5E5;
    }
    
    #a {
    	float: right;
    }
    
    .astrick {
    	color: #FF4500;
    	font-size: 17px;;
    	font-weight: bold;
    	font-family: monospace;
    }
    
    #forum {
    	background-color: #FF2492;
    	margin-bottom: 20px;
    	color: #FFFFFF;
    }
    
    #forum table {
    	width: 100%;
    }
    
    #forum th {
    	text-align: left;
    }
    
    #forum td {
    	padding: 10px 0 10px 10px;
    	background-color: #FF75BA;
    	vertical-align: top;
    }
    
    #forum p {
    	color: #B41A68;
    }
    
    .fname {
    	width: 45%;
    }
    
    .fnumber {
    	width: 15%;
    }
    
    .fother {
    	width: 25%;
    }
    
    #forum {
    
    }
    
    .fname {
    padding-left: 5px;
    }
    
    #posts td {
    	background-color: #FFDAEC;
    }
    
    .postst {
    	color: #B41A68;
    }
    
    #posts p {
    	color: #DD65A1;
    }
    
    #signature {
    	width: 60%;
    	height: 200px;
    }
    replypost.php
    Code:
    <?php include '../library/config.php'; ?>
    <?php include '../library/opendb.php'; ?>
    <?php include '../library/login.php'; ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>Complete Sailor Moon</title>
    		<link rel="stylesheet" href="../style1.css" type="text/css" />
    		<link rel="stylesheet" href="../openwysiwyg/styles/wysiwyg.css" type="text/css" />
    		<!--[if IE]>
    		<style type="text/css">
    		body {
    		width:expression( documentElement.clientWidth < 420 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 420 ? "420" : "auto") : "400px") : "auto" );
    		}
    		#button {
    		padding: 0;
    		color: 009988;
    		}
    		</style>
    		<![endif]-->
    		<script language="JavaScript" type="text/javascript" src="http://www.completesailormoon.com/openwysiwyg/scripts/wysiwyg.js"></script> 
    		<script language="JavaScript" type="text/javascript" src="http://www.completesailormoon.com/openwysiwyg/scripts/wysiwyg-settings.js"></script>
    		<script type="text/javascript">
    			WYSIWYG.attach('all', full);
    		</script>
    		</head>
    	<body>
    	<div id="wrapper">
    	<?php include '../include/header.php'; ?>
    	<div id="content">
    		<h1>Reply to Post</h1>
    			<div id="forum">
    			<?php
    			if(isset($_POST['add']))
    			{
    
    			$name = $_POST['name'];
    			$body = $_POST['body'];
    
    			$query = "INSERT INTO posts (name, body, date, edited) VALUES ('$name', '$body', 'CURDATE()', 'CURDATE()')";
    			mysql_query($query) or die('Error, insert query failed');
    			
    			$query = "FLUSH PRIVILEGES";
    			mysql_query($query) or die('Error, insert query failed');
    			
    			include '../library/closedb.php';
    			echo "<p>Reply added!</p>";
    			}
    
    			else
    			{
    			?>
    			<form method="post" >
    			<table>
    				<tr>
    					<td>Name</td>
    					<td><input name="name" type="text" id="name" class="reply"></td>
    				</tr>
    				<tr>
    					<td>Body</td>
    					<td><textarea name="body" type="text" id="body"></textarea></td>
    				</tr>
    				<tr>
    					<td>&nbsp;</td>
    					<td><input name="add" type="submit" id="add" value="Post Reply" class="button"></td>
    				</tr>
    			</table>
    			</form>
    			<?php
    			}
    			?>
    			</div> <!-- forum -->
    	</div> <!-- content -->
    	<?php include '../include/footer.php'; ?>
    	</div> <!-- wrapper -->
    	</body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi, That looks a bit complicated as you are pulling in an iframe whch is replacing your form elements from the looks of things.

    If you can identify the element concerned and the exact problem then it would help. I don't see anything in your page taking on any unwanted styles but I'm not sure what I'm looking for

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for being so vague. The problem is with the text area. I have applied the WYSIWYG openWYSIWYG to this element. I want the default style to apply to this field that is the normal style that works with it. When I apply my style to the td, it also restyles the text area. Thanks for any help.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Sorry, for the delay but I've got a mental block and I can't seem to see exactly what you mean.

    I can see the texarea in your link but it doesn't seem to have any strange styling applied to it so I'm afraid I'm going to ask you to be more specific.

    What is wrong with the textarea and what styles do you see it inheriting? Please be as specific as you can and show me the styles you are setting and what you want to happen.

    Most of that page is controlled by Javascript so this may not be the best forum for this but if you can explain in more detail I will have a look or perhaps move the thread to an appropriate forum.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I have another page with what it is suppose to look like. This has the default style that is automatically applied. This is because it is a WYSIWYG that I got off the internet called openWYSIWYG. They already style it, and the style for it is in another folder with the code for the WYSIWYG.

    http://www.completesailormoon.com/register.php

    Now, when I style the td that this textarea is it also changes the style of the textarea within it. I don't want the style I applied to the td to be applied to the already styled textarea. (By the way, you have to view the page in ie, firefox, mozilla, or netscape. Thought that might be the problem.)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Ok I can see what you mean now

    The problem is that anything you change with #forum td will also affect whatever the javascript is appending inside that table as it is adding a load of tds.

    This is a bit difficult because you are fighting with the javascript styling.

    You can try and override it like this:

    Code:
    #forum td {
        padding: 10px 0 10px 10px;
        background-color: #FF75BA;
        vertical-align: top;
    }
    #forum tr#test td{
        padding:2px 0;
        background:#fff;
        
    } 
    #forum tr#test td iframe{
        border:1px solid #000;
        width:94&#37;!important;
        margin:0 0 0 3% ;
    }
    
    Then add an id to the table.

    Code:
            <div id="forum">
                <form method="post" >
                    <table>
                        <tr>
                            <td>Name</td>
                            <td><input name="name" type="text" id="name" class="reply"></td>
                        </tr>
                        <tr id="test">
                            <td>Body</td>
                            <td ><textarea name="body" type="text" id="body"></textarea></td>
                        </tr>
                        <tr>
                            <td><input name="add" type="submit" id="add" value="Post Reply" class="button"></td>
                        </tr>
                    </table>
                </form>
            </div>
    That should allow you to target that row but I'm not sure what else you wanted to change exactly. Play around with the above and you should be able to get somewhere or you will have to be more specific and say what else needs changing.

    Hope it helps anyway.

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that did something. But, I really want it to have padding in the td cell, and I really want the textarea to have the silvery background that is the original styling.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You'll just have to override the settings.

    Something like this:

    e.g.

    Code:
    #forum td {
        padding: 10px 0 10px 10px;
        background-color: #FF75BA;
        vertical-align: top;
    }
    
    #forum tr#test td{
        padding:2px 0;
        background-color:#fff;
        
    } 
    #forum tr#test td iframe{}
    #forum tr#test .tableTextareaEditor td{
        background-color:transparent
    }

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Almost

    Almost. The styling is now right on the textarea, but I still want the tds on that row to have the same padding and backgroud as the the other rows. Any suggestions. Heres the link

    http://www.completesailormoon.com/forum/replypost.php

    Heres the code

    replypost.php
    Code:
    <?php include '../library/config.php'; ?>
    <?php include '../library/opendb.php'; ?>
    <?php include '../library/login.php'; ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
            <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                    <title>Complete Sailor Moon</title>
                    <link rel="stylesheet" href="../style1.css" type="text/css" />
                    <link rel="stylesheet" href="../openwysiwyg/styles/wysiwyg.css" type="text/css" />
                    <!--[if IE]>
                    <style type="text/css">
                    body {
                    width:expression( documentElement.clientWidth < 420 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 420 ? "420" : "auto") : "400px") : "auto" );
                    }
                    #button {
                    padding: 0;
                    color: 009988;
                    }
                    </style>
                    <![endif]-->
                    <script language="JavaScript" type="text/javascript" src="http://www.completesailormoon.com/openwysiwyg/scripts/wysiwyg.js"></script> 
                    <script language="JavaScript" type="text/javascript" src="http://www.completesailormoon.com/openwysiwyg/scripts/wysiwyg-settings.js"></script>
                    <script type="text/javascript">
                            WYSIWYG.attach('all', full);
                    </script>
                    </head>
            <body>
            <div id="wrapper">
            <?php include '../include/header.php'; ?>
            <div id="content">
                    <h1>Reply to Post</h1>
                            <?php
                            if(isset($_POST['add']))
                            {
    
    						$name = mysql_real_escape_string($_POST['name']);
    						$body = mysql_real_escape_string($_POST['body']);
    						$tid = mysql_real_escape_string($_GET['tid']);
    
    
    						$query = "INSERT INTO posts (name, body, `date`, edited, topicsid) VALUES ('$name', '$body', CURDATE(), CURDATE(), '$tid')";
    						mysql_query($query) or die('Error, insert query failed with this error: '. mysql_error());
                            
    						include '../library/closedb.php';
    						echo '<p>Reply added!</p><br /><p><a href="posts.php?tid=' . $tid . '">Return to topic.</a></p><p><a href="http://www.completesailormoon.com/">Return to index.</a></p>';
    						} else {
    						?>
                            <div id="forum">
    						<form method="post" >
    						<table>
                                    <tr>
                                            <td>Name</td>
                                            <td><input name="name" type="text" id="name" class="reply"></td>
                                    </tr>
    			                    <tr id="test">
                                            <td>Body</td>
                                            <td><textarea name="body" type="text" id="body"></textarea></td>
                                    </tr>
                                    <tr>
                                    		<td></td>
                                            <td><input name="add" type="submit" id="add" value="Post Reply" class="button"></td>
                                    </tr>
                            </table>
                            </form>
                            <?php
                            }
                            ?>
                            </div> <!-- forum -->
            </div> <!-- content -->
            <?php include '../include/footer.php'; ?>
            </div> <!-- wrapper -->
            </body>
    </html>
    style1.css
    Code:
    /*Basic*/
    
    * {
    	padding: 0;
    	margin: 0;
    	border: 0;
    }
    
    body {
    	padding: 0;
    	margin: 0;
    	border: 0;
    	font: 12px Arial;
    	color: #999999;
    	min-width:425px;
    	text-align: left;
    }
    
    h1 {
    	font-size: 20px;
    	color: #FF2492;
    	padding: 0px;
    	margin: 0px;
    	margin-bottom: 10px;
    }
    
    p {
    	padding: 0px;
    	margin: 0px;
    	color: #999999;
    }
    
    ol, ul {
    	padding: 12px 0 12px 40px;
    }
    
    a {
    	text-decoration: none;
    	border: 0px;
    }
    
    a:link {
    	color: #FF2492;
    }
    
    a:visited {
    	color: #FF2492;
    }
    
    a:active {
    	color: #FF2492;
    }
    
    a:hover {
    	color: #999999;
    }
    
    /*Main IDs*/
    
    #wrapper {
    	height: 100%;
    	width: 100%;
    }
    
    #wrapper div {
    	vertical-align: bottom;
    	bottom: 0;
    }
    
    #header {
    	height: 97px;
    	background: url(../../../../images/header.png) repeat-x;
    	border-bottom: solid #FF2492 1px;
    }
    
    #logodiv {
    	float: left;
    }
    
    #logodiv img {
    	_width: 164px;
    	_height: 94px;
    }
    
    #login {
    	float: right;
    	padding-right: 10px;
    	padding-top: 10px;
    }
    
    input, textarea {
    	border: solid #FF2592 2px;
    	background-color: #FFFFFF;	
    }
    
    #login img {
    	margin-left: 10px;
    	color: #FF2592;
    }
    
    .button {
    	background: #FF53A9;
    	color: #FFFFFF;
    	font: 12px Arial;
    	padding: 1px 3px 1px 3px;
    	_padding: 0;
    }
    
    #navbar {
    	height: 17px;
    	_height: 18px;
    	background: url(images/navbar.png) repeat-x;
    	border-bottom: solid #CCCCCC 1px;
    	font: 12px Arial;
    	color: #FF2492;
    	vertical-align: middle;
    	padding-top: 6px;
    	_padding-top: 5px;
    }
    
    #navbar a {
    	text-decoration: none;
    	padding-left: 10px;
    }
    
    #navbar a:link {
    	color: #FF2492;
    }
    
    #navbar a:visited {
    	color: #FF2492;
    }
    
    #navbar a:hover {
    	color: #C21C70;
    }
    
    #content {
    	padding: 20px;
    }
    
    #footer {
    	height: 16px;
    	background-color: #FF2492;
    	border-top: solid #999999 1px;
    	font: 12px Arial;
    	color: #FFFFFF;
    	vertical-align: middle;
    	padding-top: 3px;
    	padding-left: 10px;
    }
    
    #footer a {
    	text-decoration: none;
    }
    
    #footer a:link {
    	color: #FFFFFF;
    }
    
    #footer a:visited {
    	color: #FFFFFF;
    }
    
    #footer a:hover {
    	color: #E5E5E5;
    }
    
    #a {
    	float: right;
    }
    
    .astrick {
    	color: #FF4500;
    	font-size: 17px;;
    	font-weight: bold;
    	font-family: monospace;
    }
    
    /*Forum*/
    
    #forum {
    	background-color: #FF2492;
    	margin-bottom: 20px;
    	color: #FFFFFF;
    }
    
    #forum table {
    	width: 100%;
    }
    
    #forum th {
    	text-align: left;
    }
    
    #forum td {
        padding: 10px 0 10px 10px;
        background-color: #FF75BA;
        vertical-align: top;
    }
    
    #forum tr#test td{
        padding:0px 0;
        background-color:#fff;
    
    }
    
    #forum tr#test td iframe{}
    #forum tr#test .tableTextareaEditor td{
        background-color:transparent;
        vertical-align: middle;
    }
    
    #forum p {
    	color: #B41A68;
    }
    
    .fname {
    	width: 45%;
    }
    
    .fnumber {
    	width: 15%;
    }
    
    .fother {
    	width: 25%;
    }
    
    .fname {
    padding-left: 5px;
    }
    
    #posts td {
    	background-color: #FFDAEC;
    }
    
    .postst {
    	color: #B41A68;
    }
    
    #posts p {
    	color: #DD65A1;
    }
    
    #signature {
    	width: 60%;
    	height: 200px;
    }
    
    #forum a {
    	text-decoration: none;
    }
    
    #forum a:link {
    	color: #FFFFFF;
    }
    
    #forum a:visited {
    	color: #FFFFFF;
    }
    
    #forum a:active {
    	color: #FFFFFF;
    }
    
    #forum a:hover {
    	color: #FFDAEC;
    }
    
    a {
    	text-decoration: none;
    	border: solid #FFFFFF 0px;
    	padding: 0px;
    	margin: 0px;
    	color: #FFFFFF;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •