CSS - Positioning: Div Box Moves Off Screen

Hi There.. I am still learning CSS/Xhtml so please be patient and understanding, . Anyway, I am making a site for my business and wanted to try some new idea. Everything looks good except for my navigation bar in IE. Whenever I change resolution the navigation bar moves out of position and I have to refresh to get it to snap into place. In Firefox and Chrome I do not have this issue.

I have been googling trying to find the solution but have come up empty. Could someone look at my code and tell me when I did wrong so I don't make the same mistake again? Thanks for your help.


Here is the CSS:

<style type="text/css">
<!--
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:920px;
height: 100%;
background: url(desk.jpg) white center no-repeat;
background-repeat:no-repeat;
margin: 0 auto;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
}
#container {
width: 900px; height:840px;
background-image: url(bg1.png);
margin: 0 auto;
text-align: left;
}
#mainContent {
padding: 3px 60px;
margin-top: 0px ;
}

#text {
padding: 0;
margin-left: 35px;
text-align: center;
}

#navigation {
float:right;
display:block;
width: 400px;
margin-top: 15px ;
font-family:Trebuchet MS, Helvetica, sans-serif;
overflow:hidden;
}
#navigation ul {
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

#navigation ul li a {
display:block;
margin:0;
padding:.4em .8em;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#navigation ul li a span {
display:block;
}
#navigation ul li.active a {
color: #fff;
font-weight:bold;
}
#navigation ul li a:hover {
color: #fff;
font-weight: bold;
}

.guy {
float: right;
margin-top: -70px;
}

.yell {
float: left;
margin-top: 20px;
padding-bottom: 0px;
margin-right: 30px;
margin-left: 20px;
}

.second {
margin-top:45px;
}

#footer {
font-size: 11px;
margin-bottom: 10px;
}
-->

Hi Everyone,

I have a problem trying to position a submit button on a search form. The button is an image saying "go" and I am trying to move the button down by a few pixels using CSS.

Whenever I use margin-top:3px; the textfield is also moved down although I am using a class on the button of "goButton" (see code below). I want to be able to move the button only.

CSS code:

Code:

#searchField {display:inline;}
#goButton  {display:inline; margin-top:3px;}
.goButton {margin-top:3px;}

HTML/PHP code:

Code:

$output = '<div id="searchField"><span class="white">Search</span><input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox'. $moduleclass_sfx .'" type="text" size="'. $width .'" value="'. $text .'"  onblur="if(this.value==\'\') this.value=\''. $text .'\';" onfocus="if(this.value==\''. $text .'\') this.value=\'\';" /></div>';

if ( $button ) {
	$button = '<div id="goButton"><A HREF="javascript:document.searchForm.submit()" 
onmouseover="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/goOver.gif\'" 
onmouseout="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/go.gif\'" 
onclick="return val_form_this_page()">

<IMG SRC="/silence/templates/rhuk_solarflare_ii/images/go.gif" 
WIDTH="19" HEIGHT="19" BORDER="0" ALT="Go" 
NAME="go_but" class="goButton"></A></div>';
}

Full CSS code:


Code:

html, body {margin: 0; padding: 0; border: 0;}

html {
	height: 100%;
}

body {
	color: #5f5c5c;
	background-color: #8091b4; 
	font-family: verdana, sans-serif; 
	font-size: 80%; 
	text-align: center;
	margin: 10px 0;
line-height: 130%;
	height: 100%;
	margin-bottom: 1px;
	font-size:10px; /*added to change all font sizes*/
}


.clr {
	clear: both;
}

.outline {
  border: 1px solid #cccccc;
  background: #ffffff;
	padding: 2px;
}

#buttons_outer {
	width: 635px;
  	margin-bottom: 2px;
	margin-right: 2px;
	float: left;

}

#buttons_inner {
	border: 1px solid #cccccc;
	height: 21px !important;
	height: 23px;
}

#pathway_text {
  overflow: hidden;
	display: block;
	height: 25px;
	line-height: 25px !important;
	line-height: 22px;
	padding-left: 4px;
	border: 1px solid #ccc;
	margin-bottom: 2px;
}

#pathway_text img {
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 6px;
}

#buttons {
	float: left;
	margin: 0px;
	padding: 0px;
	width: auto;
}


ul#mainlevel-nav
{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.8em;
}

ul#mainlevel-nav li
{
	background-image: none;
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	margin: 0;
	font-size: 11px;
	line-height: 21px;
	white-space: nowrap;
	border-right: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{
	display: block;
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	color: #333333;
	background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #fff;
	background: #c64934;
}


#search_outer {
	float: left;
	width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
	padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
	
	border: 0px;
	
	padding: 3px 3px 3px 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 11px;
	color: #c64934;
	margin-top:3px;
	
}

#header_outer {
	text-align: left;
	border: 0px;
	margin: 0px;
}

#header {
	float: left;
	padding: 0px;
	margin-right: 2px;
	width: 635px;
	height: 150px;
	background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
	float: left;
	width: 165px;
}

#top_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
	margin-top: 2px;
	width: 165px;
}

#left_inner {
  border: 1px solid #cccccc;
	padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
	padding: 0px;
	margin-top: 0px;
	margin-left: 2px;
	/** border: 1px solid #cccccc; **/
	float: left;
	width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
	padding: 0px;
	margin: 0px;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}


#banner_inner {
	float: left;
	padding: 0px;
	height: 70px;
}

#poweredby_inner {
	float: right;
	padding: 0px;
	margin-left: 0px;
	height: 70px;
}

#right_outer {
	margin-left: 2px;
	width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #cccccc;
  padding: 2px;
}


.user1_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

.user2_inner {
	border: 1px solid #cccccc;
  float: none !important;
  float: left;
	margin: 0px;
	padding: 2px;
}

table td.body_outer {
	padding: 2px;
	border: 1px solid #cccccc;
}

.maintitle {
	color: #ffffff;
	font-size: 40px;
	padding-left: 15px;
	padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
	float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
	margin-right: 10px;
	float: right;
}

#footer {
	text-align: center;
	padding: 3px;
}

#footerNew {
	font-size:12px;
	padding: 3px;
	margin-left:20px;
	margin-right:8px;
	border-top:1px solid #7f91b4;
	padding-bottom:400px;
}

#footerLeft {
	float:left;
	margin-left:0px;
	color:#5f5c5c;
	font-size:10px;
	padding-left:0;
	
	}

#footerRight {
margin-top:-15px;
	float:right;
	margin-right:0px;
	padding-right:0;
	}

.contactRollover {
margin-right:0px;
display:inline;
float:right;
width:52px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
text-indent:-9999px;
}

a{ outline:none;}

a.contactRollover:link, a.contactRollover:visited, a.contactRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
}

a.contactRollover:hover {background-position:-52px 0;}

.legalRollover {
display:inline;
float:right;
width:93px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
text-indent:-9999px;
}


a.legalRollover:link, a.legalRollover:visited, a.legalRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
}

a.legalRollover:hover {background-position:-93px 0;}


#searchField {display:inline;}


#goButton  {display:inline;}


.goButton {margin-top:3px;}



.goRollover {
display:inline;
float:left;
width:19px;
height:19px;
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
text-indent:-9999px;
}


a.goRollover:link, a.goRollover:visited, a.goRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
}

a.goRollover:hover {background-position:-19px 0;}


ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
	text-align: left;
	font-size: 11px;
}




/* Joomla core stuff */
a:link, a:visited {
	color: #c64934; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #900;	text-decoration: none;
	font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}


table.contentpaneopen td {
   padding-right: 5px;
  
   }

p.contentpaneopen  {
   padding-right: 5px;
  
   
   }

table.contentpaneopen td.componentheading {
	padding-left: 4px;
}



table.contentpane {
  width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
}

table.contentpane td.componentheading {
	padding-left: 4px;
}

table.contentpaneopen fieldset {
	border: 0px;
	border-bottom: 1px solid #eee;
}

.button {
  color: #c64934;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
	padding: 2px;
	border:solid 1px #cccccc;
	background-color: #ffffff;
}

.componentheading {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;

}

.contentcolumn {
	padding-right: 5px;
}

.contentheading {
	height: 30px;

	color: #002469;
	font-weight: normal;
	font-size: 16px;
	white-space: nowrap;
	padding-left:2px;
}



.contentpagetitle {
	font-size: 13px;
	font-weight: bold;
	color: #cccccc;
	text-align:left;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

div.moduletable {
	padding: 0;
	margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-left: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
	background-color : #ffffff;
}

.sectiontableentry2 {
	background-color : #f9f9f9;
}

.small {
	color: #999999;
	font-size: 11px;
}

.createdate {
	height: 15px;
	padding-bottom: 10px;
	color: #999999;
	font-size: 11px;
}

.modifydate {
	height: 15px;
	padding-top: 10px;
	color: #999999;
	font-size: 11px;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background: url(../images/menu_bg.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ccc;
	text-align: left;
	padding-top: 5px;
	padding-left: 18px;
	height: 20px !important;
	height: 25px;
	width: 100%;
	text-decoration: none;
}

a.mainlevel:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #fff;
}

a.mainlevel#active_menu {
	color:#fff;
	font-weight: bold;
}

a.mainlevel#active_menu:hover {
	color: #fff;
}

a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #c64934;
	text-align: left;
}

a.sublevel:hover {
	color: #900;
	text-decoration: none;
}

a.sublevel#active_menu {
	color: #333;
}

.highlight {
	background-color: Yellow;
	color: Blue;
	padding: 0;
}
.code {
	background-color: #ddd;
	border: 1px solid #bbb;
}

form {
/* removes space below form elements */
	margin: 0;
 	padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

span.article_seperator {
	display: block;
	height: 1.5em;
}




/*added styles*/

#search {
height:30px;
width:190px;
background-color:#4c6696;
	margin-top:0px;
	
	
	
}

.white {
color:#fff;
padding:5px;
font-size:11px;
}



/*Added from 3 col layout*/



p  {margin: 0; padding: 8px;}

h2 {font-size: 1.2em; text-align: center; padding: 10px;}

.clear { clear: both; }

a {text-decoration: underline; font-weight: bold; color: #000;}

.alignright {margin-top: 0; text-align: right;}

.small {font-size: .9em;}


.wrapper {
margin: 0 auto;
width: 768px;
text-align: left;
/*background: #add8e6;*/
background: #ffffff;
border: 0px solid #000;
color:#5f5c5c;
}

/*** Below is the Tan hack, needed because the decorative side borders (thin black) on 
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/

* html .wrapper {
width: 771px; 
w\idth: 768px; 

}

.outer {
border-left: 150px solid #ffffff;  
border-right: 190px solid #ccd3e1;
background: url(images/blackline.gif) 100% 0 repeat-y;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes 
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different 
BG location, due to a BG placement variation. 
***/

* html .outer {
background:  url(images/blackline.gif) 565px 0 repeat-y;
}

.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: 620px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border: 0px solid #000;
border-width: 0 0 0 0px;

}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/

* html .inner {
width: 100%;

}

.float-wrap {
float: left;
width: 567px;
margin-left: -150px;       /*** Same length as left column width ***/

}

/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
.left {
	margin-top:25px;
	
}


#line {
border-right:1px solid #000000;
height:100%;
}

.right {
float: right; 
width: 190px;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
background-color:#ccd3e1;
}

* html .right {
margin: 0 -190px 0 0; /*** IE gets this margin. ***/
}

.center {
margin-top:23px;
float: right;
width: 415px;
background: url(/silence/templates/rhuk_solarflare_ii/images/navBlueLine.gif) repeat-y 0 0;


}

.leftCenter {

width:2px;

}

.wide {
background-color: #002469;    /* header and footer colours */
width: 100%; 
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;


}

.wide p {padding: 5px;}

.top {border-width: 0 0 0px;

overflow:hidden;}

.bottom {border-width: 2px 0 0;}

/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}



.grey {
	color:#5f5c5c;
	
}
.newsflash {
	padding: 15px 10px;
	width:175px;
		color:#5f5c5c;
	font-size: 10px;
}

.newsflashTitle {
	color:#4c6696;
	font-weight:bold;
	margin-left: -7px;
	font-size: 11px;
}


a.readon {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}

a.readon:hover {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}

a.readon:visited {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}

Any help would be greatly appreciated.

Thanks.

P.s. How do I post links to the site on here?...I tried but it removed the URL saying (URL address blocked: See forum rules)

I am trying to set a table to sit on the bottom of the browser at all times, like a hovered BG image. Anyone know how to do this?

I've tried this but I obliviously don't know what i'm doing

#grass
{
position:absolute;
bottom:100%
background-repeat: no-repeat;
background-position: 0px -0px;
}

(it's a landscaping website, i want grass on the bottom on the screen)

Hi
I have an image positioned on my page with this

Code:

.notpos {
	overflow: visible;
	position: absolute;
	visibility: visible;
	z-index: auto;
	height: auto;
	width: auto;
	left: 170px;
	top: 20px;

}

The problem is when a different screen resolution is used the image moves .......... can anyone help please?