having my first attempt at rounded corners in a login form. Just doing the layout right now, but having some IE7 troubles. Trying to avoid using conditional statements, but although I can get it displaying perfectly in Firefox 3.5, IE looks to be creating a larger margin on the right and left of my login button. It could be that I'm not structuring this the best way possible, so looking for a little insight from the community. Most of my problems began after trying to round to corners using the method shown. My goal is IE6/7 compatibility.
<div id="credentials">
<div id="credsheader"><div id="tr"> </div></div>
<input type="text" class="blurred" id="username" value="USERNAME" />
<input type="password" id="password" class="blurred" value="PASSWORD" />
<button type="submit" id="login"><img src="./images/login.png" alt="Submit" /></button>
<div id="credsfooter"><div id="bl"> </div></div>
</div>
div#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666;
padding: 0px 5px;
}
div#tr{
float: right;
background: url('../images/tr.png');
background-repeat: no-repeat;
cursor: default;
}
div#bl{
float: left;
background: url('../images/bl.png');
background-repeat: no-repeat;
cursor: default;
}
#credsfooter{
position: absolute;
bottom: 0px;
left: 0px;
height: 6px;
}
#credsheader{
position: absolute;
top: 0px;
right: 0px;
height: 6px;
}
#username{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
font-size: 8pt;
padding: 3px;
margin: 8px 3px;
vertical-align: middle;
}
#password{
font-size: 8pt;
padding: 3px 3px 4px 3px;
margin: 8px 17px 8px 3px;
vertical-align: middle;
}
input.blurred{
color: #AAA;
}
input.focused{
color: #000;
}
#login{
background: transparent;
border: 0px;
padding: 4px 0px 2px 0px;
margin: 0px -12px;
cursor: pointer;
vertical-align: middle;
}
On a <button> element in IE7 you need to set overflow visible:
button {
*overflow: visible;
}
Found here: http://refresh-sf.com/blog/2009/06/button-padding-ie7-bu/
I personally like to use the "* hack" to target IE7 only - although probably unnecessary in this case.
Ok so I found a lot of problems cause by browser inconsistencies which were causing you a whole lot of problems so I basically started over. I hate forms because of inconsistencies so this was a learning experience for me. I was able to really consolidate the CSS because a lot of it was used to compensate for weird padding and margins. The main thing was I used an input element for a button instead of a button because it is more consistent across browsers. I also added a form tag to fix any issues there. Note that the <p> in the form is intentional. I also added an reset.css file that makes a huge difference because It resets all elements to a state that is consistent to all browsers.
Below is the re written-code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Buttons Suck in IE7!</title>
<link rel="stylesheet" href="reset.css" type="text/css" />
<style type="text/css">
#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666666;
padding: 10px;
-moz-border-radius: 5px;
}
input.text-input{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
border: 1px solid black;
vertical-align: middle;
height: 20px;
width: 140px;
color: #AAAAAA;
}
input.text-input:focus{
color: #000000;
}
input#login{
background: transparent;
border: 0px;
height: 20px;
cursor: pointer;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="credentials">
<form action="http://www.site.com/login.php">
<p>
<input type="text" class="blurred text-input" id="username" value="USERNAME" />
<input type="password" class="blurred text-input" id="password" value="PASSWORD" />
<input id="login" type="image"
src="http://www.axialis.com/objects/users-home.jpg"
name="submit" value="Button Text" />
</p>
</form>
</div>
</body>
</html>
Note that the image I used for the button is some random image I found on Google! You probably also notice that I used -moz-border-radius: 5px; for the rounded corners. This was for simplification. What you can do is take a screen shot of the credentials box in Firefox and then crop just the box out in your favorite image editor. Next you would fill in the inputs with the gray color using some sort of paint brush tool. Now you would have a blank gray box of the same shape and size. Now all you have to do is set that as the background image of your credentials box. That's a lot simpler then do each corner at a time! Don't forget to get rid of -moz-border-radius: 5px; after you do this.
Oh, and before I forget here is reset.css:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Include this reset.css on every page its a lifesaver trust me. Oh and one last note. input.text-input:focus{} probably wont work in IE6 or 7, it will only work on tags. But don't worry because I think IE6 has a limited lifespan at this point.
I hope That helped...good luck!
UPDATE: I tested this on IE 5.5-8 and it looks the same on every one, the only problem is :focus only works in IE8 for input tags.
Not sure if this is the case, but it could be the 'IE Double Margin Bug'.
From memory, I think it might be worth trying to add display: inline; to your floated elements?
Good Luck!
That's difficult to answer that without viewing the HTML in action (with images, for example). Could you set a sample page up somewhere?
Theoretically, it could be a case of not having hasLayout for your button element. You can add the position: relative CSS style to the button element and see if it works. Alternatively, it could be a case of negative horizontal margins (IE does not like them sometimes).
Got acceptable margins, but still not perfect cross browser. Just spent time manipulating margin sizes in pixels until it didn't look terrible.
Related
I have been searching Stack Overflow answers for previous question but none seem to be helping for my Firefox issue.
I have all my inputs as type="search" and then some CSS to display a clear button which appears to be working in Edge, IE, Chrome but not in Firefox.
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
border-radius: 50em;
background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
background-size: contain;
opacity: 0;
pointer-events: none;
cursor: pointer;
}
input[type="search"]:hover::-webkit-search-cancel-button {
opacity: .3;
pointer-events: all;
}
/* Doesn't displays the 'X' when input 'Disabled' */
input[type="search"]:disabled::-webkit-search-cancel-button {
-webkit-appearance: none;
background: none;
cursor: not-allowed;
}
<input class="form-control mand" type="search" />
Screenshots
Chrome/IE/Edge
FF
Chrome etc the 'x' is displayed onhover and onfocus but never in FF which I find peculiar as I'm using a Fontawesome image.
I have also tried just using
input[type="search"] {
background: transparent
url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg);
background-position: 7px 7px;
background-repeat: no-repeat;
background-position: 2px 3px;
}
but still nothing. I reference the above from another post here.
According to MDN Web Docs, Firefox does not support ::-webkit-search-cancel-button, and it advises against its use use in serious websites. I advise you look at some of the answers to this question. The most-upvoted option doesen't appear to work in Firefox, but some of the ones below it appear to do just what you want. This answer looks good, as it requires no JS. It's not the nicest looking one on the page, but I'm sure you can sort that out.
This will solve your question.
"I reference the above from another post here"
You can put icons next to inputs like this. Thus, you can avoid browser support problems.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.icon {
padding: 10px;
background: #fff;
color: #000;
border:1px solid #000;
border-right:none;
min-width: 50px;
text-align: center;
font-size:20px;
}
.input-field {
width: 100%;
font-size:20px;
padding: 5px;
outline: none;
border:1px solid #000;
border-left:none;
color:#000;
}
.input-field::placeholder {
color:#000;
}
</style>
</head>
<body>
<form action="" style="max-width:500px;margin:auto">
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Username" name="usrnm">
</div>
</form>
</body>
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
I have a textbox and when I enter the term "laptop" its not visible properly. The problem is in IE9, not with Chrome.
HTML
<input id="small_search_string_sub" name="search_string" type="text" class="newsearch_sub rounded " placeholder="Search..." maxlength="500">
Here is the CSS:-
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
}
It seems like you have no reset for the input default style, also the input has not format for the text on it, also the padding might be pushing down the text to far.
I tried this, and it seems to work well on IE9 for me, but the fact that I see another class (rounded) on the line of code that you send, makes me wonder if there is not something missing here, can you put a link to the code, even as a stand alone page, this way I can debug on ie9 on the proper code, and maybe give you a solution if this one does not work for you.
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
font:12px/24px Arial,Helvetica
}
I am trying to float a <button> to the right. the <button> is outside of <form> but is on the same line. For some reason this is not working in FF. I made my form background red and found out that the <button> is still in the <form> in FF even though its not! Every other browser works fine, the <button> is not in the <form>.
Screenshot:(left is chrome...the one with http:// and the right is Firefox
alt text http://img375.imageshack.us/img375/3824/ffchrome.png
HTML:
<form>
<input type="url" placeholder="http://" />
<input type="submit" value="Crypt" />
</form>
<button type="button"> ? </button>
CSS: (Took out the unnecessary code)
section.crypter {
padding: 25px;
}
section.crypter form {
display: block;
float: left;
background: red;
}
/* Input */
section.crypter input[type="url"] {
border:1px solid #666;
color: #939393;
font: italic bold 1.7em Verdana, Arial, Serif;
outline: 0;
padding: 10px 10px;
width: 240px;
}
section.crypter input[type="submit"] {
border:1px solid #666;
color: #000;
font: 2em Verdana, Arial, Serif;
margin:0 0 0 -10px;
padding: 8px 20px;
}
section.crypter input[type="submit"]::-moz-focus-inner {
border: 0;/* Firefox hack */
}
section.crypter button {
display: block;
float: right;
padding: 10px 25px;
}
I tried your code with firefox 3.6.8 and did not have the issues you got. I also don't think Firefox will manipulate the DOM (moving the button into the form tag), what seams to happen.
So I guess its one of your Firefox extensions, that causes the issue.
It might be worth trying to uninstall and install firefox and the good old fashion reboot.
Hey guys, I figured it out thanks to Kroc Camen. In Firefox, I cannot float something to the right unless it is first in order within the wrapping element. (A engine quirk since the 90's) haha Thanks for the help though!
I have a text input with a search buton absolute positioned over it... to make space for the button I used some padding to keep the text from going under the button, which is fine, it works in firefox, but not IE.
In fact... It doesn't seem like padding on text inputs works at all in IE.
They have the following code
<style type="text/css">
#mainPageSearch input {
width: 162px;
padding: 2px 20px 2px 2px;
margin: 0;
font-size: 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
border-color:#C6C6C6 #C6C6C6 #E3E3E3;
border-style:solid;
border-width:1px;
color:#666666;
}
#mainPageSearch {
margin-bottom: 10px;
position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
display: block;
position: absolute;
top:0px;
right: -2px;
text-indent: -2000em;
height: 22px;
width: 22px;
background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>
<form id="mainPageSearch" action="">
<input type="text"/>
<a id="mainPageSearchButton" href="#">Search</a>
</form>
Is what I'm trying to do possible or should I just suck it up and deal with the text going under the search button?
I know I could make a search box with a transparent background/border and draw the styling using a containing div... but that isn't really an option because of how many places I've have to change it on the site.
Maybe I'll make a new class for this text input that makes it transparent and assign the normal text input style to the containing div? What do you think?
edit: sorry I should have included the doctype... here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
also, The problems I'm having are in IE 7
try using line-height
I had this issue also i solved it by adding the following line
input
{
overflow:visible;
padding:5px;
}
hope this helps? Let me know.
Try border-right instead of padding-right. This worked for me.
Make your input transparent and place styles inside a container div:
http://jsfiddle.net/LRWWH/211/
HTML
<div class="input-container">
<input type="text" class="input-transparent" name="fullname">
</div>
CSS
.input-container {
background:red;
overflow:hidden;
height: 26px;
margin-top:3px;
padding:6px 10px 0px;
width: 200px;
}
.input-transparent {
background-color:transparent;
border:none;
overflow:hidden;
color:#FFFFF;
width: 200px;
outline:none;
}
There is a css only fix for it
div.search input[type="text"] {
width: 110px;
margin: 0;
background-position: 0px -7px;
text-indent:0;
padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
border-left: 25px solid transparent;
background-position-x: -16px;
padding-left: 0px;
line-height: 2.5em;
}
Thanks
Muhammad Atif Chughtai
You'll have to use float: left/right on '#mainPageSearch input' before you can apply padding/margin.
I experienced a similar problem - IE was padding the input field, but not making it bigger, thus pushing the text down inside of it. I fixed it by setting the height of the input as well. Try that.
I have the following working in IE7. What version are you targeting?
<style type="text/css">
input#test {
padding: 10px;
}
</style>
<input type="text" id="test" />
What about declaring DOCTYPE?
By adding <!DOCTYPE html> padding works grand for me in IE8. Take the following code as an example:
<!DOCTYPE html>
<html>
<head>
<style>
#myInput {
padding: 10px;
}
</style>
</head>
<body>
<input id="myInput" value="Some text here!" />
</body>
</html>