The following CSS apparently results in the following Button. As you can see there is a weird gray plain button within the white padding. How do I fix this?
How do I make the gray go away?
.button_style {
background-color: white;
color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
NOTE: The green space is the background, the white space and gray space are both clickable button.
Use border: 0 or border: none to remove that. By the way, what browser are you using?
HTML
<button class="button_style">hello</button>
CSS
.button_style {
border: 0;
background-color: white;
padding: 15px 15px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
This is what I had previously, which was giving me the plain gray button:
<p><span class="button_style">Website</span> </p>
I changed it to the following, which resolved my problem:
<input class="button_style" type="button" onclick="location.href = 'http://www.botequotes.com';" value="Visit Site" />
NOTE: JavaScript must be enabled in order to use 'onclick="location.href'
Related
Well, I have two buttons (in Spanish) and these buttons are inside an 'a' (link tag) so that:
<div class="MB789">
<button class="B121">Ya soy miembro</button>
<button class="B122">Quiero unirme</button>
</div>
The purpose of the 'a' is obviously to redirect the user to the respective page and the buttons are for the style (yes, I want the user to see buttons and not links)
In the CSS I wrote the following:
.MB789{
display: table;
padding: 10px;
text-align: center;
}
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.MB789 a{
margin: 10px;
background: red; /*Debug: to visualize the elements 'a'*/
}
This is the result:
And that's the problem, that the 'a' elements stand out from the buttons.
And this is what happens when I tell the elements to show themselves as a table.
.MB789 a{
display: table;
background: red; /*Debug: to visualize the elements 'a'*/
}
Then this is what happens:
What I want is that 'a' elements do not protrude from the buttons, but that when the user click on a button, be redirected to the respective link.
Note: I know that Javascript can be redirected, but I refrain from doing this using that language because the user can disable Javascript from the browser settings.
Firstly, you cannot nest <button></button> elements inside an <a> tag, that is invalid markup. Please see why here: Can I nest a <button> element inside an <a> using HTML5?
Secondly you can style the <a> tag like a button and this will resolve your problem.
Your HTML markup needs to look like this:
<div class="MB789">
Ya soy miembro
Quiero unirme
</div>
Your CSS would look like this:
.MB789{
display: inline-block;
padding: 10px;
text-align: center;
}
.MB789 a{
display: inline-block;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
You've put a 10px margin on the buttons, because they're inside of the a tags this margin will be between the buttons and the edge of the a tags, making them protrude out from the button. Try removing that margin:
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
cursor: pointer;
}
Dont know why the form's input button of the right (Aceptar) is smaller than the div made button of the left when the CSS is the same (except for a general border: 0 on the input's).
Any clues? CSS below:
Div button:
.boton {
width: 5em;
background-color: #8d99ae;
text-align: center;
border-bottom: 2px solid #2b2d42;
padding: 0.1em;
display: inline-block;
}
Input button:
input#boton {
width: 5em;
color: #edf2f4;
background-color: #8d99ae;
text-align: center;
border: 0;
border-bottom: 2px solid #2b2d42;
padding: 0.1em;
display: inline-block;
}
As Andrei mentionned, you should include a CSS reset. But I'm pretty sure that in your case, setting a "line-height" value would solve the issue.
I am running a site inside of an application viewer. This viewer will render the website in IE8 compatibility mode which I have no control over and can't change.
I have an input with top/bottom padding of 6px and left/right padding of 12px, but for some weird reason the bottom padding is ignored and the padding is incorrect.
Here is a screenshot of what I'm seeing:
Here is the CSS I'm using to style the input field:
input[type="text"] {
line-height: 1.42857143;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
padding: 6px 12px 6px 12px;
*padding: 6px 12px 6px 12px;
}
I have Googled around for a while now and can't seem to be able to find a solution to my problem. Many tips I found suggest to use various line-height adjustments, while some suggest to use *padding: 6px 12px 6px 12px;. None of these tips work and the issue still exists.
How can I force the input to have equal top and bottom padding in IE8?
Note: I CANNOT use the http-equiv meta tag as it will cause other problems with the viewer.
You cannot :(
you may style a regular tag instead :
span {
float: left;
border: inset gray 2px;
background: white;
line-height: 2em;
height: 2em;
}
span input {
border: none;
}
.submit,
.submit input {
background-color: #337AB7;
border: solid #337AB7 2px;
width: 3em;
color: white;
text-align: center;
}
p {
display: inline-block;
box-shadow: 0 0 3px white;
}
body {
background: tomato;
}
<p>
<span>
<input type="text" value="(800) 123-456789" />
</span>
<span class="submit">
<input type="submit" value="Dial"/><!-- unless this a link , styles to be applied here & span can be skipped -->
</span>
</p>
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.
What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?
.icon-picker {
border: 0px solid #000000;
margin-right: 5px;
width: 24px;
height: 24px;
background-color: #FFFFFF;
padding-bottom: 4px;
}
.selected {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid #000000;
}
.icon-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 15px;
max-width: 300px;
}
Thanks for your time.
jsfiddle
You need to make the <i> tag a block element for the width and height to be applied to the element.
See fiddle
.icon-picker {
border: 0px solid #000000;
display: inline-block;
margin-right: 5px;
width: 24px;
background-color: #FFFFFF;
}