I want to add two different padding for Chrome and Firefox, and want to use it in same style sheets. (cant use separate sheets) These are the two styles I want.
for Firefox
padding: 0 0 0 14px !important;
for Chrome
padding: 0 0 0 0px !important;
My knowledge in style sheets is minimum, don't even know this is possible or not. Any sort of help is welcome, Thanks.
Update
code for my button is
<button class="buttonClass" data-dojo-type="dijit.form.Button" onclick="buttonToggle(this);" id="butid">
<input type="image" class="ns" onclick="buttonToggle(this);" value="" />
i haven't tried it. But it should work like this.
here's the link to browser detection via jQuery: http://api.jquery.com/jQuery.browser/
$(function() {
if ($.browser.mozilla) {
$('body').addClass("firefox");
} else if ($.browser.chrome) {
$('body').addClass("chrome");
}
});
I solved It by adding this to deal with Firefox.
#-moz-document url-prefix(){
#butFullScreen .ns, #butFullScreen .fs {
padding: 0 0 0 14px;
height:0px;
width:0px;
}
while using this to other browsers
width:14px;
height:14px;
color: transparent;
Thanks a lot for all the help.
Related
First off, I did research this topic here and via Google for an entire day, and tried all I have found, for some reason I still can not seem to change Bootstrap styling. My custom css DOES work, since the first modification from it worked just beautifully where it did not need to override anything (so there was no default styling for input:hover, which I used, in bootstrap.)
Here is some code:
.input-group-prepend.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
NOTE that the selector here must be like the 20th version I tried. Here I can not change the way the input field behaves when in focus. I tried everything after like a dozen searches on Google, nothing worked. I also used Chrome Inspect to find where box-shadow is used, and inside Inspect I could also CHANGE the property, which resulted the look I desired, but after copying that part to my css with the css selector, it did not work anymore. Having tried also tweaking the selectors to make them more specific, calculated the 'Priority points' or whatever they are called even, used IDs and whatever, and put my stylesheet link after the bootstrap one in the html file - no change (for the better, that is). These all worked for other people here and on YouTube and everywhere on the internet, and seemingly I have the very same situation and solution and for me they still don't. I am thinking of leaving bootstrap and try building something from scratch, but I am not that experienced in CSS, and I feel like I never want to be if it is like this.[enter image description here][1]
Some more code:
button .btn-raised {
box-shadow: 0 30px 0 0 #007299;
}
The second part, when trying to set the box-shadow for buttons, it is not possible, even though neither btn or btn-light, which I use, does do anything with box-shadow, Chrome Inspect simply shows 'none' as the value of this property. (Although I found that there is some transition where it is involved, but no way I can override or disable it.) Again, a hell of a lot of selector variations was tried.
UPDATE: The problem is solved, turned out all the problems I had was because I missed clearing the cache before reloading the page - never forget that! :)
Seems to be working fine for me. I think you may be loading your CSS before Bootstrap or you have other styles overriding your latest styles due to specificity.
As a last resort, just to test this theory, you could try adding !important after your styles. If this works then you know it's an issue with selector specificity but I don't recommend using !important in general.
eg:
div {
background-color: #000 !important;
}
button {
box-shadow: 2px 5px 1px 0 #007299;
}
.input-group-prepend {
margin-top: 20px;
}
.input-group-prepend .form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-light">I am a button</button>
<div class="input-group-prepend">
<input type="text" class="form-control">
</div>
I've a Button with the following super simple css:
button {
background: #005eb8;
border: 0;
padding: 0;
color: white;
line-height: 50px;
}
"line-hight" is set to 50px. But the button is (in Firefox) 52px - I expected it to be 50. Is there any reason for that? In chrome the height is 50 as expected...
Code at JSBIN:
http://jsbin.com/jagiviyima/9?html,output
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
padding:0;
}
Add such css rule.
You ask - is there some reason for that - I believe it is. I don't have Firefox at hand now, but you are using button html element and buttons typically have some default css rules applied to them across the browsers (these are obviously browser specific). My guess is FF is adding some default padding, margin, border or something of that kind to your own defined style. Try setting these to 0 explicitly.
A bit of googling yielded this SO answer which exlains the issue in a more detail, proposed resolution is:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
I am having some custom css issues, that I would really appreciate some feedback on.
Here is the link to where I am experiencing the issue:
http://bookemcreative.com/testsite/regal-pocket-cards/
You will notice there is a drop shadow under the "View Products" button/link, which I do not want. I have tried to apply some custom css to this using the firebug inspector, but can't figure out what I am doing wrong. I am still learning css, so would appreciate any feedback. Here is the css I tried:
a.button.product_type_grouped {
text-shadow: 0px !important;
}
Have you tried
a.button.product_type_grouped {
text-shadow:none !important;
}
As 0px is not a value that text-shadow property will be looking, so use none instead of 0px, You can see full documentation of text-shadow here
use instead text-shadow: none with a more specific rule (since it's better to avoid an unnecessary use of !important)
#wrapper .button.product_type_grouped {
text-shadow: none
}
which is more specific than the rule you have previously defined
#wrapper .button {
text-shadow: 1px 1px 1px #c72c34;
}
0px isn't a valid value.
Try this:
a.button.product_type_grouped {
text-shadow: none !important;
}
my search which is on the right side has a button named as Go, it is on right place in all modern browsers except IE8 (in IE7 and IE6 it is a nightmare but I don't care for those browsers).
I tried a few things but the button is not coming to its place in IE8 can someone tell me why is it so
here is an image to show what I mean
http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png
Here is the demo page http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
and if you don't want to look for the css
here is the css:
.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
0 0 4px #7F241C;
cursor:pointer;
}
This is easily fixed if you create a conditional statement in your html head to wrap your new stylesheet in such as
<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]-->
and put the following CSS into your stylesheet this should fix the problem.
input.formbutton.buttonbloghuts.buttongradient {
position: relative;
top: 8px;
}
You already have a conditional statement in your head to create your HTML5 elements.
Any problems and I'll be happy to help.
Removing the top and bottom margins from .formbox and .formbutton, and setting them both to vertical-align: top; largely sorted the problem in IE8. If you need that vertical space around them, you could move use padding on the parent form (and make it display: block;).
(Using conditional classes makes it a lot easier to target IE-specific fixes like these)
If you could provide a jsfiddle of the button code that would help. IE dev tools aren't cooperating very will with me. If my memory serves, try adding float left on both input fields and see what happens.
Look at this site and at the search: it's really similar done but there's an extra div to do stretchy stuff : http://www.genesismedicalimaging.com
On the site I'm working on, for some reason the margin is needing to be different for Safari than in FF, IE8, Chrome & Opera? I have a link that I want lined up next to a label. It's lining up fine in all but Safari which needs a 12 pixel difference. Here's a screenshot to better describe the issue: Click
The Safari screenshot shows the label down too low. This is the CSS I use for the working 4 browsers:
.submitter a {
float: right;
margin: -2px 0 0 2px;
padding: 0 !important;
}
And here's the code that works for Safari, however, usig it throws the link UP 12 pixels.
.submitter a {
float: right;
margin: -14px 0 0 2px; Works in Safari & Chrome
padding: 0 !important;
}
Anyone able to shed some light on this? TIA
This seems to sort it out:
.submitter a {
float: none;
display: inline !important;
margin: 0 0 0 2px;
}
It's really very convoluted in there due to nonsensical use of the cascade.
Some rules are being applied to elements where they really shouldn't be due to selectors like:
.box_777 ul li a
You'd be better replacing that selector with something like:
.individual-likes > a
But, it's difficult to predict how improving your selectors will change how your page displays.
The reason it goes up like that could be because of the - pixel value. Are they nested correctly in the div? And did you apply the same alignment (CSS, Html, etc.) for the Chrome buttons?
There is a lot going on, but you might try one of the following:
.submitter .smalltext { float: left; }
(or)
Move the "follow" anchor tag before the "smalltext" span
Looking at the site, the anchor is being set to block by .box_777 ul li a and then floated right by .submitter a.
If I remove the display: block; and float: right; things align.