Solved

Button style

Posted on 2011-03-01
10
293 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
Technology Partners: 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 500 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 500 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

Technology Partners: 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!

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

724 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