CSS Padding / Textarea problems

Alan @ CIT · 03-08-2008, 10:58 PM

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:

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

OR

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

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