SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    contact form in rounded corner box... need help please.

    hello i m trying to add a contact form to my rounded corners box but it does not sit properly inside (the box). please see attached pic as i am working on my localhost.iit does seem to stay in box when i cancel the form's style sheet
    here is the contact form style
    Code:
    /* CSS Document */
     
    h1, h2 {
        margin: 0 0 10px 0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        /*font-size: 140%;*/
        color: f8cd0f;
    	text-align:center;
    	text-decoration:underline
    } 
    
    p {
        margin: 0 auto 1em 0;
        padding: 0 20px;
        font-size: 85%;
        line-height: 1.4;
    }
    
    #form-wrap {
    	width: 660px;/*660px*/
    	background: white;
    	padding: 20px 50px 20px 50px;
    	margin: 20px auto;
    	min-height: 500px;
    	height: auto !important;
    	height: 500px;
    }
    
    #form-area {
    	width: 550px;/*600px*/
    	margin-top: 25px;
    	
    }
    
    
    #nameDiv {
    
    width: 460px;
    float: left;
    
    }
    
    #nameDiv input, #nameDiv textarea {
    	padding: 5px;
    	width: 420px;
    	font-family: Verdana, sans-serif;
    	font-size: 1.4em;
    	margin: 0px 0px 10px 0px;
    	border: 2px solid #ccc;
    }
    
    #emailsDivLeft1 {
    
    width: 220px;
    float: left;
    
    }
    
    #emailsDivLeft1 input, #emailsDivLeft1 textarea {
    	padding: 5px;
    	width: 200px;
    	font-family: Verdana, sans-serif;
    	font-size: 1.4em;
    	margin: 0px 0px 10px 0px;
    	border: 2px solid #ccc;
    	
    	
    }
    
    
    #phone {
    
    width: 220px;
    float: left;
    
    }
    
    #phone input, #phone textarea {
    	padding: 5px;
    	width: 200px;
    	font-family: Verdana, sans-serif;
    	font-size: 1.4em;
    	margin: 0px 0px 10px 0px;
    	border: 2px solid #ccc;
    	
    	
    }
    
    
    #commentsDiv {
    clear: both;
    float: left;
    }
    
    #commentsDiv input, #commentsDiv textarea {
    	padding: 5px;
    	width: 420px;
    	font-family: Verdana, sans-serif;
    	font-size: 1.4em;
    	margin: 0px 0px 10px 0px;
    	border: 2px solid #ccc;
    	
    }
    
    #securityDiv {
    clear: both;
    float: left;
    }
    
    
    
    
    #buttonDiv {
    float: right;
    margin: 60px 0px 0px 20px;
    }
    
    
    
    
    #form-area textarea {
    	height: 90px;
    }
    
    #form-area textarea:focus, #form-area input:focus {
    	border: 2px solid #f8cd0f;
    }
    
    #form-area input.button {
    	width: 200px;
    	
    }
    
    .warning {
        font-weight: bold;
        color: #f8cd0f;
    }
    
    form h2 {
        color: #036;
        font-size: 80%;
        font-weight: bold;
        margin: 0 0 5px 10px;
    }
    
    label {
        font-weight: bold;
        color: #036;
        display: block;
    	
    }
    and the round box style
    Code:
    /* set millions of background images */
    						.rbroundbox2 { background:#434C51;}
    						.rbtop2 div { background: url(images/tl2.gif) no-repeat top left; }
    						.rbtop2 { background: url(images/tr2.gif) no-repeat top right; }
    						.rbbot2 div { background: url(images/bl2.gif) no-repeat bottom left; }
    						.rbbot2 { background: url(images/br2.gif) no-repeat bottom right; }
    						
    						/* height and width stuff, width not really nessisary. */
    						.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {width: 100%;height: 7px;font-size: 1px;}
    						.rbcontent2 { margin: 0 5px; }
    						.rbroundbox2 {margin:  0.5em ; }
    can someone please be kind enough to assist me on this ?
    it been hours and i can't get anywhere.
    many thanks.
    Attached Files Attached Files

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whithout the targeted html it has to be a guess.

    I guess the "#form-area" could need an "overflow:hidden" to wrap its content.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    good guess Erik you were right , thank you very much.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •