My problem was already described here:
http://the-dees.webs.com/iepp1/45-input-padding.html
but no solution or work-around was provided.
Problem: if you have input text with padding in IE8, the initial position of text and the blinking cursor is invalid (it's rendered at the top of the input). Once you start typing, text and cursor move to the proper position (the middle of the input).
Input is only styled with following:
input {
padding: 10px 0;
}
I've found a workaround, which is unacceptable for me. Namely, if I remove left or right padding (or both), everything looks fine:
input {
padding-top: 10px;
padding-bottom: 10px;
}
However, if you don't declare padding-left or padding-right to be zero, then IE may give a weird default value (in my case it was 1px)
Interestingly, this problem appears only in plain IE8 and in IE9 with IE8 document mode. It does not appear in IE7, IE9, IE10 or IE10 with IE8 document mode.
How can this problem be solved?
Setting the line-height property on input will fix the position of the text and caret.
Related
I'm using Do Hyeon font and all browsers render fine except for Safari. It seems if text is too short or not upper case, safari ignores spaces. However, if I click or hover the text, it re-renders with space.
Does anyone know why this is happening and how can I solve this?
I already tried adding these css property but did not work.
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: 'kern' 1;
(Second picture) When I selected text
I believe it was Safari issue but unfortunately, I could not find the reason why this is happening.
However, after testing some css properties, the one I am using for displaying ellipsis worked for this issue as well, so I will leave the code here in case someone is having the same issue.
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 10rem;
Again, these properties are originally for ellipsis especially for safari:
https://stackoverflow.com/a/61515590/12332180 but propbably, this is related to modifing the text that is why it is working for my situation as well.
I have a menu that has text-shadow applied to it, so that it blurres the links. It works as expected, except that in IE10 it completely hides the links.
Only when hovering over links they are revealed, because on hover text-shadow is removed.
Here is the applied code:
text-shadow: 0px 0px 3px #fff;
Also, here is the link...the menu is positioned bottom left part of the screen.
http://madebym.net/test/ractiv/index.html
There's a few possible reasons for this problem.
IE does not display text shadows the same as most brosers: IE shadows are more opaque for some reason. Then you would have to check the browser.
IE <=9:
filter:progid:DXImageTransform.Microsoft.DropShadow(color=#000000, offX=1, offY=1);
(Details: http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx)
(There also seems to be a filter named "blur" that might be more what you need. It's mentioned on the page.)
IE 10+:
text-shadow: 0px 0px 3px rgba(100%,100%,100%,0.8);
(Slightly transparent shadow to offset IE's shadow opacity. You could also reduce the size of the shadow and see what it does.)
Other browsers:
text-shadow: 0px 0px 3px #fff;
(Your normal code.)
The reason could also be that you made a shadow using an IE filter for previous IE versions, but forgot to NOT make it apply to IE 10, which supports normal shadows, resulting in the two effects stacking.
Sounds unlikely, but maybe there's a default value difference somewhere that affects this. Do you use a CSS reset?
Use This text-shadow: 0px 0px 3px 1px rgba(255,255,255,0.5).
It works here on IE10, Can you open the developer tools (F12) and make sure the rendering and document mode is set to IE10 and IE10 standards mode?
dstorey and Mark already pointed you to what is probably causing your problem. More specifically, you can search for a
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
or similar tag in the
<head>
section of your document and delete or conditional-comment it for IE versions lower than 10, since in case it is present it will prevent your document from rendering properly in IE 10.
Edit: My concerns are for mobile websites.
Let me get right to the point. No matter what I do, outline:none; does NOT remove any default highlighting/glows from input form elements using an Ipod Touch/Iphone.
Everywhere I look, people say to use:
input:focus {
outline:none;
}
or
input {
outline:none;
}
.... and that this will remove the glow.... well it doesn't.
Another major problem is that there IS NO DEFAULT GLOW. I create a blank page with no styling and just a form input, view the page via IOS mobile, and there is no glow/outline on the input elements... it is just blank.
The only thing that works is using -webkit-appearance:none; - and that simply allows me to set a box-shadow on the input element. If I am not using the -webkit-appearance:none; - then the box shadow will not show properly.
When viewing this on a desktop browser however, the box shadows work fine even without webkit.
So my question is: why does outline:none; serve no purpose on input elements? I have seen some people say they only work on anchor tags, yet others say they work on input elements. Who is right here? Because so far, no matter what I do, outline:none; is worthless on input elements.
Here is a JSfiddle:
http://jsfiddle.net/QQGnj/4/show/
Viewing this page on iOS mobile, there is no "glow" or default styling to begin with. Where is everyone seeing the default glow behavior which requires outline:none; to work (which it doesn't)? This is driving me mad!
If you use outline:none; please add a focus style. See http://outlinenone.com/.
This feature is very helpful when a mouse isn't used. Outline provides an important accessibility feature, so please, if you must remove it, add back a style for your links focus and active states. Please help users understand where links exist.
Try with this:
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Use -webkit-appearance: none;
#yourElement:focus {
-webkit-appearance: none;
}
#yourElement:hover {
-webkit-appearance: none;
}
And it will do the trick.
a, :visited{
outline: 0;
outline: none;
}
:hover, :active, :focus{
outline: 0;
outline: none;
}
removed the focused glow for me on Chrome/osx, iphone/mobile safari, firefox/osx
http://jsfiddle.net/toniehock/QQGnj/6/show
In my case in Magento2 it was a border and box-shadow, instead of these things above.
Mobile Safari apparently just doesn't have a default outline style, so you don't have to worry about it. For a guaranteed consistent look in all browsers, desktop and mobile, I would recommend setting outline: none anyways, though.
Is there a line-height discrepancy in Firefox that would be affecting the line-height on this input element? http://cure.org/curekids/
You'll see in the signup form right in the middle of the page that my email a dress input field has the text vertically aligned very awkward, whereas in Chrome, Safari and IE (gasp) all is well.
What's causing this inconsistency in Firefox and how should I remedy it?
All browsers have a default style for many elements, and they are not at all consistent, so the best approach to it is using a CSS Reset style sheet to remove all those default CSS rules.
The only "disadvantage" is that after including a reset you may have to add a couple more of rules, as you might have used some of the browser's defaults styles, like heading sizes for example.
I have been using the YUI 3 CSS Reset and it works really well, but be sure of including it before your CSS.
on sponsor.css you have div#sponsor-notify-me input#email-field there this padding:10px 10px 0; just change this to padding:0 10px 0; and also change the height:32px; to height:42px;
Firefox and Webkit based browsers treat line-height differently and this affects input elements. One work-around that worked for me was to use the same values for line-height and height in the css properties for each element.
e.g.
#button{
vertical-align: middle;
line-height: 60px;
height: 60px; /* Firefox needs this to be equal to height */
}
You could take a look at this issue as well:
Font height changes between Firefox & Webkit browsers?
I'm trying to achieve cross-browser consistency for my website.
It's about this page: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (please note that I prefer this URL not to be made crawlable for seo-bots)
If you view this page in IE, Firefox or Opera, everything is fine, but in Chrome and Safari the tables are a little out of line (as you'll probably clearly notice).
What seems to be the problem?
It appears to me that in Chrome and Safari the left and right border (2px) in total are added to the set table width, while in the other browsers the border is considered part of the width.
The (most) relevant CSS-lines are the following ones (from the table.css file, also available through the page's source file):
table.uitbetaling {
margin: 11px 18px 10px 19px;
border: 1px solid #8ccaee;
width: 498px;
padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
margin: 0;
border: 0;
padding: 0;
width: 496px;
}
table.uitbetaling tr {
margin: 0;
border: 0;
padding: 0 1px 0 0;
}
So basically I have used a table-structure to organize images, like this: (the class of the table is uitbetaling)
<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>
If, here, I set the width of table.uitbetaling and table.uitbetaling img, table.uitbetaling td to the same value (e.g. both 496 or 498), the "problem" in Chrome and Safari is solved, however in Firefox the right side border is than blank. Because the right-side border can't "fit" in anymore. img and td must be at least 2px more narrow than table.uitbetaling for the right-border be visible in Firefox.
Is there any way to solve this?
Nowadays you should be using the HTML5 doctype, if you're having issues about borders adding themselves to the element's width look up the CSS style: box-sizing
border-box - include border width/height and padding width/height or basically the width you set includes the borders/padding
content-box - the width you set on the element is only the content area, this does not include padding or borders
There is also padding-box which I don't use, usually the above two are enough.
Now sometimes, I think IE8 uses a different box-sizing than Chrome/FF etc, this is why sometimes you have issues. You can always debug and check what the box-sizing is set to.
Note: if you don't have the DOCTYPE then you're in quirks mode, and IE differs WILDLY from Chrome/FF on the box-sizing/box model - and that's your problem right there
segment your code into its simplest elements and test them on each browser. When you find the differences you can use different methods of browser detection to subtly alter the code for each instance. With that said... if you do not want to go stark raving mad, and CSS will do that more then anything in programming let the pixel go if you can.
To be safe, I usually open a table in this way:
<table cellspacing="0" cellpadding="0">
It is "old" HTML, but at least it forces coherency along browsers, and then I apply CSS as needed.
I'd checked with Opera 11, Google Chrome 7.0.517.44 and FireFox 3.6.12 have seen no difference with your site design.
Did you declare the DTD (DOCTYPE)?
Read this:
http://msdn.microsoft.com/en-us/library/bb250395.aspx
It looks that browsers have different ways to display the borders, but the DOCTYPE declaration (which goes at the top of the html document) force them to comply with the actual standards, at least in regard of css box model.
Note: I always use the xhtml transitional DTD to make my document as much compatible as possible...
Good luck!
Try:
table{border-collapse:collapse;}
Its good practice to always set table{border-collapse:collapse;} in the css, and then use cell-padding="0" and cell-spacing="0" in the html anyway.