TalkPHP - CSS Padding / Textarea problems

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - CSS Padding / Textarea problems (http://www.talkphp.com/xhtml-html-css/2439-css-padding-textarea-problems.html)

Alan @ CIT

03-08-2008 10:58 PM

CSS Padding / Textarea problems

1 Attachment(s)

Hi all,

I'm having some problems using a textarea inside a div that has padding set.

I have the following in my CSS:

CSS Code:

#content {
padding: 0 40px 0 40px;
}

All page content is then wrapped in <div id="content"> to give some space at either edge of the page.

Unfortunately, this also effects textareas:

Attachment 173

Can any of you CSS experts clue me in on how to stop the textarea using the padding please? :-)

Thanks,
Alan

Gareth

03-08-2008 11:17 PM

You can target the textareas directly by adding a class, or indirectly by referring to all text areas in the content div or by all textareas and reset their padding.

Code:

#content textarea {

padding: 0;

}



OR



textarea {

padding: 0;

}

Code:



<style type="text/css">

.example {

padding: 0;

}

</style>



<textarea class="example" rows="10" cols="10">example text</textarea>

Hope this helps :)

DeMo	03-08-2008 11:25 PM

I tried to reproduce it here with a simple page but had no luck at all. Tested on Opera 9.26, Firefox 2.0.0.12 and IE7, all of them worked.

HTML Code:

<html>

<head>

<title>Untitled Document</title>

<style type="text/css">

#content {

        padding: 0 40px 0 40px;

}

</style>

</head>



<body>

<div id="content">

  <textarea>test</textarea>

</div>

</body>

</html>

I even tried using padding: inherit; for the textarea style but it had no effect. Maybe you can correct it with padding: 0 in the textarea style?

Alan @ CIT

03-08-2008 11:27 PM

Thanks Gareth, I used your first suggestion and it works great :-)

Alan

Gareth

03-08-2008 11:28 PM

Glad to have helped! (For once! normally it is my asking for help :P)

Edit:

Quote:

Originally Posted by DeMo (Post 12132)

I tried to reproduce it here with a simple page but had no luck at all. Tested on Opera 9.26, Firefox 2.0.0.12 and IE7, all of them worked.

HTML Code:

<html>

<head>

<title>Untitled Document</title>

<style type="text/css">

#content {

        padding: 0 40px 0 40px;

}

</style>

</head>



<body>

<div id="content">

  <textarea>test</textarea>

</div>

</body>

</html>

I even tried using padding: inherit; for the textarea style but it had no effect. Maybe you can correct it with padding: 0 in the textarea style?

We were not given the complete css stylesheet but it is quite possible Alan had indirectly given it padding (e.g. in a higher level). What my suggestion did was to reset all padding for that specific textarea.

Gareth

TlcAndres

03-09-2008 07:58 PM

That Gareth is the sign of progress - of student to master :D

All times are GMT. The time now is 05:19 AM.