I'm trying to style a text input to display a "grid" aligned with the text, see example below:
I use a fixed-width font, with a fixed letter-spacing. In theory, it should be possible to get the same expected rendering on every browser, but it's a well known fact that fonts are displayed differently across browsers.
If I get the alignment right in Firefox, it doesn't work on IE etc. As a workaround, I could use different CSS between IE and firefox to show a slightly different background image. But even on Firefox, it seems that the rendering depends on the screen resolution (I got different results on a 4:3 and a 16:9).
Does anyone have an idea regarding how I could accomplish a correct aligmnent between the text and the grid?
Thanks
There is a work around, which may work irrespective of resolution and browser.
Take a span and input field in your div. Show the span and input field overlapping with each other.
Now create a string of '|' having equal character spacing and width as that of input field's character. As these are overlapped it will look like a grid when the user will type.
Hope this will work.
You can add this code to input into css file:
letter-spacing: 24px;
Then you will have spacing after any char, and You can add ready background with grid too.
Related
Hi somehow i don't understand the differing display behaviour of a special character used within the content property in Firefox. i've stripped down everything and created a pen:
http://codepen.io/rpkoller/pen/Fbgav
In its' basic form the three lines are way thinner than e.g. within Safari or Chrome. If i add font-weight: bold they get a little bit thicker but still thinner than within Safari/Chrome. What is causing that significant difference in thickness and size (it seems the glyph itself is also displayed bigger in Firefox) towards the other browsers? Any hint would be appreciated. Thanks Ralf
I've noticed this too with other glyphs in the past; on certain glyphs the browsers just don't render the same! Have a look at this thread for another example. I'd suggest for this problem that you should use either an icon font (you can use a generator like IcoMoon), or alternately an SVG file.
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
Can anyone tell me why the date (i.e. "January 2012") in the nav bar of the mini calendar at the top of the right column is being displayed as two lines of text instead of one on some computers using IE7&8??? Seems to render properly in other browsers... I have researched but cannot find a solution.
http://www.stamfordsymphony.org/indexGLK.php
Thank you!
The width: 70px; on your .monthYearRow CSS class is not wide enough for the text in compatibility mode. In non-compatibility view, your specified width is ignored in favor of maximizing the size of the table cell.
Simply remove the width line altogether from that class, or at least override it using the element's id if necessary.
I'm not sure what is causing the problem, but removing unnecessary style rules will certainly narrow it down. for instance, when I remove the width attribute on .monthYearRow in your style sheet, the issue disappears (at least for IE 9 running as IE 7).
Try just whittling away style rules until you find which one is the offender.
http://jsfiddle.net/CtaBe/
I've tested this in FF, Chrome and IE. Only FF shows the intended behavior (or at least what I think is the intended behavior). Chrome and IE show the same behavior: when you first focus on the input, the cursor doesn't indent. After you type somehing, delete it, and re-focus, it indents properly.
How can I fix this? Because I want to display an image at that indented space.
Quick disclaimer: this message outlines a solid example of why a person would choose to use text-indent on an input field rather than padding. It does not answer "how to fix IE handle text-indent on input fields"
The thing about padding-left is that it alters the width of your input field, which can be undesirable.
Imagine a scenario where you wish to show a background-image icon for the following states of your inputs' data:
required field
invalid input
missed required field
password strength
In such a scenario, we'd need to nudge the text away from the left border to display the icon (which is a much simpler feat than going for the right side, but that's a whole other discussion. If we use padding, the width of the input field changes. That's not ideal, since the various "states" can change.
For instance, maybe a field is only required based on the value of another field. When that field "becomes" required the field "grows" according whatever padding we apply to move the text away from the icon, via relevant class. That's far from elegant, especially when other fields are floated next to it.
Furthermore, in the case of textareas, we wouldn't want to pad the entire side - the first line would suffice.
That's exactly where using text-indent comes into play. And it works great - except in Internet explorer. Which is what has led me here, as I search for other ideas or solutions. I have a few ideas in mind but hopefully there's something simpler that I haven't thought of.
In Chrome, this is a known issue. Please star it :)
'text-indent' applies to block-level elements, table cells and inline blocks. I hope you are using it on a not block-level element.
Is the a uniform cross-browser text-indenting technique ?
I use text-indenting to hide text and replace with images quite alot. I do something like the following: text-indent: -30000px;
But, on Chrone, IE, and Oprah the text is indented out so it's not visible but the width of the element is still as wide at the text.
Ordinarily, this would not be a problem except tah it looks one way on FF and entirely different on other browsers.
You most likely need to specify the width of the element as well.
If you're doing that and it's still not working, could you provide some sample code for us to take a look at?
I also use this technique at times to show images, but in all cases I'm also setting the width on the element to match the image swap. If you set the width you'll get consistent sizing of the block across most browsers * cough IE cough *.
If you're hiding the text but also need to rely on the width of the rendered text for spacing I'd question if you're using the right technique for that particular situation.