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
}
Related
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.
It seems I must have read every article and guide to using border-image that there is on the web, and have tried just about every suggestion possible, yet it still isn't displaying! It's destined for a ul of class "navbox", and the full CSS for that element is below.
ul.navbar {
float: right;
list-style-type: none;
background-color: #F8F8F8;
border-style: solid;
border-width: 4px;
border-color: #231F20;
color: #1F1F1F;
margin: 25px 5px 5px 5px;
height: 50px;
position: absolute;
left: 450px;
right: 20px;
vertical-align:middle;
border-image-source: url(C:\Users\imamadmad\Documents\Web Stuff\Locomotion Coffee\border.png);
border-image-outset:4px;
border-image-width:4px;
border-image-slice:8;
border-image-repeat:repeat;
}
I feel I have tried every possible combination of the border-image property, and even used both a .png and a .jpg version of the file, yet nothing displays. I've even removed the other border styling completely, but replaced it when that didn't make the border-image appear as I still needed some sort of border! I'm not sure if it would have anything to do with the fact that I'm calling the entire document and all files associated with it through my computer rather than through the web, as I need to make a mock-up on my own computer before I can put it online. However, everything else, including other images, are displaying just fine. It is neither displaying in Chrome nor IE, and Firefox just doesn't want to show any CSS at all, so that's unhelpful. I have tried adding the -webkit- etc. tags to the properties, but they made no difference either and besides, it shouldn't need it for the latest version of Chrome, which I'm running.
Please, can anyone help me! While it's not vital to the design, it would really just make it that much easier on the eyes.
Works fine. Check your image url
FIDDLE DEMO
ul {
float: right;
list-style-type: none;
background-color: #F8F8F8;
border-style: solid;
border-width: 4px;
border-color: #231F20;
color: #1F1F1F;
margin: 25px 5px 5px 5px;
height: 50px;
position: absolute;
left: 450px;
right: 20px;
vertical-align:middle;
border-image-source: url(http://i46.tinypic.com/10gljba.jpg);
border-image-outset:2px;
border-image-width:4px;
border-image-slice:8;
border-image-repeat:repeat;
}
Hope this is what you are looking for
Edit : FIDDLE Updated
I have applied the following html
<input type="image" value="Search" class="button" src="" onclick="this.form.searchword.focus();">
and this is the css...
#header form .button
{
/*border:solid 1px #999;*/
background:#664335 url(../images/btn-search.jpg) no-repeat ;
/*color:#fff;*/
display: inline-block;
font-size: 0;
width: 16px;
height: 20px;
vertical-align: middle;
background-color: transparent !important;
border: none;
}
I tried by removing the width and height and setting a padding value to it but no-success for this. As I searched different questions, I came to know that if src attribute is not applied then border will appear. But in my case the markup I can't edit, so is there any method to remove that bug.
Anyway I solved it by changing type image to button with jquery.
Apply CSS:
#header form .button {
border: solid 1px #999;
background: #664335 url(../images/btn-search.jpg) no-repeat;
color: #fff;
display: inline-block;
font-size: 0;
width: 16px;
height: 20px;
vertical-align: middle;
background-color: transparent !important;
// delete this
border: none;
}
This questing has been asked more than one time, and the best posible solution to this is just to use type="submit" instead of type="image"and just style it in CSS as you like
P.S. type="image" will not work in chrome as you want, try finding another way for your code, because that border is place holder for an error image like in IE widely known red cross in white box, its just there, you may try adding image that has "Search" written on it or maybe add 1x1 px transparent image there, but thats all.
I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding​ style.
I have an issue and I can't seem to either find the answer here or solve it myself. The textboxes seem to have by default approx. 10px over and below the actual textbox. I've tried setting the margin and the padding to 0 but nothing the space remains.
I want that textbox to be right over the element that is below it, using margin to move it causes it to push the div below it lower so it doesn't really help. Any idea how I can get rid of that whitespace?
Markup:
<div class="span-8 last">
<label for="VoicenoteSearch"></label>
<input name="data[Voicenote][search]" type="text" class="input-text long" style="margin-top:10px;margin-left:-10px" placeholder="Search" id="VoicenoteSearch">
</div>
Relevant CSS:
label {
display: block;
}
input.input-text {
border-color: #b9b9b9;
border-width: 2px;
position: relative;
z-index: 2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 8px;
padding: 5px;
}
.input-text.long {
width: 320px;
}
JSFiddle: http://jsfiddle.net/pyQ5T/
Even if I remove all the CSS those spaces are there, it seems it's part of the textbox by default
Try adding these CSS properties:
padding:0px;
margin:0px;
float: left;