Remove little White Bar above and side of Newletter

Help with css

[Brain916]

I am in desperate need of help,.
I have been trying for hours. Here is the deal.

I have added a Zoodoka(sp?) newsletter function on the side bar. For some reason there is a little white bar (you can tell it is out of place) right above were you type your email.

Then a little white bar on were your click "submit".

How do I remove this or fix it.

[edited by: jatar_k at 1:09 am (utc) on Feb. 17, 2007]
[edit reason] no urls thanks [/edit]

[darrengeorge]

Not sure whats causing that without digging deeper, possibly something to do with floats if you have floated the container, I dunno.

One solution would be to set the background of the form to transparent or the same color as the container. The blocks wouldnt be visible then, but that doesnt get rid of them.

[Fotiman]

1. Welcome.
2. Personal URLs are not permitted. See the TOS [webmasterworld.com]
3. Your particular problem is that you have applied presentational styles to your <form> element... generally, not a very good idea. For example, your styles include:

#right .column form {
background:#FFFFFF none repeat scroll 0%;

That is why you are seeing a white box.

In general, you should avoid applying presentational properties to the <form> element directly. Instead, wrap the contents of your form with a div and apply the style to that element instead. For example:

<form>
<div>
</div>
</form>

Hope that helps.

[Brain916]

I do not understand
I am a beginner at CSS.

If you can describe more on what to do, I would really appreciate it.

[Fotiman]

Sure. You have a stylesheet (I don't remember the filename) included within the head of your document. It's probably included with something like this:

<link rel="stylesheet" type="text/css" href="styles.css">

where styles.css is the actual file containing the styles.

In that file, you have a style for:

#right .column form

This is specifying that the style will apply to all <form> elements that are contained within an element that has class="column" that are contained within an element that has id="right". The styles for that included this or something similar to this:

background:#FFFFFF none repeat scroll 0%;

That rule says the background of the previously mentioned form will be #FFFFFF (white), have no background image, repeat the background image if it did have one, etc., etc.... just remove this entire line.

Hope that helps.