Firefox border-radius rendering weird wide effects - html

I am having some eird side effects when using border-radius in firefox.
Opening the following html renders some triangles on some of the button borders.
see the side effetcs here : http://i.imgur.com/GyqiEL8.png (I do not have enough reputations for images)
the code is
<html>
<head>
</head>
<body>
<form>
<input style="border-radius: 10px;" value="Continue" type="submit">
</form>
</body>
</html>
Anyone have any ideas ? I am using FF 28.0
Thanks


This is working all browser:
CSS
.myButton {
width: 180px;
height: 48px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(0,0,0,1);
font: normal 11px/48px "Lucida Grande";
border: 1px solid rgba(128,128,128,1);
-webkit-border-radius: 67px;
-moz-border-radius: 67px;
border-radius: 67px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
background-image: -moz-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
background-image: -o-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
background-image: -ms-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
background-image: linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
-webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
HTML
<button type="button" class="myButton">Button</button>


For sure it is a browser issue. Try updating or try going through these troubleshooting steps: https://support.mozilla.org/en-US/kb/websites-look-wrong-or-appear-differently


Some of the themes/skins for Firefox can change default behavior of form elements, including buttons. That may be one of potential causes. Can be resolved with:
-moz-appearance: none;
-webkit-appearance: none;

Related

CSS not working on my HTML

I am trying to add some css to my button and for some reason this is not working.
Index page
<input style="margin-top:10px;" type="submit" class="loginButton" title="Subscribe" value="Subscribe" />
CSS
.loginButton {
-moz-box-shadow: 0px 0px 0px 1px #ffffff;
-webkit-box-shadow: 0px 0px 0px 1px #ffffff;
box-shadow: 0px 0px 0px 1px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9e0000), color-stop(1, #ff0000));
background: -moz-linear-gradient(top, #9e0000 5%, #ff0000 100%);
background: -webkit-linear-gradient(top, #9e0000 5%, #ff0000 100%);
background: -o-linear-gradient(top, #9e0000 5%, #ff0000 100%);
background: -ms-linear-gradient(top, #9e0000 5%, #ff0000 100%);
background: linear-gradient(to bottom, #9e0000 5%, #ff0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e0000', endColorstr='#ff0000',GradientType=0);
background-color: #9e0000;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: 1px solid #1c0101;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Trebuchet MS;
font-size: 18px;
padding: 18px 44px;
text-decoration: none;
text-shadow: 0px 1px 0px #000000;
}
What could this be? as I used this style before.

It works pretty well for me
Double check your CSS paths and class hierarchy.

It's working. Make sure to include the correct path for external CSS or if you are using inside the html file, make sure to mention the css script inside
<style type="text/css"></style>
https://i.stack.imgur.com/NkrJ8.jpg

Hi it is working fine and please double check you code, if not just add the css class as shown below (add the class with input)
input.loginButton{ /*HERE YOU CAN ADD YOUR CSS CODE*/}

Input type file solution with rgb color effect

Hello everyone this is my old problem for input type file css style problem.
This is input type file HTML code :
<input type="file" name="select_img" class="select_style" />
And this is for input type file css code:
.select_style {
float:left;
width: 80px;
height: 27px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(255,255,255,1);
font: normal 12px/27px "Lucida Grande";
border: 1px solid rgba(44,81,21,0.24);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
I asked friends they said many solution but there is not use full for me. then i solved the problem and ....

input type file HTML code
<input type="file" class="file-input">
and CSS code solved problem with rgb color effect:
.file-input {
color: transparent;
}
.file-input::-webkit-file-upload-button {
visibility: hidden;
}
.file-input::before {
width:80px;
height:27px;
content: 'Select files';
color:#fff;
display: inline-block;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: bold;
font-size: 13px;
line-height:27px;
text-align:center;
}
.file-input:hover::before {
border-color: black;
}
.file-input:active {
outline: 0;
}
.file-input:active::before {
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -moz-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -o-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -ms-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: linear-gradient(top, #008c10 0%,#00c714 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
body {
padding: 20px;
}
Click to see here

css select file css style doesn't work [duplicate]

This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 9 years ago.
I am trying to create input file button with css style . But it does not work. My css code woking all browser but style is not working....
This is my script. enter link description here
This is inptu type html code :
<input type="file" name="select_img" class="select_style" />
And this is css code:
.select_style {
float:left;
width: 80px;
height: 27px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
color: rgba(255,255,255,1);
font: normal 12px/27px "Lucida Grande";
border: 1px solid rgba(44,81,21,0.24);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}

This tutorial: http://www.quirksmode.org/dom/inputfile.html gives very detailed instructions on how to style input[type=file] with css.

Give .select_style and opacity of 0 and create a different div element with the other styles you have along with a z-index of -1. Then use relative positioning on that div to put it in the exact same spot as the file input. Then, when the user clicks on that styled div they will actually be clicking on the file input.
Example:
<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;">Upload File</button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px;; left: -20px" />
</div>
Taken from this answer: https://stackoverflow.com/a/3030174/2374365

Look at this one it might help you
http://jsfiddle.net/gabrieleromanato/mxq9R/
HTML
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="file" name="upload"/>
</div>
</form>
CSS
iv.upload {
width: 157px;
height: 57px;
background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png);
overflow: hidden;
}
div.upload input {
display: block !important;
width: 157px !important;
height: 57px !important;
opacity: 0 !important;
overflow: hidden !important;
}

Hi everyone this is my solution code thanks for help, but all code is not usefull for me i create new code then i solved my problem.
Click and see in jsfiddle.net
HTML input code is here:
<input type="file" class="file-input">
And only css for input type file button:
it is very user full i used rgb color with hover effect.
.file-input {
color: transparent;
}
.file-input::-webkit-file-upload-button {
visibility: hidden;
}
.file-input::before {
content: 'Select files';
color:#fff;
display: inline-block;
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -moz-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -o-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: -ms-linear-gradient(top, #00c714 0%,#008c10 100%);
background-image: linear-gradient(top, #00c714 0%,#008c10 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font-size: 10pt;
}
.file-input:hover::before {
border-color: black;
}
.file-input:active {
outline: 0;
}
.file-input:active::before {
background-image: rgba(235,235,235,1);
background-image: -webkit-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -moz-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -o-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: -ms-linear-gradient(top, #008c10 0%,#00c714 100%);
background-image: linear-gradient(top, #008c10 0%,#00c714 100%);
-webkit-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
-moz-box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
box-shadow: rgba(206,223,255,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}
body {
padding: 20px;
}

CSS3 create this button using only single DIV

I am trying to create a button similar to this in CSS3. (all HTML5 browsers should be supported):
Button image
HTML:
<div class="buttonClass">Nitin Mukesh</div>
CSS:
body {
background: gray;
margin-top: 50px;
margin-left: 50px;
}
.buttonClass {
width: 300px;
height: 40px;
padding: 10px 60px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%); /* firefox */
border: solid #91BDD6 5px;
outline: solid #fff 5px;
-moz-box-shadow: 3px 1px 24px #000000;
-webkit-box-shadow: 3px 1px 24px #000000;
box-shadow: 3px 1px 24px #000000;
}
JSFiddle
I could possible think of a solution that using 2 div will solve the problem with outer div hold the white outline and box-shadow and inner div with outline and gradient color.
Is it possible to achieve this using single div.
Many thanks for any inputs

This is what I came up with: http://jsfiddle.net/psycketom/heGu9/2/
.button
{
display: block;
background-image: linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(145,189,214) 0%, rgb(255,255,255) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(145,189,214)),
color-stop(1, rgb(255,255,255))
);
/* Added second shadow for that "black" effect */
box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
-o-box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
-ms-box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
-moz-box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
-webkit-box-shadow: 0px 0px 0px 5px white, 0px 0px 10px 5px black;
border-radius: 15px;
-o-border-radius: 15px;
-ms-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border: solid 5px rgb(145,189,214);
padding: 60px;
margin: 7px; /* to complement the outside shadow */
}

box-shadow can have multiple shadow, so:
http://jsfiddle.net/cyzw8/4/
.buttonClass {
width: 200px;
height: 40px;
/* padding: 10px 60px;*/
text-align:center;
line-height:40px;
border-radius: 7px;
background-image:-webkit-linear-gradient(top,#FFF 0%,#91BDD6 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #91BDD6 100%);
background-image:-ms-linear-gradient(top,#FFF,#91BDD6);
background-image:-o-linear-gradient(top,#FFF,#91BDD6);
background-image:linear-gradient(top,#FFF,#91BDD6);
border: solid #91BDD6 5px;
box-shadow: 0px 0px 0px 5px #fff, 5px 3px 12px #000000;
}
This is what I see in my Chrome:

Here is a second way http://jsfiddle.net/Merec/Va4qG/
<div class="buttonClass"><span>Nitin Mukesh</span></div>
.buttonClass {
display: inline-block;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(145,189,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(145,189,214,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(145,189,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(145,189,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(145,189,214,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(145,189,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#91bdd6',GradientType=0 ); /* IE6-9 */
}
.buttonClass span {
padding: 5px 10px;
display: block;
border: 2px solid #91bdd6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

CSS Button Won't Render In Email Template

I have an email template here that uses CSS for a button. In most mail clients, the button appears just fine (a green gradient). In Gmail, however, the button does not appear.
See screenshot (rendered in Gmail):
Here is the button code:
.button {
background-image: -webkit-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
background-image: -moz-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
background-image: -ms-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
background-image: -o-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
background-image: linear-gradient(top, rgba(168,224,0,1) 0%,rgba(126,163,3,1) 50%);
-webkit-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
box-shadow: 0px 0px 0px 1px rgba(250,250,250,1)inset;
border: solid 1px rgba(112,112,112,1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 180px;
height: 44px;
padding: 0px 24px 0px 24px;
display: block;
font-size: 18px;
font-family: Arial, Sans-serif;
line-height: 40px;
text-align: center;
color: rgba(247,247,247,1) !important;
font-weight: bold;
margin: 0 auto;
}
a.button {
text-decoration: none !important;
}
.button:hover {
background-image: -webkit-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
background-image: -moz-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
background-image: -ms-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
background-image: -o-linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
background-image: linear-gradient(top, rgba(168,224,0,1) 0%,rgba(137,179,0,1) 50%);
-webkit-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
box-shadow: 0px 0px 0px 1px rgba(239,249,254,1)inset;
border: solid 1px rgba(179,179,179,1);
}
.button:active {
-webkit-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
box-shadow: 0px 0px 0px 1px rgba(154,186,203,1)inset;
Any idea what's wrong or how to fix it?

Most email clients render HTML as if it were 2001 standards.
You can't used :hover or any other interactive pseudo selector
You should make the button an image so that it renders the same across all email clients.
You need to remember that people may be getting your email in desktop & web clients. Outlook probably has the biggest problem with rendering html / css.
If you are using Mailchimp, I believe they have a testing tool that you can use to replicate how your code will render in different clients.
Good luck.