Images Overlapping Help!

design

#1

I made a website with wordpress.

On one page, I inserted 3 images using wordpress function.
Then below that, I pasted a code for ezine opt-in form. This code is provided by the company I use for my ezines.

Everything looks good except the top part of the opt-in form is overlapping with the pictures above like… a lot!

How can I possibly fix this problem?

BTW, when I pasted this ezine code on other pages, it worked just fine.

I don’t have much knowledge about website design.
So please help!


#2

It will help if you post links to the page you are working on. It sounds like the page needs a few CSS tweaks.


#3

I have a large comic strip and two banners on top of the opt-in form.
Thank you!!

http://www.lovingnaturalhealth.com/merumaga/


#4

It looks like there is some CSS styles in the form you added. The start of the styles looks like this:

<style type='text/css'>
<!--
.ms_form_box{
 font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"MS Pゴシック",sans-serif;
 width:670px;
 height:auto;
 padding:0px;
 margin:30px auto;
}
...

If you add “float:left;” to that first style rule, it might help. Like this:

<style type='text/css'>
<!--
.ms_form_box{
 font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"MS Pゴシック",sans-serif;
 width:670px;
 height:auto;
 padding:0px;
 margin:30px auto;
 float: left;
}
...

Try that.


#5

Gosh it worked! Thank you, thank you!

Now…I can almost enjoy this weekend.

Do you know how I can make this form small?
Width is ok, but it’s way too high/tall and awkward looking right now.

Let me know if you have an idea…

Thank you!


#6

It is possible to simplify the form a little. It would take some messing around with. You could play with the CSS yourself or pay someone to do it.

It might be easy since you know exactly where the CSS is…maybe get rid of the borders, float the fields to the left and bring the text up to the right…