AllSeoHelp.com
Search the Entire Site
  • PHP
  • JavaScript
  • CSS
  • HTML
Learn VBA & Macros in 1 Week!

CSS - Problem: Positioning Image Submit Button Moves Textfield Also
Full Excel VBA Course - Beginner to Expert

Problem: Positioning Image Submit Button Moves Textfield Also

 View Content
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)
Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Image Submit Button Alignment Problem
Want To Replace Submit Button With Image, But Don't Want Words On Image
Positioning Text In Textfield
Textfield Positioning Problems
Positioning: Div Box Moves Off Screen
Submit Button Background-image
Help: Positioning / Floating/ Images Move When Browser Moves
Problem With Css On Standard 'submit' Button...
Using A Background-image On A Submit Button Adds An Extra Border In Ie
Opera 7.54 Submit Button Cursor Problem
Problem With Positioning Image
Image Positioning Problem
Image Positioning Problem?
Background Image Positioning Problem
Image Moves When Window Size Changes
Scroller Bkgd Image Moves In Ie
Html/css Layout And Image Positioning Problem
Background Image Positioning And Table Problem In Firefox
Problem Positioning Background Image On An Active Parent
Ie7 Problem: Button Image Not Shown


Learn VBA & Macros for Excel in 1 Week!


Image Submit Button Alignment Problem

 Similar Tutorials View Content
hi

i have following xhtml

Code:
<body>
<div id="content" class="centrehack">
<div id="header"  class="centrehack">
 <div id="topRightLogin"> 
 <form action="#" method="post">
 <input type="text" name="uname" value="username" />
 <input type="password" name="passwd" value="password" />
 <input type="image" src="images/headerlogin.gif" />
 
 </form>
 </div>



and following css

Code:
.centrehack { margin: 0 auto 0 auto; }
#content { width:960px; text-align:center; height:100%; overflow:visible; background:url(images/headerback.gif) repeat-x; }
#header { width:960px; height:47px; text-align:center; }

#topRightLogin { 
 width:450px;
 height:47px;
 float:right;
 color:#fff;
 font-weight:bold;
 font-family:Verdana, Geneva, sans-serif;
 border:#000 solid 1px;
 height:30px;
 display:block;
 padding:0;
}

#topRightLogin input,submit { 
 display:inline;
 padding:0px;
 margin-left:5px;
 height:21px;
 margin-top:0px;
}



i want to display form fields and submit button in a single line with perfectly aligned horizontally. but the form fields are showing empty area above them and going down than the submit button. the problem remains same in all browser.

i am attaching a screenshot of the problem as well. any help is much apprecated. thanks

Want To Replace Submit Button With Image, But Don't Want Words On Image

 Similar Tutorials View Content
Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like

Code:
<input type="image" src="..."



and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much?

Positioning Text In Textfield

 Similar Tutorials View Content
My problem is with 2 textfields that I am using css to text attributes, all is well in IE, but in netscape and firefox the letters q,y,p the bottoms get cut off. Any suggestions greatly appreciated.
here is a link to the page i am working on
http://www.cfwilson.com/365c/index.htm
Charles

Textfield Positioning Problems

 Similar Tutorials View Content
I am trying to construct a site using a complete de-coupled design. My problem concerns some absolute positioned textfields. I do not wish to use a table to display the form, as this would defeat the whole purpose of the project.

The page in question can be found here

The CSS is as follows (exmaple of the name header and text field

Code:
/* Contact Form Positioning */

.NameFormTitle
	{
		position: absolute;
		left: 15px;
		top: 110px;
		display: inline;
	}
	
#NameFormField
	{
		position: absolute;
		left: 120px;
		top: 110px;
		display: inline;
		font-family: Arial, sans-serif;
		color: #999999;
		font-weight: bold;
		line-height: 100px;
	}


In IE 6 all is well. The textfield is the same height as the header, in Firefox and Netscape the textfields are to high. I have tried line height, but as the elements are absoluted positioned this has no effect (I think).

Please help

Positioning: Div Box Moves Off Screen

 Similar Tutorials View Content

Submit Button Background-image

 Similar Tutorials View Content
I'm having trouble setting the background image of a submit button. This is my code:

Code:
<input class="submit" type="submit" name="submit" value="Submit" style="background-image:url('img/enter.jpg');" />



I've also tried putting the css in my external css file in the .submit tag... didn't work. I know the path to the image is correct because the following works:
Code:
<input type="image" src="img/enter.jpg" />



What gives? Thanks

Help: Positioning / Floating/ Images Move When Browser Moves

 Similar Tutorials View Content

Problem With Css On Standard 'submit' Button...

 Similar Tutorials View Content
Hi all,


I've got a standard 'submit' button that I've applied a CSS style to, with this code:

<input type="submit" name="sign in" value="sign in" style="font-weight: bold; color: #FFFFFF; font-size: 10px; border: 1px solid #FFFFFF; background: #A4B1C1;">

The only problem I'm having is that in IE, there's a black border around it, but in Firefox, there's only the white border stated in the CSS style.

Can anybody tell me how I can fix this?

Cheers.

Using A Background-image On A Submit Button Adds An Extra Border In Ie

 Similar Tutorials View Content
i'm trying to style my submit button to have a gradient background with a solid blue border. looks awesome in FF, however when I try to apply the background image to the submit button in IE (6 and 7), there will be an extra border inside of the blue border. it seems to be whatever color i set my background-color to.

Code:
border: 1px solid #69A2CC;
background: transparent url(gradient.jpg) no-repeat scroll 0 center;


Opera 7.54 Submit Button Cursor Problem

 Similar Tutorials View Content
I am trying to use CSS so that when a user hovers their mouse over a submit button, they get a "hand" or "pointer" instead of the default arrow. Below is an example page to demonstrate what I am doing. It works fine in the latest version of Internet Explorer and Mozilla Firefox, but not in Opera 7.54. In Opera 7.54, the cursor changes when I hover over the border of the button, but when I move to the center of the button it goes back to an arrow. Does Opera 7.54 support this style properly or am I doing something wrong?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr0n3" />
<style type="text/css">

/* I have read that I should use pointer, then hand so it is compatible across a range of browsers, but this still doesn't work properly in Opera 7.54 */

.button
    {
    cursor: pointer;
    cursor: hand;
    }

</style>
</head>

<body>
<form action="page.php" method="post">
<p><input type="submit" name="submit" value="Test" class="button" /></p>
</form>
</body>

</html>


Problem With Positioning Image

 Similar Tutorials View Content
Hello,

I don't know whether this is the right forum for my issue, so apologies if it isn't.

To better understand the problem, kindly visit this page:

http://www.lightblu.com/contact.php

Basically, you see those 4 social networking logos? They are at the right position. However, when you click "Submit (without writing anything anything in the form), the errors will display, and the logos will shift downwards as a result. I don't want this. I want the logos to be at the same position.

Question: how could I do this? I'm trying to find the logic first before implementing it, which I can't even figure out.

Thanks guys

Image Positioning Problem

 Similar Tutorials View Content
I have an image I want to use as the header graphic on a website. The image is 800px wide and the table is 700px wide. The graphic is meant to overlap both ends of the table. I am putting the image inside the td of the table and then setting the position to -90px relative to the table to move it across the correct amount. The problem I'm having is that the table changes width to 800px to accommodate the image. I tried putting the image outside the table but can't get the image to maintain its position relative to the table (ie when the screen width changes)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
html, body { height: 100%; }
#maintable 
{ 
	height: 100%; 
}

.logoStyle {
	position: relative;
	left: -90px;
	display: block;
	top: 0px;
	visibility: visible;
}

</style>
</head>

<body style="margin: 0; background-color: #D1D1D1">



<table style="width: 700px" align="center" bgcolor="#FFFFFF" id="maintable">
	<tr>
		<td valign="top">
		<img alt="Logo" src="images/header.png" class="logoStyle" />
		&nbsp;</td>
	</tr>
</table>

</body>

</html>



Can anyone let me know what I've done wrong?

Image Positioning Problem?

 Similar Tutorials View Content

Background Image Positioning Problem

 Similar Tutorials View Content
Hi all

Having some problems with background image positioning - all CSS/XHTML has been validated

See http://community.foe.co.uk/tmp/quote_and_image_test.html

Relevant CSS :

Code:
#imageleft {padding:0px; float:left; width:auto; margin-right:5px; margin-bottom:5px}
.imagecaptionleft{padding:0px; margin:0px; text-align:left; font-size:8pt}

blockquote {
  background: transparent url(/images/common/quote1a.gif) left top no-repeat;
  margin:0px;
  padding: 0px;
  font-weight: normal;
color:#000;
}
blockquote div {
  padding: 2px 30px;
  background: transparent url(/images/common/quote2a.gif) right bottom no-repeat;
}



Relevant html

Code:
<div id="imageleft">
		  <img src="/images/common/dummy.gif" alt="Test image" width="100" height="100" />
<div class="imagecaptionleft">Caption goes here</div></div>
             
	<blockquote><div>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum augue odio, condimentum et, iaculis quis, facilisis nec, quam. Aliquam eros. Nulla ut lorem. Cras bibendum orci at ligula lobortis bibendum.</p>
	</div></blockquote>



The opening quote mark is hidden behind the image - as you can see it has a position of left, and for some reason the <div> within the <blockquote> is including the image so is full width.

Any help appreciated

Image Moves When Window Size Changes

 Similar Tutorials View Content
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!!

Scroller Bkgd Image Moves In Ie

 Similar Tutorials View Content

Html/css Layout And Image Positioning Problem

 Similar Tutorials View Content

Background Image Positioning And Table Problem In Firefox

 Similar Tutorials View Content
Hello,

I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left.

Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works.

Background:
I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes.

An example of the current test is he (URL address blocked: See forum rules)
*not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete.

It is here - classtime . org / test6 . htm

and the navigation image is he
(URL address blocked: See forum rules)
*classtime . org / navigate . png

I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox.

As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem.

Thank you very much for taking a look. My jumbled code is as follows:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">

<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">

a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}


.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}

.top a:hover { 
background-position: 0px -601px; 
}



#left {
 left: -40px;
 width: 150px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: 0px -120px;
 position: relative;
 }

#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}


#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}

#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}

#right {
 width: 154px;
 height: 460px;
 display: block;
 background: url('navigate.png');
 background-repeat: no-repeat;
 background-position: -640px -120px;
 position: relative;
 }

#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}

#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}

#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}


</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
		<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
			<div class="top"> 
			<a href="(URL address blocked: See forum rules)"></a> 
			</div>
		</td>
</tr>
<tr>
		<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
		 	<ul id="left">
  			<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
 		 	<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
  			<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
  			<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
  			<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
 			</ul>
		</td>
		<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
		aaa</td>
		<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
			<p align=right> <ul id="right">
  			<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
  			<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
 			</ul>
 		</td>
</tr>
	
</table>
</div>
</body>
</html>


Problem Positioning Background Image On An Active Parent

 Similar Tutorials View Content
I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised.

The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he

I can't post an image of the menu as it won't let me, being a new poster, which is a pain...
Code:
#horiz-menu a:hover {
            display: block;
            z-index: 100;
            line-height: 22px;
            left:-53px;
            position: relative;
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            padding-left:63px;
            height:27px;
            width:162px;
            border-bottom:1px solid #fff;
            margin-bottom:-3px;
}


To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding.

However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over.

I've achieved this with:
Code:
#horiz-menu li.parent.active a {
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            z-index: 100;      
            line-height: 22px;      
            left:-53px;             
            position: relative;      
            padding-left:63px;      
            height:27px;     
            width:162px;      
            border-bottom:1px solid #fff; 
 }


The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left...

I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too.

I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do?

If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it.

Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated.

Ie7 Problem: Button Image Not Shown

 Similar Tutorials View Content
Hello,

I have a weird problem with IE7. My solution works fine on FireFox, IE8 and even IE6, but on IE7 the button image does not want to load. Here is the HTML and CSS.

Code:
<!DOCTYPE html>
<html>
<head>
	<style>
		.sayhello{
			background: url("hello.png") no-repeat scroll 0 0 transparent;
		    border: medium none;
		    height: 49px;
		    margin-top: 10px;
		    text-indent: -9999px;
		    text-transform: capitalize;
		    width: 85px;
		}
	</style>
</head>
<body>
	<input type="button" onclick="javascript:alert('hello');" value="Say Hello!!" class="sayhello">
</body>
</html>



I can get the button to show if I set the button as position:absolute or else display:block. However these would create me other problems. Is there any other way how I can get the button to show? considering I want to show the button in relative position and next to other buttons.
Privacy