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?
Related
I am using the following to show a <button> for my form.
<button id="btnSend" type="submit" style="width: 100%; height:38px; text-indent:-9999px; border:none; margin-top:20px; cursor:pointer; background-color: blue;">
Send
</button>
I want to know how can I set the font color for it? I tried font-color and color but neither worked for me.
Your text is being moved all of the way off of the page with the text-indent property, so even if you had a color on the font you wouldn't be able to see it.
So remove text-indent: -9999px and then add a color - color: #fff or whatever color you'd like.
JS Fiddle Demo
Also you are better off defining your styles in CSS rather than inline styles. So your updated CSS might look like:
#btnSend{
width: 100%;
height:38px;
border:none;
margin-top:20px;
cursor:pointer;
background-color: blue;
color:#fff
}
you can try this one
<button id="btnSend" type="submit" style="width: 100%; height:38px; border:none; margin-top:20px; cursor:pointer; background-color: blue;">
<font style="color:cyan">Send</font>
</button>
I am customizing checkbox and I have a problem with the background. In Chrome everything is ok but in Firefox there is no background. There is CSS code with background. Please can you tell me what is wrong?
.box-filter input[type="checkbox"]:checked{
background: #000000;
}
As far as I know, it's not possible in most major browsers, which is why a lot of sites implement their own versions of checkboxes using an image for consistent experience. As for Firefox specifically, there is a bug for it (since CSS2 does stipulate that background-color applies to all elements), but it has been resolved as "Won't Fix".
A good way to do custom checkboxes is with an <a> tag. Then you can style them in all kinds of ways, and have an <input type="hidden" value="0"> accompany each one to store it's value. Then you can access its value in a form submission. jQuery takes care of the actual functionality.
HTML:
<a class="pseudo-checkbox" data-role="checkbox" data-checked="0"></a>
<input type="hidden" name="terms" value="0">
The CSS below demonstrates using :before pseudo element to style the box, slightly smaller than the <a> element itself so that the checkmark can overlap the box. An icon-font is used to add a checkmark which will look great on any screen.
a.pseudo-checkbox {
margin:0 10px 0 0;
float:left;
display:block;
width:24px;
height:24px;
position:relative;
}
a.pseudo-checkbox:before {
content:"";
width:16px;
height:16px;
position: absolute;
z-index: 0;
left:0;
bottom:2px;
display:block;
border:1px #868686 solid;
background-color:white;
}
a.pseudo-checkbox:active:before {
background-color:gray;
}
a.pseudo-checkbox i.icon-checkmark {
position: absolute;
z-index:1;
color:#028208;
float:none;
margin:0;
font-size:18px;
top:0;
left:2px;
}
HTML:
JS (jQuery):
$('a[data-role=checkbox]').on('click', function() {
var checked = $(this).attr('data-checked');
var self = $(this);
if (checked == 0) {
self.html('<i class="icon-checkmark"></i>');
self.attr('data-checked', 1);
self.siblings('input').val(1);
} else {
self.html('');
self.attr('data-checked', 0);
self.siblings('input').val(0);
}
});
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
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'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