I'm trying to do a sliding door button that can be used in general purpose
everything works fine except the Firefox.
the span element in button always lower 2px in FF.
here is example
http://jsbin.com/orami3/4
Try this:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
(Mind that the colon (:) is doubled, yes.)
The extra padding in this case is caused by an obscure Firefox bug.
(Having encountered this bug myself I've found the solution at this blog, via a Google search.)
Well, I don't know why this happens, but there is some strangeness here. It affects Safari as well, and it's slightly different. If you add a negative margin to the button span, it will move half the distance in Firefox than it does in Safari. So, the solution seems to offset the background-image. Here is one way to hack it:
/*grey button hacks non-IE*/
button.grey span{
background-position: 0 -1px;
}
button.grey:hover span{
background-position: 0 -36px;
}
button.grey:active span{
background-position: 0 -71px;
}
/* IE workaround. The \9 makes non-IE ignore these styles*/
button.grey span{
background-position: 0 0px\9;
}
button.grey:hover span{
background-position: 0 -35px\9;
}
button.grey:active span{
background-position: 0 -70px\9;
}
Example here: http://jsbin.com/orami3/9
Related
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;
}
JS:
DD_belatedPNG js
HTML:
<script type="text/javascript" src="js/fixpng.js"></script>
CSS:
.sbToggle{
background: url(/img/select-icons-trans.png) 0 0 no-repeat;
display: block;
height: 27px;
outline: none;
width: 31px;
}
.sbToggle:hover{
background: url(/img/select-icons-trans.png) 0 -27px no-repeat;
}
The above code works in IE6+ and FF. But in IE6, when my mouse moves to the a element that triggers the .sbToggle:hover event, the background-image (background-position:0 -27px) have one pixel shift (like the a element with margin-top:-1px).
I guess it has to do with the DD_belatedPNG.js's vmlOffsets method. Does anyone have the same problem?
==============updated===============
i found a description about one pixel shift) at DD_belatedPNG site
- the one pixel gap problem has been mostly solved. Few people noticed,
but it bugged me, and was VERY hard to fix.[0.0.6a / 2008.12.14]
It seems to me that if you are supporting IE6, then you probably have (or will have by the time you are done) a way of targeting css just for IE6 (conditional comments or some other means). If that is so, then the easiest solution is to use whatever means you are using to target IE6 and then just change your css for IE6 to:
.sbToggle:hover{
background: url(/img/select-icons-trans.png) 1px -27px no-repeat;
}
I inherited a site that I'm working on finishing and there is this style applied to tags inside my footer (forgive me if I don't give enough info, just let me know and I'll put it up). The style puts a subtle background color around the header text and rounds the corners a bit:
h4 {
background: none repeat scroll 0 0 rgba(32, 37, 41, 0.3);
border-radius: 8px 8px 8px 8px;
color: #5CB414;
font-size: 26px;
font-weight: bold;
margin-bottom: 20px;
padding: 12px 0 8px 10px;
position: relative;
}
This works great in Chrome and FF but in IE8 it doesn't work. And in IE8 it doesn't float the columns next to each other. Here is the site. Scroll down to the bottom to see the issues (should be 3 columns but in IE it is only 2 and there is no background style applied to the H4.
I know IE is finicky, but I don't know what to do about it. Any help will be greatly appreciated. Thanks!
as far as losing the 3 columns at the bottom simple replace the ".col" width:300px to width:292px; It's just barely too big.
Also with the rounded corners being crossbrowser compatible I like to get my styles from here: http://css3please.com/
I do not know that rounded corners will work in ie8 or less so you might try doing it with jquery instead of css3
http://jquery.malsup.com/corner/
Versions of IE prior to 9 don't support RGBA or border radius, so these are simply being ignored. You can try the cross-browser syntax at http://css3please.com, but this won't give you rounded corners in versions of IE prior to 9.
Your column float issue stems from the use of an nth-child selector on line 1454 of your style.css:
.col:nth-child(3) { margin-right: 0; }
Again, IE8 and lower don't support this so you'll have to find a work around. You can add a class of "last" to the third column, and place this in your stylesheet:
col.last { margin-right: 0 !important; }
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.
I have my site working perfectly in IE 6+ but it looks weird in IE 6 or IE 5.5, as I can't ignore the users with IE6 because still around 6% of traffic occur from this version. I am looking forward to have the alternate.
With my some research I came to know that by setting haslayout property, I can solve out formatting issue, but I consider myself extremely poor in CSS and hence I need a help of yours to rectify this issue.
You can find the URL below& you can see it's behavior in IE6, just in case if you are unable to test you can check it by viewing the source, please share your suggestions.
URL: http://anujtripathi.net/BlogListing.aspx?Id=2
Your code (default.css):
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
Try shrinking down 95% to like around 92%.
You can use a IE6 hack like so:
.bg1 {
padding: 0 7px 20px 0px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(images/img4.gif) repeat-x;
width: 95%;
}
* html .bg1 {
width: 92%; /* Star Html Hack IE6 only */
}
*+html .bg1 {
width: 93%; /* Star Html Hack IE7 only */
}
But I highly recommend learning the right way and looking at the link below for organizing CSS for cross browser compatibility:
What is the best way to deal with IE compatibility issue?
I would look at your border widths, margins and paddings. It looks like your content is being pushed down because there isn't enough horizontal space. For a quick check, make your main container a little longer and see if the content shifts up.