I'm using a sprite as an input button. It works fine in Firefox and > IE8. However, in IE7&8, the ID value shows over the png graphic. It looks like this:
(I would embed, but I'm not allowed): Pre-Hack Sprite
I went through and found a hack for this, minimizing the font size and line height.
font-size:0px; /*IE7-8*/
line-height:0px; /*IE7-8*/
This then created what almost looks like a scratch over the button:
Post-Hack Sprite
Any ideas? Here's my HTML:
<form action='memberSelection' method='post'>
<div id="providersearchopt1">
...
<p class="left"><input class="btnsearch" type="submit" id="formSubmit" name="formSubmit" /></p>
Here's the CSS:
input[type="submit"].btnsearch {
width:96px;
height:27px;
background-color:transparent;
background-position:0px 0px;
background-image:url(images/btn-search.png);
cursor: pointer;
border: none;
color: transparent;
font-size:0px;
line-height:0px;
}
input[type="submit"].btnsearch:hover {
background-position:0px -27px;
background-image:url(images/btn-search.png);
}
EDIT - SOLUTION:
Change in CSS:
line-height: 100px; /*IE7-8*/
font-size: 0px: /*IE7-8*/
This will then work in both FF and IE.
You can use type="image", I think hover works on that too with js I forgot really.
or you can make the button using anchor and use JS to submit
Related
I found a somewhat annoying glitch in Firefox. See this jsfiddle: http://jsfiddle.net/zMX75/2/.
The blue part is supposed to be hoverable. But, in Firefox with a button tag, it simply does not work.
Here is the code:
button, .button {
position:relative;
overflow:visible;display:inline-block;
height:23px;padding:0 5px;border:0;margin-left:20px;
font-size: 12px;line-height:23px;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #000;
background: #ff0;
&::before, &::after {
position:absolute;top:0;
display:inline-block;width:20px;height:23px;
content: "";
background: #00f;
}
&::before {left:-20px;}
&::after {right:-20px;}}
I use this code to make an arrow like button using a sprite.
So, I'd like to know if there is a workaround other than changing the tag, because it is used to submit a form.
One solution is to give the button some left and right padding, and to position its ::before and ::after over the padding; so that they are inside the button's clickable area.
In other words, adding this to the CSS works:
button {padding:0 25px; margin-left:0;
&::before {left:0}
&::after {right:0}
}
See updated fiddle.
That said, I'm not sure why it does work with the <a>. If the button needs to be solved like this, why doesn't the <a> need to be treated the same way? Oh well.
Give
display:block;
Not
display:inline-block;
I am having the css sprite image.And it works fine but the issue is I want the image right side of the anchor tag's text.But it displays in the left side.The sprite image is here.
http://jstiles.com/temp/1360875952/ctrls/css-sprite.png
Expected result:
[Mylinktext]<MyImagehere>
Actual result what I am getting is
<MyImagehere>[Mylinktext]
I don't want to use after pseudo class.Becuase it wont work out in the IE7 browser too.My code is below.
.ctrls
{
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
background-image: url(images/ctrlsprite.png);
//background-image: url(images/css-sprite.png);
background-repeat:no-repeat;
text-decoration:none;
display: inline-block;
padding-left:30px;
}
.ctrls:hover
{
background-position: 0px -252px;
text-decoration:underline;
}
a.magenta
{
background-position:0px -144px;
}
And HTML
<div>
<p>Magenta</p>
Et Movet
</div>
How can I place the image right side of the Text?
How about adding a <span> to the right of the text in the anchor tag? Demo
HTML
<div>
<p>Magenta</p> Et Movet <span class="icon"></span>
</div>
CSS
.ctrls {
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
text-decoration:none;
}
.ctrls:hover {
text-decoration:underline;
}
.ctrls .icon {
display: inline-block;
background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
background-repeat:no-repeat;
width: 16px;
height: 16px;
background-position:0px -144px;
}
.ctrls:hover .icon {
background-position: 0px -252px;
}
When I tried your code, the result seems to be as you want: [Mylinktext]<MyImagehere>. I'm probably missing something. Try and explain what and will try and help you out.
Personally, I wouldn't use a sprite. Instead, I would make one image per color (I find that easier to work with) or, even better, make a font with the character I want (reference: http://mashable.com/2011/11/17/free-font-creation-tools/; I haven't tried any of the programs, so I don't know how good they are)
and then use the #font-face Rule (reference: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).
In Google Chrome, radio buttons show a unwanted white background around the circle. This is not shown in Firefox as intended.
Please check these images.
And her is the direct link of the page having the issue (check in Firefox and Chrome)
https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4
Any CSS tricks that I can apply for Chrome?
this is a known Bug in Chrome which does not have real workarounds.
The only option I see and use at this point of time is to use a sprite sheet with images of the check boxes. I made a fiddle to show it to you with some random sprite I found on the internet:
Workaround
HTML:
<div id="show">
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p />
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
CSS:
div#show {
width:100%;
height: 100%;
background:black;
margin: 10px;
padding: 10px;
}
input[type="radio"] {
/* Uncomment this to only see the working radio button */
/* display:none; */
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}
You could create your own sprite with radio buttons in your desired design...
Hope that helps, if you have any more questions, let me know.
-Hannes
Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin. This worked for me:
Markup:
<div class="radio_contain">
<input type="radio" id="r1" name="r1">
</div>
CSS:
.radio_contain {
display: inline-block;
border-radius: 100px;
overflow: hidden;
padding: 0;
}
.radio_contain input[type="radio"] {
display: block;
margin: 0;
}
I know this is an old thread, but I had this same problem and it took me a while to figure it out, so I'm posting this if someone else has the same problem.
I figured it out quite accidentally really. I was looking at something else and zoomed in on page using ctrl and scroll, and saw that radio button didn't have white background any more (and looked better). So I just put:
zoom: 0.999;
in right css class and that fixed it for me.
I have a button as made for you to see here. Looks fine,right? Well on the live site, euroworker.no/shipping and /selectAddress it seems stretched.
Renders fine in Chrome, IE and Safari, I thought it might have been a FF issue, but loaded the fiddle into FF and seems fine.
Quick ref CSS and html:
#fortsett_btn {
background-image: url(http://euroworker.no/public/upload/fortsett.png?1269434047);
background-repeat:no-repeat;
background-position:left;
background-color:none;
border:none;
outline:none;
visibility: visible;
position: relative;
z-index: 2;
width: 106px;
height: 25px;
cursor:pointer;
}
And HTML
<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value=""> </button>
I wonder what's up with it.
Instead of
<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value=""> </button>
Try this :
<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">Some value</button>
then add text-indent:-999px; to your CSS
This has nothing to do why your button is unaffected on live site, its just suggestion. You button doesn't style probably because you're missing a style sheet(wrong link), try styling it inline, then if it works copy the style to the style sheet
I'm not sure I understand the problem. The CSS is different in each case. On Fiddle you have a single image with a background-repeat set to no-repeat. On the live site you have a slice of a different image with background-repeat set to repeat-x. Those are two different ways of styling the button.
Fiddle:
#fortsett_btn {
background-image:url("http://euroworker.no/public/upload/fortsett.png?1269434047");
background-position:left center;
background-repeat:no-repeat;
border:medium none;
cursor:pointer;
height:25px;
position:relative;
visibility:visible;
width:106px;
z-index:2;
}
Live:
#product___specField_8 {
-moz-border-radius:5px 0 0 5px;
background-image:url("stylesheet/frontend/../../upload/orng_bg.png?1269434608");
background-repeat:repeat-x;
border:1px solid #DDDDDD;
float:left;
font-size:24px;
font-weight:bold;
height:33px;
padding-left:55px;
width:124px;
}
Why wouldn't you expect to see something different?
this will be quite difficult to explain. I hope I'm able to.
I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:
.button{
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #999;
cursor: pointer;
text-decoration: none;
color: #606060;
}
Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings
background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;
The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like
<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>
On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.
To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg
On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg
Does anyone have any suggestion on how I could fix this??
//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.
This is an old bug. You need to add overflow:visible to the button. There is more here:
http://jehiah.cz/archive/button-width-in-ie
and here:
http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/
Just try a css reset of submit button first (at the beginning of css file). For example margin, padding etc set to zero.
I am not quite sure how apply reset for submit buttons ..
but you can try following and test
/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td { margin:0;padding:0; }
body { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p { font-size:100%;font-weight:400; }
ol,ul { list-style:none; }
caption,cite,code,th { font-style:normal;font-weight:400; }
fieldset,img { border:0; }
caption,th { text-align:left; }
:focus { outline:1px dotted #eee; }
table { border-collapse:collapse;border-spacing:0; }
hr { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button { cursor:pointer; }
As per #Andrew's answer you can try * html input { overflow: visible; } also.