Textpattern CMS

#1 2008-05-28 20:34:54

Plaz

Member

From: Minnesota

Registered: 2004-06-02

Posts: 33

CSS problem with padding

Hello,

I’m trying to create a simple CSS class that will create a colored background, grey line on top and bottom, and will pad any text, etc within the area by 10px on each side.

For some reason, the text will pad on the top, left and the bottom… but it bleeds off the right hand side of the box. The text overlaps the right hand side of the box a little and any value that I enter for padding doesn;t seem to fix that.

Here is my style sheet. The class I’m trying to use is at the bottom and called “notebox”. The txp form that is feeding the content wraps the body of article in the “bodylinks” div id if that makes a difference. (I tried removing that to see if it was affecting it- but it’s not).

Any ideas? It seems like this should be a simple one…

body
{
	margin: 0;
	font-family: Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	color: #000000;
	font-size: .8em;
	line-height: 1.5em;
}

blockquote, h3, p, li
{
	padding-left: 0px;
}

blockquote
{
	margin-right: 0;
	margin-left: 20px;
}

h1, h2, h3
{
	font-weight: normal;
}

h1, h2
{
	font-family: Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
}

h1
{
	font-size: 3em;
}

h2
{
	font-size: 1em;
	font-style: italic;
}

hr
{
	margin: 2em auto;
	width: 370px;
	height: 1px;
	color: #7a7e7d;
	background-color: #7a7e7d;
	border: none;
}

.outlineforms
{
	background-color: #EEEEEE;
	border: 1px #000000 solid;
}

small, .small
{
	font-size: .8em;
	color: #CCCCCC;
}

searchresults
{
	text-decoration: underline;
}

a
{
	text-decoration: none;
	color: #006699;
}

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

h1 a, h2 a, h3 a
{
	border: none;
}

h3 a
{
	font: 1.5em Georgia, Times, serif;
}

#sidebar-2 a, #sidebar-1 a
{
	color: #006699;
	border: none;
}

#bodylinks a:link
{
	text-decoration: underline;
}

#bodylinks a:visited
{
	text-decoration: underline;
}

#bodylinks a:active
{
	text-decoration: underline;
}

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

#sidebar-2 p, #sidebar-1 p
{
	font-size: 0.9em;
	line-height: 1.5em;
}

.caps
{
	font-size: 0.9em;
	letter-spacing: 0.1em;
}

div.divider
{
	margin: 2em 0;
	text-align: center;
}

#accessibility
{
	position: absolute;
	top: -10000px;
}

#container
{
	margin: 10px auto;
	padding: 10px;
	width: 760px;
	\width: 770px;
	w\idth: 760px;
}

#head
{
	height: 100px;
	text-align: center;
}

#content
{
	margin: 0 155px;
	padding-top: 30px;
}

#foot
{
	margin-top: 5px;
	clear: both;
	text-align: center;
}

#sidebar-1, #sidebar-2
{
	\width: 150px;
	w\idth: 150px;
}

.comments_error
{
	color: #000;
	background-color: #fff4f4;
}

ul.comments_error
{
	padding: 0.3em;
	list-style-type: circle;
	list-style-position: inside;
	border: 2px solid #fdd;
}

div#cpreview
{
	color: #000;
	background-color: #f1f1f1;
	border: 2px solid #ddd;
}

form#txpCommentInputForm td
{
	vertical-align: top;
}




.notebox
{
	padding: 10px;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	background: #ffffe6;
	width: 100%;
}

---

If you want something you have never had, then you must be willing to do something you have never done.

#2 2008-05-28 21:51:09

zero

Member

From: Lancashire

Registered: 2004-04-19

Posts: 1,470

Website

Re: CSS problem with padding

Does it make any difference if you remove the 100%?

---

BB6 Band My band
Gud One My blog

#3 2008-05-28 21:54:51

Plaz

Member

From: Minnesota

Registered: 2004-06-02

Posts: 33

Re: CSS problem with padding

Yes- that fixed it…
THANK YOU!

---

If you want something you have never had, then you must be willing to do something you have never done.