HTML - Header Navigation Not Aligning
For some reason the rollover navigation isn't aligning with the rest of my header images.
Firefox and Safari - No good. IE 7 - ok. LINK TO PAGE Does anyone see what wrong in my code? Similar TutorialsI'm trying to make a navigation bar that has the buttons taking up the full height of the container it is in, and have a width with just a few pixels padding on each side. Full height problem: I added this code: Code: ul#nav li { height: 100%; } but it only takes up as much as the padding takes up. Padding problem: When I add padding/margin on the top, instead of bumping the actual navigation button down, it overflows on the top and so there is a little green square sticking out. I want it to be perfectly centered inside the container. Please help! Thanks. I am designing a header for my website and need to put text on both the left and right hand side of the topline for the website. When I try to put the code it overspills to next line so when I save it all the information I need on the same line goes over to the next line. How can I put the code in a different line in my coding but display it on the same line on a browser? Hello everyone, So here is my page... http://www.mytodostuff.com you will notice between the header and the navigation menu, there is a small white space that goes across the whole page... how do i delete that white space so the bottom of the header (the blue box) touches the top of the navigation(the orange and white colors)? any assistance on showing me how to do this would be greatly appriciated Thanks everyone for taking the time to read this thread and thanks even more to those that respond. Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? Hey, im trying to find out why the header on my website isnt at the top of the page. it also moves sometimes even though the code appears to be all the same. the address is www.themonsterbox.com thanks in advance for any help. Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions. Example script: <div style="text-align: left; position: absolute;"> <!-- Begin BidVertiser code --> <script language="JavaScript1.1" src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&bid=341700" type="text/javascript"></script> <noscript><a href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet advertising</a></noscript> <!-- End BidVertiser code --> </div> <div style="text-align: center;"><a href="http://pinkkittens.org/"><img alt="Banner" src="http://pinkkittens.org/images/pinkkittenbannernew.png" style="border: 0px solid ; width: 815px; height: 121px;" align="top"></a></div> <div id="flashcontent" style="text-align: center;"></div> <script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script> I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers? Web address for better viewing pleasure is http://www.pinkkittens.org/ I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left? And then there is a random box that appears in the top, how do I remov this? Thank you HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <input> </head> <body> <form id="form1" action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&type=1&ar=30178" method="post" name="form1"> <script type="text/javascript">// <![CDATA[ function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; } // ]]></script> <div id="seller_opt" class="optin" style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial"> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Name:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard_ownerName" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >E-mail Address:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerEmail" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Zip Code:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerZip" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15"> </div> <p class="text" style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal" >Mobile Phone*:</p> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard$ownerMobilePhone" style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP: 2px; font-size-adjust: none; font-stretch: normal" onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25"> </div> <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt"> <input id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton" class="submit" style="MARGIN: 0pt 0pt 0pt 25px" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))' name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton" value="Finish" src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg" type="image"><br> *Optional </div> </div> </form> <br> </body> </html> You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help! So I'm working on a <dl> and using this bit of code as an example: <style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; } </style> <dl> <dt>first item</dt> <dd>definition for first item in list</dd> <dt>second item</dt> <dd>definition for second item in list<br> extending across more than one line</dd> <dt>third item</dt> <dd>definition for third item in list</dd> </dl> That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page: http://site.outletpccomputerrepair.c...opups/test.htm whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help! I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot: http://img80.imageshack.us/img80/6827/screenshotjs.png Have a look. The lines are two pictures, they are split close to the middle. How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side? Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks. <form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <div class="AccordionPanelTab"></div> <div class="AccordionPanelContent"><form action="file.php" method="post"> <table border="3" width="600"> <tr> <td><strong>First One</strong> </td> </tr> <input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td> </tr> </table> <table border="3" width="600"> <tr> <td><strong>Second One </strong> </td> </tr> <input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td> </tr> </table> <p></p> <input type="submit" value="Submit" name="submit"><br/></form><br/> Im trying to get the two items in this table aligned. One is suppose to be on the left side of the screen, the other on the right side but I cant get it to work. What am I doing wrong? <table> <tr> <td align="left"> <p>Im suppose to be on the left side of the screen</p> </td> <td align="right"> <p>Im suppose to be on the right side of the screen</p> </td> </tr> </table> I'm trying to align my link in the center of the page, but from some reason it still appears left. Here's the code I'm using- Code: <a href="http://or-bar.tripod.com/wheeloftime.html" align="center">Next</a> What am I doing wrong? Hello there i have just created a simple website using div tags as layers to position link elements on the page. I have 2 pages the first page has an image link that takes the user to the second page and the image link has been aligned in a div tag to position it onto the screen. When i test the first page in most browsers the aligning seems to be perfect and is aligning well in all browsers. The problem im facing is on the second page, i have done exactly the same procedure to align a form element and an image link but when published and previewed in safari it is aligned perfectly but in most other browsers the div aligning for the form and the image link are not aligned at all. i cant figure out this problem because the first page is done exactly the same way and that works in all browsers, could someone please please have a look for me its probably something really simple but i cant see it. Below is the source code for both page 1 with the aligning in all browsers image link, and the second page the one that needs to be positioned correctly in all browsers: (PAGE 1 THE IMAGE LINK ON THIS PAGE ALIGNS CORRECTLY IN ALL BROWSERS AND IS FIN) <HTML> <HEAD> <TITLE>HARMONIC WEBSITE p1guides</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 > <div align="center"> <div style="background-image:url('Background.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;"> <div style="z-index: 1; align: right; padding-top: 517px; padding-left: 273px;> <a href="index.html></a> <a href="page2.html"><IMG SRC="images/index_19.jpg" BORDER=0 WIDTH=219 HEIGHT=44 ALT=""></a> </div> </div> </div> </BODY> </HTML> (PAGE 2 THE FORM AND IMAGE LINKS ARE POSITIONED EXACTLY THE SAME AS PAGE 1 BUT APPEAR TO BE OUT OF POSITION IN DIFFERENT BROWSERS?) <HTML> <HEAD> <TITLE>HARMONIC WEBSITE p2guides</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <!-- ImageReady Slices (HARMONIC WEBSITE p2guides.psd) --> <BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 > <div align="center"> <div style="background-image:url('Backgroundp2.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;"> <div style="z-index: 1; padding-top: 260px; padding-left: 700px;> <TABLE WIDTH=328 BORDER=0 CELLPADDING=0 CELLSPACING=0 > <TD IMG SRC="form background.jpg" WIDTH=328 HEIGHT=248 BORDER=1 ALIGN="LEFT"> <form action="mailto:YOUR EMAIL ADDRESS" method="post" enctype="text/plain" border=0 > <br> <input type="text" name="name" value="" size="30"> <br><br> <input type="text" name="Position/primary specialty" value="" size="30"> <br><br> <input type="text" name="Number of patients treated" value="" size="5"> <br><br> <input type="text" name="Hospital" value="" size="30"> <br><br> <input type="text" name="Email address" value="" size="25"> <br><br> <a href="page3.html"> <input type="submit" value="Send"> <a> <input type="reset" value="Reset"> </form> </TD> </div> <div style="z-index:2; padding-top: 66px; padding-left: 520px; margin-top: 0px;> <a href="index.html></a> <A HREF="http://www.harmonic.com"> <IMG SRC="p2-click_15.jpg" BORDER="0" WIDTH=46 HEIGHT=21 ALT=""></A> </div> </div> </BODY> </HTML> <div align="center"> <table height="117" cellspacing="0" cellpadding="0" border="0" class="btn1 boxbtn1"> <tr> <td> <a href="images/gymfu.png" rel="lightbox[roadtrip]" title="Gym Fu - Branding">image #1</a></td> </tr> </table> </div> ----- I've tried 'valign="middle" ' in the html code, and also 'vertical-align:center' in the css. no joy. Can anyone help? Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks. <form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <div class="AccordionPanelTab"></div> <div class="AccordionPanelContent"><form action="file.php" method="post"> <table border="3" width="600"> <tr> <td><strong>First One</strong> </td> </tr> <input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td> </tr> </table> <table border="3" width="600"> <tr> <td><strong>Second One </strong> </td> </tr> <input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td> </tr> </table> <p></p> <input type="submit" value="Submit" name="submit"><br/></form><br/> Hi, I want to align some text but not with the center or something but i want it to aling to a square on my background image and i also want to make it so that is looks the same on widescreens. at the moment i do it like this <BODY leftmargin="150%" topmargin="220%"> f </BODY> But when i enter window mode the text also moves. can someone help me with tihs ? Hey All, So I have this frustrating situation illustrated by this screeny: www.kiddyjunction.ca/images/pic.jpg The yellow box (which is an iframe) aligns to center itself between those beige flash tabs on the left, and the other side of the white box, which is PERFECT. However, the logo, represented by the red box, aligns itself to be in the center of the white box, instead of between the edge and the flash material, despite all being in the same container. How do I get the logo to align over the center of the iframe (yellow box)? Thanks! Hey guys, i have 3 tables that I want to align like 1 2 3 at the moment they are 1 2 3 any ideas, here is the code i have HTML Code: <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>Xbox 360 GT:</td> </tr> <tr> <td><input type="text" name="x360gt" value="x360" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit1" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PS3 GT:</td> </tr> <tr> <td><input type="text" name="ps3gt" value="ps3" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit2" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> <br> <form action="process.php" method="POST" class="style1"> <table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3"> <tr> <td>PC GT:</td> </tr> <tr> <td><input type="text" name="pcgt" value="pc" /></td> <td></td> </tr> <tr><td colspan="2" align="right"> <input type="hidden" name="subedit3" value="1"> <input type="submit" value="Edit Gamertag"></td></tr> </table> </form> Could anyone help me out please Hi All, I Though i had all this figured out, But unfortunatly thats not the case im actually beginning to pull my hair out now All i want is three buttons in a line with a margin about seperating them from the web form. But i get the attached Heres my HTML HTML Code: <div class="leftColumn"> <asp:Label ID="lblUserRef" runat="server" CssClass="StandardLabel" Text="User Ref" Style="margin-left: -7px; margin-right: 7px;"></asp:Label> <asp:TextBox ID="txtUserReference" Style="margin-left: 2px" runat="server" ToolTip="Please enter a User reference" CssClass="ShortTextBox"></asp:TextBox> </div> <div class="SmallSpace"> </div> </div> <div class="ButtonContainerDiv"> <div class="ButtonHolder"> <a href="#" class="CancelButton">Cancel</a> <a href="#" class="RaiseButton">Raise</a> <a href="#" class="SaveButton">Save</a> </div> </div> </asp:Content> The small space has a pixel height of about 3. My Css for the buttons. HTML Code: .ButtonContainerDiv { margin-top:30px; width:760px; height: 100px; margin-left:auto; margin-right: auto; } .ButtonHolder { margin-left:auto; margin-right: auto; margin-bottom:auto; margin-top:auto; } /* CANCEL BUTTON */ .CancelButton { -moz-box-shadow:inset 0px 0px 5px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 5px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ad0034), color-stop(1, #db0042) ); background:-moz-linear-gradient( center top, #ad0034 5%, #db0042 100% ); background-color:#ad0034; -moz-border-radius:12px; border:1px solid #616161; display:inline-block; color:#ffffff; font-family:Verdana; font-size:16px; font-weight:bold; padding:8px 40px; text-decoration:none; float: left; } .CancelButton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db0042), color-stop(1, #ad0034) ); background:-moz-linear-gradient( center top, #db0042 5%, #ad0034 100% ); background-color:#db0042; } .CancelButton:active { position:relative; } /* SAVE BUTTON */ .SaveButton { -moz-box-shadow:inset 0px 0px 5px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 5px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1b214), color-stop(1, #d19602) ); background:-moz-linear-gradient( center top, #f1b214 5%, #d19602 100% ); background-color:#f1b214; -moz-border-radius:12px; -webkit-border-radius:12px; border:1px solid #616161; display:inline-block; color:#ffffff; font-family:Verdana; font-size:16px; font-weight:bold; padding:8px 40px; text-decoration:none; } .SaveButton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d19602), color-stop(1, #f1b214) ); background:-moz-linear-gradient( center top, #d19602 5%, #f1b214 100% ); background-color:#d19602; } .SaveButton:active { position:relative; } /* RAISE BUTTON */ .RaiseButton { -moz-box-shadow:inset 0px 0px 5px 0px #ffffff; -webkit-box-shadow:inset 0px 0px 5px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #549228), color-stop(1, #377508) ); background:-moz-linear-gradient( center top, #549228 5%, #377508 100% ); background-color:#549228; -moz-border-radius:12px; -webkit-border-radius:12px; border:1px solid #616161; display:inline-block; color:#ffffff; font-family:Verdana; font-size:16px; font-weight:bold; padding:8px 40px; text-decoration:none; float:right; } .RaiseButton:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #377508), color-stop(1, #549228) ); background:-moz-linear-gradient( center top, #377508 5%, #549228 100% ); background-color:#377508; } .RaiseButton:active { position:relative; } Please someone help me |