8 replies [Last post]
bohngy
bohngy's picture
Offline
newbie
UK
Last seen: 9 years 41 weeks ago
UK
Joined: 2012-10-28
Posts: 2
Points: 5

GRRRRRR. hello all, this is the first post from me (long time lurker)

I'm going mad with an HTML form I'm trying to put on a page I'm making for a friend. I'm somewhat of a newbie, BUT... I have spend about a day trying everything I can to keep my layout the same when using an HTML form. I've read a whole heap and asked a couple of friends, but we can't make it work!

I've done a bit of debugging by commenting out various lines of the HTML form and it's DEFINITELY the height of the textarea element that causes the whole page to shift to the left a bit.

I've assigned an ID to the form itself, hoping this will force the CSS styling to result in a correct central alignment, but it doesn't work. All the other elements of the form don't cause a shift. If you click back and forth between HOME and ABOUT, you can see my problem.

I would be really grateful if anyone could help me out with this. i'm not sure what else I can try.

Here's hoping, thanks.

here's the URL

and here's my "master" stylesheet

/* -----------------------------------------------------
 
   AUTHOR           :  	A heavily modified template, initially by Erwin Aligam
   WEBSITE          :   <a href="http://www.styleshout.com/
" rel="nofollow">http://www.styleshout.com/
</a>   TEMPLATE NAME    :	BLM
   VERSION          :   1.0
   LAST MODIFIED    :   October 25, 2012
 
-------------------------------------------------------- */
 
/* -----------------------------------------------------
   HTML ELEMENTS
-------------------------------------------------------- */
 
/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }
 
body {
	background: #CCC;
	font: 70%/1.5em Georgia, Verdana, Tahoma, arial, sans-serif;
	color: #666666; 
	text-align: center;
	margin: 15px 0;
}
 
/* links */
a, a:visited {	
	color: #5A93C9;
	background: inherit;
	text-decoration: none;
}
a:hover {
	color: #88ac0b;
	background: inherit;
	text-decoration: underline;
}
 
/* headers */
h1, h2, h3 {
	font-family: Georgia, 'Trebuchet MS', Tahoma, Sans-serif;
	font-weight: Bold; 		
}
h1 {
	font-size: 190%;	
	font-weight: normal;
	color: #555;
}
 
 
h2 {
	font-size: 130%;
	text-transform: uppercase;
	color: #88ac0b;
}
 
h3 {
	font-size: 130%;	
}
 
h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
}
ul {
	list-style: none;
}
 
/* images */
img {
	background: #FAFAFA;
    border: 1px solid #DCDCDC;
	padding: 8px;
}
img.float-right {
  	margin: 5px 0px 10px 10px;  
}
img.float-left {
  	margin: 5px 10px 10px 0px;
}
 
code {
  	margin: 5px 0;
  	padding: 10px;
  	text-align: left;
  	display: block;
  	overflow: auto;  
  	font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  	/* white-space: pre; */
  	background: url(post.jpg);
	border: 1px solid #E0DBC9;  
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}
blockquote {
	margin: 10px;
 	padding: 0 0 0 25px;  
   background: url(post.jpg);
	border: 1px solid #E0DBC9;
	font: bold 1.3em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #A89A6A;
}
 
 
/* start - table */
table {
	border-collapse: collapse;
	margin: 10px;	
}
th strong {
	color: #fff;
}
th {
	background: #93BC0C url(nav.jpg) repeat-x;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;
	color: #FFF;
	text-align: left;
	border-left: 1px solid #B6D59A;
	border-bottom: solid 2px #FFF;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #E8E8E8;
	border-bottom: 1px solid #DFDFDF;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
}
tr.row-b {
	background: #EFEFEF;		
}
/* end - table */
 
/* form elements */
#mailer {
	width: auto;
	height: auto;
	margin: 10px; 
	padding: 0 5px;
	border: 1px solid #D5D5D5; 
	background-color: #DFDFDF; 	
}
#mailer label {
	display: block;
	font-weight: bold;
	margin: 5px 0;
}
#mailer input {
	padding: 2px;
	border: 1px solid #eee;
	font: normal 1em Georgia, Verdana, sans-serif;
	color: #777;
}
#mailer textarea {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Georgia, Verdana, sans-serif;
	color:#777;
	width:400px;
	height:300px;
	display:block;
 
}
#mailer input.button { 
	font: bold 12px Georgia, Arial, Sans-serif; 
	height: 24px;
	margin: 0;
	padding: 2px 3px; 
	color: #FFF;
	background: #8EB50C url(nav.jpg) repeat-x 0 0;
	border: none;
}
 
/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0 0 0 3px; padding: 5px 0 10px 0;	
	width: 220px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 130px;
	color: #777; 
	height: 18px;
	padding: 2px;	
	border: 1px solid #E5E5E5;
	vertical-align: top;
}
.searchform input.button { 
	width: 60px;
	height: 24px;
	padding: 2px 5px;
	vertical-align: top;
}
 
/* ------------------------------------------
   LAYOUT
--------------------------------------------- */
#wrap {
	position: relative;
	width: 820px;
	background: #CCC url(content.jpg) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
#top-bg {
   position: absolute;
	width: 820px;
	height: 19px;
	background: #CCC url(top-bg.jpg) repeat-y center top;	
	top: 0; left: 0;
	z-index: 2;	
}
#content-wrap {
	position: relative;
	clear: both;
	float: left;	
	width: 790px;	
	padding: 0; 	
	background: #E8E8E8;	
	border-top: 5px solid #FFF;
	border-bottom: 2px solid #D0D0D0;
	margin-left: 15px;	
	display: inline;
}
#header {
	width: 820px;
	position: relative;
	height: 100px;
	background: #CCC url(header-bg2.jpg) repeat-y center top;
	padding: 0;	
	color: #FFF;	
}
#header h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 36px Georgia, 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -1px;
	color: #787676;
	text-transform: none;
	text-decoration: none;
 
	/* change the values of top and left to adjust the position of the logo*/
	top: 25px; left: 30px;	
}
#header h1#logo-text span {
	color: #999966;
}
#header p#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: normal 14px Georgia, 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #838181;
 
	/* change the values of top and left to adjust the position of the slogan*/
	top: 67px; left: 31px;		
}
 
/* header links */
#header #header-links {
	position: absolute;
	top: 20px; right: 20px;	
	color: #838181;
	font-size: 10px;	
}
#header #header-links a {	
	color: #838181;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #444;		
}
 
/* header-photo */
#header-photo {
	clear: both;
	height: 200px;
	width: 790px;
	margin: 0 auto;
	background: #FFF url(header-photo2.jpg) no-repeat center center;
}
 
/* Navigation */
#nav {
	clear: both;	
	padding: 0;		
}
#nav ul {
	float: left;
	list-style: none;
	background: #85970C;	
	width: 790px;		
	text-transform: uppercase;
	margin: 0 0 0 15px;
	padding: 0;	
	display: inline;
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	display: block;
	float: left;
	width: auto;
	margin: 0;
	padding: 0 14px;
	border-right: 1px solid #999966;
	border-left: 1px solid #ccc;
	border-bottom: none;
	color: #FFF;
	font: bold 13px/2.8em Georgia, "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;	
	letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
	background: #ccc;	
}
#nav ul li#current a {	
	background: #ccc;	
}
 
/* Main Column */
#main {
	float: left;
	width: 98%;
	padding: 20px 0 35px 0; 
	margin: 0 0 0 10px;
	display: inline;
}
 
 
#main h1 {
	font-family: Georgia, 'Trebuchet MS', Tahoma, Sans-serif;
	font-weight: Bold; 
	font-size: 220%;	
	color: #85970C;
}
 
 
 
#main h1#home {
 
	margin: 0; padding: 0;
	font: bold 36px Georgia, 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -1px;
	color: #787676;
	text-transform: none;
	text-decoration: none;
	text-align: center;
 
 
}
#main h1#home span {
	color: #999966;
}
#main p#home {
	margin: 0; padding: 0;
	font: normal 14px Georgia, 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #838181;
	text-align: center;
	}
 
 
#main img {
	padding: 5px;
}
 
 
 
#main h2 {
	font: normal 1.9em Georgia, 'Trebuchet MS', Tahoma, Sans-serif;
	color: #787676; 
	text-transform: none;
	padding: 10px 0 0px 10px; 			
}
 
#main h3 {
	font: normal 1.6em Georgia, 'Trebuchet MS', Tahoma, Sans-serif;
	color: #787676; 
	text-transform: none;
	padding: 10px 0 0px 10px; 			
}
 
#main span span{
	font: normal 1.6em Georgia, 'Trebuchet MS', Tahoma, Sans-serif;
	color: #999966; 
	text-transform: none;
	padding: 0; 			
}
 
 
#main h2 a {
	color: #85970C;
	text-decoration: none;	
}
#main ul li {
	list-style-image: url(bullet.gif);
}
 
 
/* 2 columns for new work page, allows gallery and descriptions*/
#main leftcol {
	float: left;
	width: 410px;
	padding: 20px; 
	margin: 0 0 0 10px;
 
}
 
#main rightcol {
	float: right;
	width: 410px;
	padding: 20px; 
	margin: 0 0 0 10px;
 
}
 
 
 
/* footer */
#footer-wrap {
	clear: both;
	width: 820px;
	font-size: 95%;	
	text-align: left;
	padding: 5px 0;
	background: url(footer-bottom.jpg) no-repeat center bottom;	
}
#footer-wrap a {
	text-decoration: none;
	color: #333;
}
#footer-wrap a:hover {
	color: #000;	
}
 
 
 
/* google maps layout*/
#maps {
	align: center;
	margin: 0 auto;
	width: 500px;
	height: 350px;
	}
 
 
/* bottom */
#footer-bottom {
	clear: both;
	color: #666;	
	margin: 0 auto; 
	width: 790px;
	height: 35px;
	padding: 0 0 15px 0;
	text-align: center;
	background: url(footerbg.jpg) no-repeat center top;
}
 
/* postmeta */
.post-footer {
	background: url(post.jpg);
	padding: 5px; 
	margin: 0 10px 5px 10px;	
	font-size: 95%;	
	color: #AEA471;
	border: 1px solid #E0DBC9;
}
.post-footer .date{ margin: 0 10px 0 5px;	}
.post-footer a.comments { margin: 0 10px 0 5px;	}
.post-footer a.readmore { margin: 0 10px 0 5px;	}
.post-info { font-size: .95em; padding: 0 10px; margin-left: 2px; color: #888; }
 
/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
 
/* display and additional classes */
.clear { clear: both; }
 
/* Sliderman*/
/*#slider_container_3 { padding: 0; width: 800px; border: 0px # }*/
 
#slider_container_3 { 
	padding: 0;
	clear: both;
	height: 300px;
	width: 790px;
	margin: 0 auto;
	background: #FFF no-repeat center center;
	border: 0px
}
 
 
#slider_container_3 img { 
	height: 300px;
	width: 790px;
	padding: 0;
	clear: both;
	margin: 0 auto;
	background: #FFF no-repeat center center;
	border: 0px
}
 
.SliderName_3 {
	width: 790px;
	height: 300px;
	overflow: hidden;
}
 
.SliderNamePrev_3 {
	background: url(../img/left.png) no-repeat left center;
	width: 50px;
	height: 450px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	text-decoration: none;
}
 
.SliderNameNext_3 {
	background: url(../img/right.png) no-repeat right center;
	width: 50px;
	height: 450px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	text-decoration: none;
}
 
.SliderName_3Description {
	padding: 10px;
	font-family: Tahoma,Arial,Helvetica;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	text-align: center;
	color: #ffffff;
	text-shadow: 0 1px 3px #000000;
}
 
#SliderNameNavigation_3 { margin: 0; padding: 10px 0 0 0; height: 16px; text-align: center; overflow-y: hidden; }
 
#SliderNameNavigation_3 a:link, #SliderNameNavigation_3 a:active, #SliderNameNavigation_3 a:visited, #SliderNameNavigation_3 a:hover{
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}
 
#SliderNameNavigation_3 a.active:link, #SliderNameNavigation_3 a.active:active, #SliderNameNavigation_3 a.active:visited, #SliderNameNavigation_3 a.active:hover{
	background: url(../img/bullet_active.png) no-repeat center center;
}
 
#SliderNameNavigation_3 a img
{
	border: none;
	width: 16px;
	height: 16px;
	background: url(../img/bullet.png) no-repeat center center;
}
 
#SliderNameNavigation_3 a.active img
{
	background: url(../img/bullet_active.png) no-repeat center center;
}
 
/* end sliderman*/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If you have lurked for a

If you have lurked for a while you would know or should know we expect valid markup. Please fix your markup errors then acknowledge, there's little point looking for issues when the markup may be the cause.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You then might want to

You then might want to consider adjusting the col attribute of the textarea '135' is rather a lot, remove that fixed width you've applied via css and you'll notice the textarea actually exceeds your layout constraints that may or may not upset some browsers.

On the question of browsers, I see no issue in FF so is this a browser specific problem? if so please state browser and version.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

bohngy
bohngy's picture
Offline
newbie
UK
Last seen: 9 years 41 weeks ago
UK
Joined: 2012-10-28
Posts: 2
Points: 5

sorry, updated accordingly

Sorry Hugo, you're right I should have validated. I've been far too concerned with other matters, but my apologies. I've corrected the errors and both markup and CSS now validate.

I removed the fixed width and height of the mailer textarea style and have reduced the number of cols in the HTML markup. The problem still exists. The page jumps slightly to the left when compared to the index.html page.

I just downloaded Firefox (16.0.2) and the same problem can be seen. I normally use safari (6.0.1).

Here's the updated part of the CSS (i.e. the only part I've changed since posting originally:

#mailer textarea {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Georgia, Verdana, sans-serif;
	color:#777;
	display:block;
 
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm sorry but I'm still not

I'm sorry but I'm still not seeing the issue on FF Win so difficult to know what to suggest as nothing really sticks out as an issue other than I mentioned and was dealt with.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

overflow vs no overflow

If you view your pages in a less than maximized window on a large monitor, the problem will go away. The home page does not overflow (require scrolling) the huge window, whereas the page with the form does.
If you really feel the need to fix it (do designers always run maximized?), add this:

html {
  overflow-y: scroll;
  }

That forces space for the vertical scrollbar whether needed or not. Older IEs, v<8, always reserved the space. It sometimes caused problems, so I'm glad MSFT fixed it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

oh that *sigh*. Always place

oh that *sigh*. Always place the code Gary shows, it was a silly silly stupid idea having the viewport scroll bars pop in and out, IE got it dead right for once in reserving the space for them.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Always on scrollbar considered harmful

Wink

It's OK to do it yourself, but with IE's approach, there were problems. For one, using the preferred object element to import an html document or snippet instead of iframe always created a scrollbar within the object that couldn't be removed. It also caused horizontal scrolling if the document's width overran the phantom y-scrollbar. In short, it created a presentation model best left in the hands of the developer or user.

MSFT did well to get rid of it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 32 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Regardless... they're all

Regardless... they're all silly silly people, better to just stick scroll bars on everything and be done with the issue, you'll soon get used to them and not notice

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me