[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Button style

Posted on 2011-03-01
10
Medium Priority
?
296 Views
Last Modified: 2012-05-11
I have purchased this template
http://themeforest.net/item/slate-admin/full_screen_preview/133854 
and it uses
<div class=""><button type="submit" class="btn">Login</button></div>

However, I'm using asp.net and the button renders
<div class=""><input type="submit" name="btnLogin" value="Login" id="btnLogin" class="btn" /></div>

The buttons look totally different.
Why is this? How can I make it work with using input instead of submit?
0
Comment
Question by:JRockFL
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 18

Expert Comment

by:ChetOS82
ID: 35007679
What do you mean about it looking totally different?  Could you post a screenshot?
0
 
LVL 8

Author Comment

by:JRockFL
ID: 35007789
Yes, please see the screen shot
screenshot.jpg
0
 
LVL 18

Expert Comment

by:ChetOS82
ID: 35007815
Did you simply put the <asp:Button /> inside the html <button /> tag?  You screenshot makes it look like it is nested.

You can completely remove the button tag in the html, just use your asp:Button with CssClass = "btn".
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 18

Accepted Solution

by:
ChetOS82 earned 2000 total points
ID: 35007865
You could also try:

<div class=""><button runat="server" name="btnLogin" id="btnLogin" class="btn">Login</button></div>
0
 
LVL 8

Author Comment

by:JRockFL
ID: 35008065
In the screen shot I just replaced "button" with "input"
Since the asp:button is rendered as "input" and not "button"

Is it possible to get it to display correctly using input?
0
 
LVL 18

Assisted Solution

by:ChetOS82
ChetOS82 earned 2000 total points
ID: 35008109
Input and button have different default styles.  In the css file, the .btn class has been styled in such a way as to get <button> to look right.  Your best option is to have asp.net send a button rather than input.
0
 
LVL 12

Expert Comment

by:Amick
ID: 35008176
I cut and pasted the code from your original message into a blank file, added the button styles and got identical buttons for both pieces of code.


 Button Comparison
This suggests that your ASP CSS selector is not recognized in production.
0
 
LVL 8

Author Comment

by:JRockFL
ID: 35008884
Amick,

I'm not sure what you did. Can you explain more?
In my screen shot attached from above, I just modified the html to eliminate asp.net out of the equation.
0
 
LVL 8

Author Closing Comment

by:JRockFL
ID: 35013540
I have added runat="server" to other elements in the past such as a div or h1 tag, but not to a button tag like this.

I was concerned about the click event, but it works.
There is a ServerClick event.

    Private Sub btnLogin_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnLogin.ServerClick

    End Sub

Thank you for your help
0
 
LVL 12

Expert Comment

by:Amick
ID: 35014421
JRockFL,

You asked what I did to get the screenshot presented above.  I simply pasted your code into a blank html template and referenced the appropriate button styling.  The first time around, I think I only referenced screen.css.

Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Button Test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<base href="http://madebyamp.com/themes/slate/">
	<link rel="stylesheet" href="./css/screen.css" type="text/css" media="screen" title="no title" charset="utf-8" />
</head>

<body>
I have purchased this template
http://themeforest.net/item/slate-admin/full_screen_preview/133854 
and it uses
<div class=""><button type="submit" class="btn">Login</button></div>

However, I'm using asp.net and the button renders
<div class=""><input type="submit" name="btnLogin" value="Login" id="btnLogin" class="btn" /></div>

The buttons look totally different.
Why is this? How can I make it work with using input instead of submit? 

</body>
</html>

Open in new window

0

Featured Post

What’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question