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;
}
}
Related
I've built a layout for a list of items, and I'm running into some line rendering discrepancies between Firefox and other browsers, specifically with my custom font. Firefox renders the text above where I'd expect the baseline to be within the line height.
Firefox rendering:
... while Chrome seems to be putting the text lower in the bounding box.
Chrome rendering:
I'm aware that Firefox & Chromium browsers have different default line heights, so I've set this explicitly. The lines are the same height to the pixel between browsers (26.88px), but the text is positioned differently within them.
You can see that I've adjusted the top padding to be smaller, which looks how I intend on Chrome; if I make the top & bottom padding equal, the text renders closer to an apparent vertical center on Firefox, but lands too low in Chrome.
Is there a way to address this, without doing browser-specific padding values? This is the site in question, the styling for this component can be found here, and my font-face definitions can be found here. Thanks for your help!
I ran my font files through the Font Squirrel Webfont Generator optimization, and this fixed up my vertical metrics! Using the Font Squirrel edit, I no longer need to apply different padding values to achieve a vertically centered appearance on Chrome.
That said, the optimized fonts are still rendering higher within the line height in Firefox. This is the case even when I'm using the default font instead of my custom font:
I think this means Firefox is just eccentric, and must be special-cased accordingly. Here's my CSS, which achieves approximately the same appearance in Chrome & Firefox:
.project-row {
padding: 0.7em;
}
/* appear vertically centered in Firefox */
#supports (-moz-appearance: none) {
.project-row {
padding-top: 0.75em;
padding-bottom: 0.65em;
}
}
It'll do. Please holler if you have any better ideas, and until then, this is the answer!
I fear this is a stupid newbee question but i didn't find any info on it (here or elsewhere): how to implement the max-width instruction for IE? I have read extensively about the bugs when max-width is applied to pictures, but, to my desperation, nothing about plain text.
In my stylesheet I have:
P {max-width: 600px}
and Firefox and Chrome duely limit the length of a line of text to 600px but IE (v. 8 to 10) does not. (I verified this on different computers.)
What am I doing wrong? Can max-width not be applied to a paragraph in IE?
What about:
p.paragraph {
display: block; /* just to be sure - it's not needed */
max-width: 600px; /* for most modern browsers (not IE < 8) */
width: auto !important; /* IE max-width hack */
width: 600px; /* width value for IE */
}
What you may find surprising is that max-width is actually working. If you use the F12 developer tools, and select the element, you will see that it's with is indeed 600px (assuming you have filled it with something larger than 600px).
The problem is most likely that your content is overflowing the element. If you want it to clip, then you should set overflow:hidden, or perhaps overflow:auto to see a scrollbar.
See this fiddle:
http://jsfiddle.net/nSJw9/
You can also set word-wrap:break-word if you want it to wrap unbreakable text, although technically css3 changed the name to overflow-wrap, word-wrap is considered an "alternate name" because it's been supported for so long.
http://jsfiddle.net/XuF33/1/
FYI, Chrome does exactly the same thing as IE here, so I'm not sure why you claim it works with Chrome but not IE. Maybe you need to include your HTML
Putting width on the paragraph itself might not be the best practice, put a div around it. IE 8 is said not to support max-width as long as initial width is not set.
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 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?).
I'm having a problem whilst setting the height of a button. Basically I can't manage to have it cross-browser. With Firefox, it is higher than normal, without any reason.
Here it's a screenshot (Firefox, Safari and Opera, in this order):
And here the code: http://jsfiddle.net/TMUnS/2/
I also tried adding some specific declarations I found on the web, but actually they just reduced the height a bit, but still, they aren't the same (in the same order):
And here the code: http://jsfiddle.net/TMUnS/4/.
How could I fix this?
Firefox has this funny thing called -moz-focus-inner. I'm not totally sure what it's for, I just know that you sometimes need to do this to get buttons to behave:
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
padding:0;
border:0;
}
That might be what you need. You can see the difference here (in Firefox): http://jsfiddle.net/TMUnS/9/
This is a feature set in Firefox which limits the line-height of buttons. It sets a default line height for buttons - http://www.cssnewbie.com/input-button-line-height-bug/. I would try using a fixed height for the buttons and playing around with the padding.
Are you using a CSS-Reset ?
A CSS-Reset normalizes the CSS for the Browsers.
Try this YUI reset:
YUI CSS RESET