sumbit button formatting error

Board index » YUI 2.x: » Using YUI 2.x Components

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Chen Zheng

Username: kfcnhl
Joined: Fri Jan 29, 2010 6:40 am
Posts: 9

Tags:

sumbit button formatting error

Posted: Wed Mar 17, 2010 6:40 am

+0-

I am trying to get my button to align with the rest of my inputs.
However, it seems that the .submit formating is not applied.
How come?

Thanks,
Chen

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Marketing Revenue</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>



<link rel="stylesheet" type="text/css" href="./yui2/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="./yui2/build/yahoo-dom-event/yahoo-dom-event.js"></script>


<script type="text/javascript" src="./yui2/build/element/element-min.js"></script>
<script type="text/javascript" src="./yui2/build/button/button-min.js"></script>

<style type="text/css">
.submit {
margin-top:10px;
margin-left: 130px;
width: 150px;
}

fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;

}

label {
display: block;
text-align: right;
float: left;
width: 75px;
padding-right: 2px;

}

.absolute_input {
position: absolute;
left: 150px;
}

.header{
}

select {
font-size: 0.9em;
width: 150px;
}

</style>


</head>
<body class="yui-skin-sam">
<div class="container">
<div class="content">
<script type="text/javascript">
YAHOO.util.Event.onContentReady("top", function () {
var oSaveButton1 = new YAHOO.widget.Button("submitButton");
} );

YAHOO.util.Event.onContentReady("bottom", function () {
var oSaveButton1 = new YAHOO.widget.Button("saveButton");

function onSubmit(p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this change?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}

}

YAHOO.util.Event.on("amount", "submit", onSubmit);
} );
</script>

<h1 class="header"><em>Marketing Revenues</em></h1>
<form id="marketing_revenue" name="marketing_revenue" method="post" action="MarketingRevenue.html">
<fieldset id="top">
<legend>Input</legend>
<label for="tradeid">Trade ID:</label>
<input type="text" id="tradeid" name="tradeid" class="absolute_input"/>
<br />

<label for="source">Source:</label>
<select id="source" name="source" class="absolute_input">
<option value="source1">One</option>
<option value="source2">Two</option>
<option value="source3">Three</option>
</select>
<br />
<input type="submit" id="submitButton" name="submit_Button" value="Get Amount" class="submit"></input>

</fieldset>
</form>
<form id="amount" name="amount" method="post" action="MarketingRevenue.html">
<fieldset id="bottom">
<legend>Output</legend>
<label for="amount">Amount:</label>
<input type="text" id="amount" name="amount" class="absolute_input"/>
<br />
<input type="submit" id="saveButton" name="save_Button" value="Save" class="submit"></input>
</fieldset>
</form>

</div>
</div>
</body>
</html>

Chen Zheng

Username: kfcnhl
Joined: Fri Jan 29, 2010 6:40 am
Posts: 9

Re: sumbit button formatting error

Posted: Thu Mar 18, 2010 12:41 pm

+0-

Help plz!!!!

Matt Parker

YUI Contributor

Username: mattatlamplight
Joined: Mon Apr 20, 2009 12:03 pm
Posts: 465
Location: London UK
GitHub: mattparker
Gists: mattparker

Re: sumbit button formatting error

Posted: Thu Mar 18, 2010 2:49 pm

+0-

It's hard to tell looking at the code you've posted. I find it's quickest and easiest to look at the element that's misbehaving using Firebug to see what css is coming from where, and then turning things off, adding new rules, or editing them until it's where I want.

Matt

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum