my asp buttons are getting blurred after disabling them through code in Internet Explorer.on mozilla it is working fine.
Css applied to buttons are
.Login-btn{
font-family: Tahoma;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-image: url('../images/Login-btn.jpg');
background-repeat: repeat-x;
padding-right: 20px;
padding-left: 20px;
display: block;
width: auto;
float: left;
text-decoration: none;
margin-left: 10px;
}
Login-btn.jpg is blank image on which i am writing text.what can be the problem
Well, IE gives a disabled effect to html buttons ignoring whatever CSS that you may have. So there are no real solutions but few work-arounds:
Instead of disabling button, add a onclick handler that would return false (but button will still remain click-able).
Create your own custom button implementations that rely on hyper-links
You should create a separate style selector for disabled buttons, something like this should work across most browsers, even IE (7+):
.Login-btn[disabled="disabled"], .Login-btn.disabled{
}
see: this link
Related
I have some HTML being generated in the controller and passed to the view to be added to a "SlickGrid". The problem I'm having, is that the CSS styles that SHOULD be applied are not being applied to that HTML. It's happening in a couple of instances, all with the same symptoms.
The HTML that is displayed is this (taken from Chrome's inspector tool):
<div id="pba-progress-688-5" class="checkpointLegend clickable A tipper" title="Approved<br><i>Composition Table</i><br>Click to go to this checkpoint.">✓</div>
The classes clickable, A, Tipper are not being applied, AND there is some checkpointLegend stuff that is not being applied as well.
checkPointLegend looks like this:
.checkpointLegend {
text-align: center;
vertical-align: middle;
font-weight: bold;
cursor: pointer;
}
.checkpointLegend div {
border: 1px solid #CCC;
border-radius: 4px 4px 4px 4px;
float: left;
height: 14px;
margin: 2px;
width: 12px;
font-size: 10px;
text-align: center;
line-height: 14px;
cursor: pointer;
}
The .checkpointLegend portion IS being applied, but the DIV part is NOT being applied.
Any thoughts as to why these classes are not being applied to the HTML when it is rendered?
For reference:
I'm using a fork of SlickGrid (https://github.com/andrewchilds/SlickGrid)
The CSS works fine in a WEBGRID (so I know it works), but the webgrid is too slow to handle the amount of data I'm throwing at it.
The controller generates the HTML and passes it to the view via an ajax call. The html is dumped directly into a cell in the slickgrid.
I'd be happy to clarify anything that needs to be clarified, or post more code if needed.
Any thoughts/pointers/suggestions/solutions would be GREATLY appreciated (I've been banging my head off my desk for 2 days on this...)
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?
I have a drop down menu that I have styled using CSS and a Jquery plugin named: Selectbox. http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Everything is working great and looks perfect in Firefox, Chrome, and Safari. But for some reason when I click the drop down box in Internet Explorer the drop down floats all the way to the right and not directly beneath the drop down. I have only been coding 3 months so it could be a really stupid mistake but I can't seem to figure it out. Any help would be appreciated.
Here is the HTML:
<div class="foldersoption">
<select name="Items" id="Items">
<option value="option1">My Items</option>
<option value="option2">Shoes</option>
<option value="option3">Birthday Ideas</option>
</select>
</div>
Here is the CSS:
.foldersoption{
float: left;
margin-left: 25px;
}
div.selectbox-wrapper ul li {
border: 1px solid #FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
list-style-type: none;
padding: 5px;
text-align: left;
width: 243px;
}
.selectbox {
cursor: pointer;
display: block;
float: left;
font-size: 15px;
height: 25px;
padding-left: 5px;
text-align: left;
width: 250px;
}
Can you help please?
Apply zoom and position relative to the foldersoption element, and other elements as needed. For example:
.foldersoption {
zoom: 1;
position: relative;
}
This will force IE to treat it like the other browsers do. IE doesn't handle floating very well - you have to give it some additional configuration & constraints in order for it to work properly.
Edit: Based on the screenshots, IE is complaining about security issues - is there a chance it is blocking certain scripts from loading as well? Try disabling or reducing the security in IE and see if the menu drops.
Edit #2: Actually that plugin you used is old and does not appear to be well tested or maintained. Can I suggest an alternative?
http://plugins.jquery.com/project/jQuerySelectBox
You can see an example here: http://labs.abeautifulsite.net/projects/js/jquery/selectBox/
I tested it in IE7 and it seems to work ok. Seems extremely simple to set up, and to change the appearance you only need to change or override the default CSS styles.
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.
I have a button i want to convert the button into a hyper link, it works fine in Mozilla but in Internet Explorer it presses down as a button a click takes place ... so please help ....
Input.Button-Link, input.Button-Link:active
{
border: 0px;
behavior: url("cssHover.htc");
padding: 0px;
width: auto;
overflow: visible;
background: transparent;
color: Blue;
text-decoration: underline;
display: inline-block;
}
input.Button-Link:active
{
padding-right:50px;
outline:0;
}
Input.Button-Link:hover
{
cursor: pointer;
}
I don't understand what you're trying to accomplish but here are a few things you can try:
Add styles to input.Button-Link:focus
By using <input type="image" src="button.gif" alt="Button" />
In conjunction with jQuery use this plugin to style your buttons
You need JavaScript to solve this for IE.
IE's behaviour here is hard-coded and can't be changed with CSS IIRC. The last thing that springs to my mind is to use display: inline instead of display: inline-block.
You might be better off using a link and a tiny bit of JavaScript.