|
CSS - Image Submit Button Alignment Problem
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 Similar TutorialsHi 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) Hi There, If you put images in in replacement for standard form buttons they don't align properly. I have been trying to move away from nested tables with my current work in favour of css layouts and was wondering if there is any quick and easy way to align button images? If you look at the following URL the 'add to basket' buttons are higher up thean they should be..... http://www.storesprite.org/taml/vie...l?category_id=3 Thanks 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? 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 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. 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; 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>
Sounds simple... but I can't find an answer. I've a simple table row with a css background image. In the row I've my text links and two images that are links. While in firefox everything lines up nice and straight... in intercrash exploder it's all over the place, the images are almost subtext and the text is almost text top.. Any advice? The page can be seen at addcolour (co uk extension) CSS in a folder css the file name is addcolour Many thanks d 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. Anyone know a trick to get a submit button to display on the same line as an input field and not have it drop. My issue is that it is either pushed down a few pixels, or up a few pixels, as if something is padded. Code: <form action="#" method="post">
<span>Join our mailing list</span>
<input type="text" name="email" value="your e-mail address" class="v-email" />
<input type="submit" value="" name="submit" class="btn" />
</form>
In the above example, the submit button is pushed down a few pixels as if it is padded. In Firefox however, it is pushed up a couple pixels. How can I get it to display inline perfectly. Assume that the styled button and the input field are the same height. Hi there, I have a simple submit button with the word "Search!" as the value. However, in FF, it is appearing aligned nearer the bottom of the button where as in IE it is centered correctly. This is what I mean: This is my CSS: PHP Code: .search_button{ background: url("images/search.jpg") repeat-x; border: 0px solid ; font-family: verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; width: 80px; height: 24px; font-weight: bold; vertical-align:middle; } and my HTML: PHP Code: <input name="" type="submit" value="Search!" class="search_button"/> Any ideas why this is and how I can center it in FF? Do any questions get answered here? How would I get a simple input form to align with a submit button? You can see the problem at: bit.ly/ovFGhR The CSS txt file: bit.ly/nMyP45 My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned. Please help!! Hey any idea why submit button at this page is not working??? http://www.ajilanyureq.com I have form located below the google map on this page - http://www.hometowntrans.com/map_hours.asp I want to style it such that it has a 3d look to it if you will, with a gray background and black text. Is it possible to display a submit button in a form as a regular link? I'm not allowed to use Javascript, so it has to be done in CSS. Thanks When viewed in IE my form's submit button shows up with a black border around it, and when clicked onto another blank space of the space, it goes to normal colors as applied in this css code. Code: font-family:verdana,arial,helvetica,sans-serif; font-size:12px; background-color: #FFFFFF; color : #000000; border: 1px solid #A5B4BC; What could fix this? Thank you. Ok, so I just used Pagination for the first time (Yay). I'm creating a make shift shopping cart, and was trying to align "Add to Cart" to show at the bottom of the product listing. Right now, the products show 5 per row, and the format is: image of item item name price Then there is some padding and I want the submit button to appear at the very bottom of the div (within the a href if possible). I have the a href set as display:block, so when hovered over, the area is gray. I want the submit button to be within that area. I have tried with several variations (I did move the </a> to after the </form> line: - Placed the <form> lines within a separate div and tried aligning it to the bottom using margin-bottom - Tried styling the <input> using margin-bottom as well. My knowledge of divs isn't really that good as I never really used them much before, so I'm sure it's something simple enough. Right now when I do place it in the <a href></a> area, the Add to Cart button shows up right under the item_name... so it's staggered as item names may take up 1, 2, or 3 lines. And keeping it under the link area makes the button too far down. If you need further info, let me know. Here's the code to pulling the info from the products table: Code:
$query = "SELECT `id`, `image`, `item_name`, `msrp` FROM products $limit";
$result = mysql_query($query, $conn) or die(mysql_error());
$i == 0;
while($row = mysql_fetch_array($result)) {
extract($row);
$i ++;
$image_loc = "images/products/" . $image;
$j = $i/5;
$display .= "<div id=\"store\"><a href=\"view_item.php?id= ".$id."\"><img src=\"".$image_loc . "\" style=\"width:100px; padding-bottom:5px;\"><br />" . $item_name . "</a>";
if ($logged_in != 'false') {
$display .= "<form action=\"add_cart.php\" method=\"post\">";
$display .= "<input type=\"hidden\" value=\"".$id."\">";
$display .= "<input style=\"margin-left:20px;\" type=\"submit\" value=\"Add to Cart\">";
$display .= "</form>";
$display .= "</div>";
}
if (is_int($j)) {
$display .= "<div style=\"clear:both;\"></div>";
} else {
}
}
Here's the CSS: Code:
#store {width:150px;
float:left;
padding-bottom:30px;
padding-left:15px;
padding-right:15px;
}
#store a{display:block;
text-decoration:none;
padding:10px;
height:200px;
}
#store img{border:0;
}
#store a:hover{background:#ccc;}
I have created a nice tablesless form with CSS except for the submit buttons. I can't seem to align them to the middle and in IE6 they overflow the form border html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Interest</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <STYLE TYPE="text/css"> <!-- #Interest label,#Interest input { display: block; width: 200px; float: left; margin-bottom: 10px; } #Interest label { text-align: left; width: 150px; padding-right: 20px; font-weight: bold; } #Interest br { clear: left; } #Interest form { border : 1px solid #000; padding : 5px; } --> </STYLE> </HEAD> <BODY> <DIV ID="Interest"> <FORM METHOD="POST" ACTION="/cgi-bin/form.pl"> <INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="paul.wright@npl.co.uk"> <BR> <LABEL FOR="name">Name</LABEL> <INPUT NAME="name" ID="name"><BR> <LABEL FOR="company">Organisation</LABEL> <INPUT NAME="company" ID="company"><BR> <LABEL FOR="email">E-mail address </LABEL> <INPUT NAME="email" ID="email"><BR> <LABEL FOR="phone">Telephone no. </LABEL> <INPUT NAME="phone" ID="phone"><BR> <LABEL FOR="outcome">Comment(s) </LABEL> <TEXTAREA NAME="outcome" ROWS="10" COLS="60" ID="outcome"></TEXTAREA> <BR> <INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1"> <INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR> </FORM> </DIV> </BODY> </HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|||||||