I am working on Jakoody.com. In Safari (at least 5.0.5-Lion) and IE 9 and below the browser adds padding to the bottom of the menu thus repeating the background image and showing a double stitch on the bottom. This also happens to the "stitched-quote" (under the slider).
I have been searching for a few hours now and haven't found anything that works yet. Any suggestions?
I am using WordPress with the Headway framework (both latest versions)
Thanks in advance!!!
.block has box-sizing property set to border-box. This is not supported by all browsers. You can either disable box-sizing for .block and reduce the min-height of #block-86 (style.css:line 257) to 28px or reduce the min-height of #block-86 to 28px for browsers that doesn't support CSS box-sizing (Javascript maybe?).
Related
I can't figure out why on the following page, from the Pricing section onwards, IE8 seems to ignore a lot of vertical padding and margin:
http://tinyurl.com/qd9s94y
Namely, it is ignoring margin-bottom on the Pricing heading, it is not applying vertical padding to the divs that make up the pricing table, and the links in the footer have also lost their vertical padding.
t works in every other browser, for comparison.
Thanks in advance.
The problem was that IE8 doesn't support rem units for font-size.
My IE8 dev tools sprang to life so I could see what wasn't working.
http://i.imgur.com/WnRm9aw.png
Seems like an issue with line-height. I have line-height:1 in CSS reset, which seems to be causing the issue. However, even when I set up specific line-height (in pixels) to that element, there is still the difference.
When I remove the line-height property from CSS reset altogether, it does indeed make the gap equal in both browsers, however the orange background - parent - gets stretched by 6 pixels in Chrome.
Is there any work-around? Thanks
I have run into many issues in which browsers interpret CSS differently. One option is to see if Chrome is adding extra padding to the element via a user-agent stylesheet, or by its rendering process. If so, you can see try experimenting with this for an efficient solution:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-padding-start
Another possibility, which is less desirable would be to do this in CSS (detects webkit browsers i.e. Chrome and Safari) and override padding styles so that they appear the same in both browsers:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.yourDiv {
padding: 2px;
}
}
I started using a CSS reset (YUI) for the first time with my personal site at http://www.tommaxwell.me, and it has helped a lot with cross-browser compatibility. However, in webkit browsers (Chrome, Safari), the ems font size seems to be adding margin to the top of the h1. When I remove the em, it falls back the default size and doesn't have the margin on the top. In Opera and Firefox that margin isn't there. What should I do?
kindly try to use px instead or try this
.webkit h1{margin:0px}
thanks hope it would help
..
If you Inspect h1 Element then you will see that all margins are 0 for h1 tag.
But height varies for h1 tag in all browsers and this is due to their rendering engine. And that variation maybe creating illusion for you about margin
I'm not sure what you mean as they look same to me across most browsers, but I can't see you setting a line-height anywhere, as a suggestion it may be worth fiddling with the line-height to see if the space is coming from there?
h1 {
line-height: 1.0em;
}
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
Here is a snippet (if you are using Opera, check out this link).
As we can see In webkit browser we can see that background image respects padding while centering,
and in (at least Firefox and Opera) things go different.
So, the question is following - what behaviour is actually correct, and, far far more important, how can I unify layout?
UPD: don't waste your time trying to find appropriate rule in notorious css reset sets, since I've already tried )))
You're problem isn't the background-origin it's the box-sizing.
Looks like webkit's box-sizing is content-box and mozilla's is border-box making webkit's cell-height 242px (height + padding + border) and mozilla's 200px. And since your vertical background position is centered, it's creating extra vertical space. Simply set box-sizing:border-box for consistency between the two modern browsers.
Here's a new one: http://dabblet.com/gist/1621656
EDIT:
While the above fixes Chrome (webkit), it does not seem to fix Safari 5.1 (webkit). It appears that each browser has a buggy implementations of the box-sizing property for table-cells. In fact, if you even look at the Notes section of the MDN it says box-sizing isn't even applied in Mozilla.
Therefore, we must solve your height issue a different way. Good news, according to the CSS2.1 Spec we should be able to define the height we want from the TR. Here's a new that works in my Safari, Chrome and Firefox versions: http://dabblet.com/gist/1622122