I have just checked out what my site would look like in safari and there is a padding difference on my table!
Where there is a table with one column that has text and another that has a form there is padding so that the text in the left column is not right up to the form! This is not the case in safari and im not sure why!
I would like the padding back please safari! lol
http://www.perfectclaims.com/ppiclaimsnew/index.php
I have took a picture of what it looks like in safari to show you what I mean! http://www.perfectclaims.com/ppiclaimsnew/safari.gif
You can see that the text is right up again the blue form!
On second look, the textbox width is different in Safari. You may want to check that (with a ruler, perhaps? :D).
Otherwise, layout looks OK, unless you're aiming for pixel-perfect placement. Which is just absurd in this era of browser ubiquity.
Update:
Digging through the HTML, I took this snippet of HTML from one of your textboxes:
<input
name="fullname"
tabIndex="1"
class="formText"
id="fullname"
style="border-bottom: medium none; border-left: medium none; font-size: 20px; border-top: medium none; border-right: medium none;"
type="text"
size="30"
/>
Preferable, you may want to set the textbox size from the style attribute instead of size. That will give you more pixel perfect page.
Related
I'm using the latest version of Chrome (74.0.3729.169) and noticed something slightly frustrating/interesting.
In the example below, begin typing an email address that you've used before. Once Chrome's suggestions appear, hover over one of them. Notice how dramatically the input shrinks.
input { padding: 5px; border: 1px solid #ccc; }
<input id="email" name="email" type="text" placeholder="Email">
I apologize if this doesn't recreate the behavior, however I've now been able to recreate it with this snippet across multiple computers, so I'm fairly confident this should work.
Additionally (to dip my toes into Meta a bit here) there's a fairly dramatic example of this on StackOverflow's very own login screen, in which the entire form shrinks as a result.
Compare the width of the two images below. Or, in the second image, compare the width of the "suggestion" with the input to which it corresponds.
From inspecting the input itself, I don't see any new styles that would explain this behavior. It doesn't seem related to padding either, as an input without padding still demonstrates this behavior.
My question is two-fold: Why does hovering a suggestion cause the input to shrink, and, is there a method/workaround to prevent this, other than fixed width or disabling suggestions entirely?
(I think that both of these workarounds are conditional. There are instances where you may not want to specify an input width for styling purposes, and disabling suggestions seems excessive and harmful to UX)
Or perhaps a Chromium bug ticket somewhere (I've searched with no luck - googling anything related to Chrome's autofill/autocomplete is a mess of unrelated articles about security)?
What you are facing is related to :-webkit-autofill pseudo class that is applying some default styling to the input with an autocomplete.
The :-webkit-autofill CSS pseudo-class matches when an element has its value autofilled by the browser.
Unnfortunately, I am not able to find where exactly those styles are defined but here is an example to confirm this. If you try to use the same value of width you will avoid the shrink effect:
:-webkit-autofill {
width: 173px;
}
<input id="email" name="email" type="text" placeholder="Email">
In the above link you can also read:
Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.
So even with !important you won't be able to override some styles:
:-webkit-autofill {
width: 173px;
background:red!important; /* will not work*/
border:2px solid blue;
margin-left:150px;
}
<input id="email" name="email" type="text" placeholder="Email">
For the width issue, I guess the only way is to define an explicit width as I have tried auto, initial, unset, etc and they aren't working.
If you cannot set a width and you want the default one, you can consider JS to do this:
document.querySelector('#email').style.width=document.querySelector('#email').offsetWidth+"px";
<input id="email" name="email" type="text" placeholder="Email">
Sometimes you think you're going insane. This one of those times.
While working I had an issue that I couldn't change the font-size of a submit button. Then after going insane I boiled it down to this simple example:
https://jsfiddle.net/zf9sq2gx/
font-size: 100px;
I am sure this looks perfectly fine on your machine, but it does not on mine.
See:
I am working on a Mac here and this result is from Chrome.
- Firefox works as expected
- Other pages I made or visit online do work, however this basic example and the page I am working on right now, they exhibit this behavior.
It does not matter which number or unit of font size. Other values like padding are also ignored. WIDTH however is NOT ignored.
When changing the font-size in the chrome dev tools, the button flickers from its current font-size to a smaller one, but instantly jumps back. Even tho it should at least flicker to a big one in this case.
What if we change it to a different tag altogether? Now it works.
What if we just change the type from submit to text? It behaves as expected again.
What if we remove even the other tags like body and form and everything? Doesn't matter.
Updating meme. No change.
How could this possibly be a thing?
Not to mention that other pages may work with submit buttons. But I made this example in jsfiddle as simple as possible to go back to bare minimum, even using inline CSS (because !important did nothing).
Try to use
-webkit-appearance: none;
It will cancel default chrome styles for a button.
In addition to Petruk Dmitry's solution, you can solve this by setting -webkit-appearance: none, or by overwriting one of the vendor styles, if you don't want to add browser specific CSS. Appearantly, overwriting any of the vendor styles (see below for a list of tested styles) will remove the button styling completely. I've never had this problem before since I normally change the background and border when styling a button.
Examples:
<input type="submit" style="font-size: 60px;"><br />
<input type="submit" style="font-size: 60px; -webkit-appearance: none;" value="Webkit appearance"><br />
<input type="submit" style="font-size: 60px; background: blue;" value="background"><br />
<input type="submit" style="font-size: 60px; border: 1px solid green;" value="border">
EDIT: (some) More information on this behaviour can be found here, though it seems as if this "feature" isn't very well documented. For more reading on the subject however, you can check this page.
We have an application that has a text field with a specified length - 4.
Chrome:
Firefox:
Is there a way force Firefox / IE to use fixed-width spacing? This is an issue in the case of ID numbers, where the field is actually accepting the full input, but by default not displaying the full width (potentially causing user error if they are typing the field from the screen rather than copy/pasting).
Instead try changing size attribute to 5. So in all browsers, it will fit.
<input size="5" maxlength="4" value="WWWW" id="txt">
Try this CSS sector rule
#elementId
{
letter-spacing: 5px;
}
.elementClass
{
letter-spacing: 5px;
}
Instead of using size attribute try pure CSS. E.g. this
<input type="text" value="WWWW" id="txt">
#txt{
font-family: Courier New;
font-size: 15px;
width:40px;
}
should look about the same in all browsers.
HTML
<input size="4" maxlength="4" value="WWWW" id="txt">
CSS
#txt{
font-family: Courier New;
font-size: 15px;
}
DEMO
http://jsfiddle.net/pePXB/1/
It's a "combination" of some of the things suggested by others... I played around in jsfiddle with this for a bit using Internet Explorer, Firefox, and Chrome, and this combo seems to work the best for me, and provides consistent results across browsers.
I would recommend the following code
No matter which font family you use, It will make the textbox of specified character width.
HTML Code
<input size="4" maxlength="4" value="WWWW" id="txt">
CSS Code
#txt{
width:4em;
}
This will always make the textbox equal to the width of 4 "M"s so it gives you safe room to use any 4 characters in the box.
For more clarification on using various systems to set width, follow the following link.
http://www.webmasterworld.com/forum83/5001.htm
you don't need to worry about the code, but please check with fonts that you have listed for
TEXTBOX are available in both browsers ?
I believe this is what making the difference.
Try to set the width of the input element and just retain the values for size and maxlength attributes. It will have the same length all throughout the different kinds of browsers but still have different rendering.
input {
width: 50px;
padding: 5px;
}
make some little bit of css in your input text like
HTML
<input type="text" class="blabla">
CSS
.blabla{
width: 100px;
}
Dont forget to add px after you type size on your CSS.
I am experiencing some ghosting, artifacting, or just general wonkiness when trying to use a box shadow on Internet Explorer 9.
The goal is to have a group of text areas, that when focused, will be highlighted with a box shadow. This is working without any issues in most browsers, but when cycling through elements in IE9, I see the following behavior:
In the above example, the third text area loses focus to the second text area. The left and right sides of the box shadow do not disappear on the third text area and do not appear on the second one.
The code to reproduce is below. The issue appears when switching focus between the second and third text area.
HTML
<label>Text Area 1:</label>
<textarea class="sampleClass"></textarea><br /><br />
<label>Text Area 2:</label>
<textarea class="sampleClass"></textarea><br /><br />
<label>Text Area 3:</label>
<textarea class="sampleClass"></textarea><br /><br />
CSS
.sampleClass
{
border:1px solid #ccc;
}
.sampleClass:focus
{
box-shadow: 0px 0px 12px rgba(255,0,0,.8);
}
The code can also be seen here.
What exactly is going on here?
I have a tip... in many cases we can use PIE!
http://css3pie.com/
it "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features."
It helped me a lot!
I have two <input> fields with the HTML attribute size=20.
This displays fine in Mozilla Firefox; the two text fields have the same size.
Internet Explorer shows one bigger than the other.
Can you help me there?
<td>Login</td><td><input type="text" name="login" size="20"/></td></tr>
<tr><td>Password</td><td><input type="password" name="psw" size="20"/>
I'll tell you what I told somebody else earlier on, you may benefit from a reset.css in your page, as I.E. is a niggly so and so it sometimes looks a lot different than other browsers. This is the reset I would normally use:
http://meyerweb.com/eric/tools/css/reset/
This should make it look a bit better, if that doesn't work, you're going to need a seperate css file for internet explorer.
Set your width in pixels instead like
<br>input.text {background-color:#fffafa; border:dotted 1px #555; width:230px;} <br>
Then you should have solved the problem.