I've got a stylized input I'm working on in html/css that achieves the look I'm going for in Firefox, but the elements (input and span) seem to be rendering differently in Chrome. I have yet to test on IE.
The code is available at http://jsfiddle.net/WEZvu/. Any input would be appreciated!
Is this acceptable? http://jsfiddle.net/WEZvu/1/
Since your border and background-color is applied in the whole "element", putting them on the container seems a better idea.
I'm using Linux right now and no IE to test, but I think the look should be OK...
Related
I am having difficulty with this seemingly simple issue. I want to indent the text of my select input. There are two ways that I know to do this:
Text-indent
Padding Left
The issue is that each browser tends to allow one but not the other.
Chrome: Both Work
IE: Text Indent Does not work
Safari: Padding-Left Does not work
Firefox: Both Work
I am looking for a simply solution to allow text indentation across all browsers. Typically I have used 's for each selection, but I am hoping for a better solution. Thanks for the help!
I am also looking for a better solution than padding-left. It also seems padding-left never really centers the text across all browsers. In one browser it's centered, in another it's off.
So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.
Thanks a lot for the help!!!
You need to explicitly set overflow: visible on your <svg> element.
The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.
it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox
I'm having some trouble with CSS in Firefox.
Here his the fiddle: http://jsfiddle.net/6Fq4z/2/
The div with .item-container class should fill vertically it's parent (td). It does in chome and IE. But not in Firefox.
But there is a strange behavior. Step to reproduce:
Open the fiddle in firefox
Inspect element and select the div with the class .item-container
change the display property to inline-table and press enter (it does not solve the problem)
then change another time this property back to inline-block and press enter. It now shows up as it should...
Can anyone explain me why this happen and if possible, how can I solve it?
It'l be better to use Firebug. After install right click on tag you want and in css section change values. With firebug you can run custom JS in your page.
Playing a bit with the height properties I came to the point that the problem might be with the height being assigned using percentiles and considering you are using table it might be some kind of a bug with rendering in Firefox (I tested on 31 and 29 versions both).
I fixed some heights properties using pixels and forked the fiddle that might help you further
A possible workaround
http://jsfiddle.net/6Fq4z/3/
after 3-4 hours of searching with IE's "dev tools", I can't understand why.
This code: https://tinker.io/b2c10 produces the layout correctly in IE7 mode, Chrome, Firefox. In IE8 Standards mode, here's the result when you make the viewport smaller:
And here is how the layout should be / is in all other browsers (IE7 included):
Needless to say I experimented with all including:
reducing the max-width of the img
removing the Who's Who part with the display:inline-block's
removing the image completely from the middle column...
It seems there was a problem in how Sharepoint was converting my source html making it not valid...
In a not so clean way you can start by setting min-width on the divs with that content. That will also help to keep it from overlapping as it scales down. Also I think you might want to switch to spans for the div width. I feel like I am preaching Scaffolding to a lot of people but it really does help keep things scaling nicely.
.ms-WPBody {padding:0;overflow:visible;min-width:190px;}
http://jsfiddle.net/R8LEE/
http://twitter.github.com/bootstrap/scaffolding.html
p wich is block by default, with div using float: right, padding instead of margin....not sure how this is working, you need to improve your css a bit dude. I sugest you review it all.
I have a weird problem on a CSS menu. There's a difference in padding applied by both
Firefox & IE9 vs Chrome & Opera browsers. The space left after the last menu item at the end of the menu is different on both the browsers.
Please see the chrome.jpg and firefox.jpg inside zip file to see what I mean.
I have also attached the source html file.
here is the zip file -
https://www.sugarsync.com/pf/D6612639_7394829_952554
Chrome:
Firefox:
This is not padding but likely a difference in how the fonts are rendered in different browsers. Yeah that is pretty much impossible to solve unless you make the menu items fixed width. :)
The firefox version looks bolder (see it?!)... These are brainbreaking problems not fun to deal with but quite easy to explain.
IE9/Firefox use a different technique to render text than Chrome/Opera do.
IE9/Firefox use DirectWrite, and so the text comes out ever so slightly wider, adding up to a few pixels difference over all the menu items.
Read more here: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite
And read this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
Short of setting a fixed width on each menu item (don't), you can't fix it. However, you don't need to fix it: a few pixels difference between browsers does not matter. Remember, the users of your site are only looking at it using one browser.