Solved

Button style

Posted on 2011-03-01
10
290 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
  • 4
  • 4
  • 2
10 Comments
 
LVL 18

Expert Comment

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

Author Comment

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

Expert Comment

by:ChetOS82
Comment Utility
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
 
LVL 18

Accepted Solution

by:
ChetOS82 earned 500 total points
Comment Utility
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
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 18

Assisted Solution

by:ChetOS82
ChetOS82 earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, html5 UI 1 45
2 CSS questions 11 33
Urgent need help ASAP With CSS 5 19
Box Model and Styling 12 19
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now