How do you remove the jagged edges from a wide button in internet explorer? For example:
You can also eliminate Windows XP's styling of buttons (and every other version of Windows) by setting the background-color and/or border-color on your buttons.
Try the following styles:
background-color: black;
color: white;
border-color: red green blue yellow;
You can of course make this much more pleasing to the eyes. But you get my point :)
Stack Overflow uses this approach.
As a workaround, you can remove the blank spaces on each end of the button, which has the effect of decreasing the jagged edges. This is accomplished with the following css and a bit of jQuery:
input.button {
padding: 0 .25em;
width: 0; /* for IE only */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto;
}
$(function(){
$('input[type=button]').addClass('button');
});
The jQuery is for adding the button class. A more in depth write up can be found here.
Setting overflow: visible; on the button will cure the issue in IE 6 and 7.
(See http://jehiah.cz/archive/button-width-in-ie)
Exceptions
In IE 6, if display:block; is also applied to the button, the above fix won't work.
Setting the button to display:inline; in IE 6 will make the fix work.
If you have a button like this within a table cell, then the table cell won't contract to the new, smaller width of the button.
You can fix this in IE 6 by setting width: 0; on the button. However, in IE 7 this will make everything but the text of the button disappear.
(See http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie)
More info on styling buttons:
http://natbat.net/2009/Jun/10/styling-buttons-as-links/
You can change the border style of the button with CSS, like this:
/**************************************************************************
Nav Button format settings
**************************************************************************/
.navButtons
{
font-size: 9px;
font-family: Verdana, sans-serif;
width: 80;
height: 20;
position: relative;
border-style: solid;
border-width: 1;
}
Not too much you can do about it, but the good news is that it is fixed in IE8
http://webbugtrack.blogspot.com/2007/08/bug-101-buttons-render-stretched-and.html
Related
I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle
Since browse button(input control) looked different in these three browsers, I tried to make it look similar by making its opacity 0 and put a dummy button under it and make it look like user is clicking the dummy button(even made sure that browse control is of the same size of that of the dummy button) and it worked fine for IE 11.
When I tested the page in chrome and firefox, there were some spacing issues and also in Firefox, the width I have set for the input control is not working.
<input id="Browse" type="file" value="button" style="z-index:12; position:relative; left:0px;opacity:0; width:63px; display:inline-block">
<asp:button ID="btnBrowse" runat="server" text="Browse" style="z-index:1; position:absolute;left:595px; height:21.5px"/>
</input>
This is what I did. Can some one help me out here!?
If you want them to look the same, or at least close, apply a reset style to the button element.
Reset CSS
input{
display: inline-block; /* allows margins and padding, but floats like text */
margin: 0;
padding: 0;
border: 0;
outline: 0; /* removes the outline when you click a form element */
}
Styling CSS
input{
height: 1.5rem;
width: auto;
padding: 0.75rem 1.5rem;
line-height: 1.5rem; /* same as height - centers vertically */
color: black;
background: gray;
}
I was styling input fields recently and this should give you a good start.
I'm trying to overlay text on an <input type="text"> (for cross-browser placeholder support). I've found that my positioning is always off by a couple of pixels, because of some kind of padding which can't be removed by setting padding: 0;. The suggestions here and here do not solve the problem.
You can see this padding in the following screenshot from Chrome, as the white space between the blue highlight and the yellow border:
How can I a) remove this space; or b) measure it using Javascript?
If you replace the default borders with your own, the padding goes away (at least for me, on Chrome/Mac):
This is the CSS I used:
input {
padding: 0;
outline: none;
border: 1px solid red;
}
http://jsfiddle.net/NZZ5B/
You need to reset everything. So it is best recommended to use:
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
Hope this helped.
I'm still to this day surprised when I run into the slideDown jumpy bug in jQuery. Been reading so much about it, articles on jQuery for designers and so on. Still can't wrap my head around it.
Is there still no easy way to solve this without storing heights and so on? Any other take to get to the same result?
Made a basic example of my code in question, but I guess it's the same as in any other buggy case.
http://jsbin.com/oyokoc/20/edit
There is no bug as such you are saying in slidetoggle actually,
The problem is with how the browser behave to the default padding and margin for the tags like p, if they are not visible the default padding and margin are not added,
but as soon they become visible they are added in the layout and i.e. the reason of this jumping you are mentioning.
Here is something I did for ignoring these implementation error:
.more{
display: none;
background: #eee;
/* added to make the margin and padding instead of p */
padding: 5px;
margin-top: 5px;
}
/* removing the default margin and padding of p */
p{
margin: 0px;
padding :0px;
}
Here is the demo http://jsbin.com/udexix/1/
UPDATE
If you want to use multiple p and dont want to change the default padding and margins, what you can do is you can change the display style for all the p to inline-block
Here is the code for that as well:
.more{
display: none;
background: #eee;
/* no changes here */
}
/* changing the display property of p */
p{
display: inline-block;
}
Here is the demo 2 http://jsbin.com/udexix/8/
I wrote a small script to let a label move out of the way everytime the corresponding input field is needed.
Please check it out here: http://jsfiddle.net/5nZWJ/68/
The problem is: it works just as expected in Firefox, but all other browsers I tried (Chromium, Internet Explorer and others) don't keep the bottom-border justified (hard to explain but you will see it if you try it out).
What do I have to change to make this thing in all browsers look like in Firefox?
Thank you in advance!
I have solved your problem. It is now smooth in all browsers: http://jsfiddle.net/5nZWJ/70/
The key is having #formWrapper positioned absolutely from the bottom. This means when the height is increased it expands from the bottom up and doesn't need to recalculate the position from the top.
CSS:
#wrapper {
background-color: lightblue;
height: 110px;
width: 500px;
position:relative; /* Allows absolute figures to be predictable */
}
#formWrapper {
background-color: yellow;
border-bottom: 4px solid red;
bottom: 29px; /* Changed from top and new measurement added */
left: 120px;
height: 57px;
position: absolute;
z-index: 1;
width: 108px;
}
JavaScript:
I removed all lines of code referring to the position, as it no longer needs to be changed or recalculated.
I think this might be related how different browsers count border pixels
http://ejohn.org/blog/sub-pixel-problems-in-css/
(not actually the same problem, but you get some idea)
Instead of using border, I recommend you add a div wrapper around the element, with the background color set to border color and padding set to the border width.