CSS - Scroller Bkgd Image Moves In Ie

Hello, not entirely sure how to go about this, but I'm using Dreamweaver CS5 and I'm working on my home page.

The way I have it set up is I have a "sidebar" to the left, then a large "main_image" to the right of that which begins my "container" div followed by some "body_copy" below that.

Everything looks good when the window is in a max size. The problem arrises whenever I resize my window the main_image moves to below the sidebar and everything just seems to shift down...

The main_image is set to relative so the body_copy text can form properly under it.

Is there any way to have the image remain stationary despite window size?

Thanks for your help!!

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)

This website look the way it should be in SeaMonkey & Firefox but it doesn't work in IE. IE also throw in the scroll bar.

Any idea what's wrong? Is it possible to get rid of the scroll bar and to have that margin effect?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <style type="text/css">
   html
   {
     background-color: #d0a060;
     border: groove thick brown;
     margin: 8px;
   }
  </style>
 </head>
 <body>
  Blah Blah Blah!
 </body>
</html>

Thanks...

Edit: Forgot to post the source code...

I want to show 2 divs, and allow the user to horizontal scroll (in a surrounding div with overflow:hidden and white-space:nowrap) to the next 2 divs. It works fine if I use images with full widths. But...

Issue I'm running into is this, if i use float:left, it wraps the divs to the next line and doesn't expand horizontally past the width of the div. If i use display:inline, i can't set the widths of the divs, and since they are text based, they show up as tiny divs, only the width of the text.

So, what would be a solution here?

CSS
Code:

#wrap {
padding:30px 0 0 0;
width:500px;
height:310px;
border:1px solid black;
white-space:nowrap;
overflow:hidden;
}
#wrap div {
	display:inline;
	width:245px;
}

HTML
Code:

<div id="wrap">
    <div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></div>
</div>

and obviously the javascript would be included to allow the div to scroll onlick. But I just need the initial setup of this.

hello,

don't mozilla (or netscape, both the latest versions) support scroller created in CSS ??
The below code works fine in Internet Explorer but in Mozilla there is no scroller shown. ....

Code:

<div style="width:100%; height:430; overflow-y:auto; overflow-x:auto; border:1px dashed black; text-align:justify; background-color:white;">

// contents ...

</div>

Comments on alternative solutions to above code...??..anybody?