Form not listening to HTML

**reekdog** · Jun 3, 2009 04:24

Hey,

I'm having trouble putting my AWeber code into a table on my website. I have managed to achieve placing the AWeber script into a table on a blank HTML file, and the width declared is working fine. However, as soon as i place this exact same code into my webpage layout, it doesn't listen to the width value at all the text expands out really wide.

Here are my two examples:

(working fine on basic HTML page)
http://feedthefitness.com/test/untitled.html

(Same code, but not working)
http://feedthefitness.com/test/blank.html

I'm not calling the width value in the CSS as it doesn't seem to read properly as if i call it in the HTML, which is why i have declared it in the <table> tag. Can anyone give some insight as to why this is happening?

I was also wondering i could get some help with positioning. I would like to place the sign up box to the right of the content box. I presume i will need to set the position to absolute then use margins to position it correctly. However because it is in a table can i declare this within the table declaration in the CSS along with a margin-left value so that it sits bumping up against the right of the content box and not, when viewed on a larger screen, out of this position?

Appreciate any help

CSS for form:

Code:

table.main {
	border-style: dashed;
	border-color: red;
	padding: 10px;
	background-color: silver;
	position: absolute;
	float: right;
}

.news {
	text-align: center;
	font-family: arial;
	font-size: 18px;
}

HTML

Code:

</head>
<body id="background">
	

	<div id="head_back"></div>
	
	<div id="wrapper">
		
		<div id="head_top"></div><!-- #head_top -->
		<div id="head_middle">
			

		
			<div id="nav"> 
				<div class="nav_icon">
					

				</div><!-- #nav_icon -->
		
			</div><!-- #nav -->
		
		</div><!-- head_middle -->

		<div id="head_bottom"></div><!-- head_bottom -->
						
		<div id="content">
			
			<div id="sale"></div><!-- #sale -->
							
			
			<table class="main" width="250">
				<tr>
			    	<td>

					<div class="news">Join The Paleo Cookbook Newsletter <br> For a Free Subscription To Receive <br> Paleo Friendly Recipes and Paleo <br> Diet Cooking Tips</news>

			<p>
			        <script type="text/javascript" src="http://forms.aweber.com/form/38/648160138.js"></script>
			</p>

			    	</td>
				</tr>
			</table>
			

		</div><!-- #content -->


</div><!-- #wrapper -->	
	
	<div id="footer">
		<div id="footer_inner">

		</div><!-- #footer_inner -->
					
		</div><!-- #footer -->


</body>
</html>

**Dan Grossman** · Jun 3, 2009 04:33

You have this CSS rule:

table {
width: 600px;
margin-left: auto;
margin-right: auto;
}

Put the width for this specific table in table.main, not as an attribute, stick to CSS

**reekdog** · Jun 3, 2009 04:51

Oh right, i didn't realise that table declaration would effect the table.main when called because I'm calling 'table class="main" but i can see now when changing it that it does effect it.

I have now made this change.

Just quickly in regards to positioning. The current placement i have set, will this keep the signup box in the same position no matter how wide the display screen is?

http://feedthefitness.com/test/blank.html

CSS:

Code:

table.main {
	width: 250px;
	border-style: dashed;
	border-color: red;
	padding: 10px;
	background-color: silver;
	position: absolute;
	margin-left: 800px;
	margin-top: 140px;
}

.news {
	text-align: center;
	font-family: arial;
	font-size: 18px;
}

Thanks for such a fast response

User Tag List

Thread: Form not listening to HTML

Thread Tools

Display

Hybrid View

Form not listening to HTML

Bookmarks

Bookmarks

Posting Permissions