?
Solved

Button style

Posted on 2011-03-01
10
Medium Priority
?
295 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses
Course of the Month8 days, 14 hours left to enroll

764 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