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.
Related
I have a problem with extra spacing after floated elements in Internet Explorer <= 9.
It is the only browser that renders this page with some extra spacing after the HEADER, if some floating is present within (If I remove floating - spacing goes away as well)
I know that I could use overflow: hidden and yes, it solves the problem, but in this particular case I cannot use it, because I have a drop-down menu in the header. Otherwise, I would have used it already.
I tried using this "clearfix" solution: http://nicolasgallagher.com/micro-clearfix-hack/, but it didn't work.
Is there any simple solution without dirty hacks that would fix the issue ?
Fiddle: http://jsfiddle.net/kkg8z/
P.S I'm only interested in supporting IE9 as the lowest version. Everything less can just go to hell
P.P.S
For those, who didn't notice any difference.
Turns out that since #content has display: table attribute, #header should also have one, according to IE :)
Crazy stuff.
I would like to apply matching paddings to my text inputs and textareas, but when I apply a padding to a textarea, it moves the little handle for adjusting the text area in as well, and it looks stupid, at least in Firefox. Is there a way to fix this, or am I just being OCD? I personally think it looks horrible.
Thank you.
If you're willing to remove the resize handle, just add resize: none to your CSS. See http://jsfiddle.net/2bkMH/2/ for a demo.
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'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...
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.