I have an image as the background for an input field. I can set the line-height and font-size easily but when you click inside the input, the cursor line is way outside the background image.
Is there a CSS statement (Is that you call them?) that controls this?
You're probably using line-height to display the text in the input as vertically centered. However, it is also the culprit of your issue. Try experimenting with padding settings of the input instead, while leaving the line-height set to normal.
Problem with using padding is that it is displayed inconsistently in different browsers while line-height in input text areas are displayed equally in IE7, IE8, IE9, Safari, Chrome, Firefox and Opera. It's seems like you have to choose between input cursor or input text vertical alignment.
Yes, line-height.
Try:
input {height: 28px; font-size: 10px; padding: 7px 5px;}
The post Vertically aligning the text cursor (caret?) in an input box with jQuery, Javascript or CSS may help you.
It seems that your padding size affects the cursor size and position.
Will be good if we have the code , you also can try
background:url("yourimage") right top no-repeat;
font-size:12px;
padding:5px 5px;
line-height:normal;
depends of your images size
Using a line-height: normal or a line-height:inherit did the trick on my side.
Thanks for your answers guys.
the text in input tag can be vertical centered automatically, do not use line-height on it.
Related
Right now, I have PHP outputting a list of tags from an SQL database and creating each of them as an <a> tag that looks something like: <a class="tag" href="tags/test-tag" style="background-color:rgb(150,150,255)" title="test tag"> test tag </a> with css:
.tags {
margin-block-start: 0;
margin-block-end: 0;
margin-left: 5px;
overflow: hidden;
font-size: 16px;
display: inline;
margin-top: 2px;
text-overflow: "";
}
As it stands this looks pretty good, but after 3-4 lines (depending on title length) the tags reach the end of the div and keep going, leaving a little bit of the first tag to wrap below visible despite having overflow:hidden on.
Two rows of tags with the third barely visible ("peeking") above the bottom of the div
Is there any way to fully hide any overflowing text? I've changed values around many times to no avail, but I haven't had time to work on this in a while, so I couldn't really say what precisely I've done. Any help would be greatly appreciated.
You can use white-space: nowrap to prevent text from wrapping to the next line and keep it all on one line.
.tag {
white-space: nowrap;
}
This will keep the text from wrapping and any text that exceeds the width of the parent container will be hidden due to the overflow: hidden property.
Currently have a textarea that receives a message and displays it to a user.
However currently when it receives it, if the message is longer than it's border, it keeps displaying the text on one line outside the right hand border.
I would like the text to start on a new line when it reaches the border. How can I do so?
Below is the current code for the text area.
Text area:
echo form_textarea(array('name'=>'name','rows'=>3,'cols'=>100,'wrap'=>'hard','value'=>""));
width: 50px; word-wrap: break-word; should do the trick, of course set your own width
I have a page which is a cms/wysiwyg/ms word nightmare.
It pulls many paragraphs of text from a database, some of which have retained ms word's bizarre html tags - including font declarations!!! ahh!
In one sentence I can have things like:
<span style="font-family:Verdana">this is some</span>
<span style="font-family:arial">ugly text!</span>
I was wondering if there is a way of removing all font-family and font-size styles so they will adapt the master stylesheet css?
I'd prefer to not get into massive preg_replace conditions if I can avoid it.
Thanks
CSS:
span {
font-family: initial !important;
font-size: initial !important;
}
Well, if you're getting inline styles in many places, I would add this to the body CSS
body {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 16px !important;
}
If you notice that all of the inline font styling are going on spans, you could target spans instead of the body.
I chose these two fonts because they are the "default" fonts for Windows and Mac/iOS.
Of course you can choose your own font size. The only unfortunate part about this is if you want a different font and font size in other places you'll have to use more !importants.
You can use the !important rule for this. But you will have to explicitly define each element you want it to go on (or use the universal selector *)
http://jsfiddle.net/b8RKm/
* { font-family: Tahoma, sans-serif !important; }
I am using php to output and exerpt inside a p tag.
I am then wrapping the inside string of the p tag with a span.
<p class="lead"><span><?php the_advanced_excerpt(); ?></span></p>
The outputted html...
<p class="lead"><span>Motorcycle helmet Full face or open face. A motocross or enduro style helmet is a better choice. These are specifically designed for off-road use and have particular…</span></p>
The span then has this css on it...
.carousel-caption .lead span {
background: #F60;
padding: 5px;
}
Please see the out come here...
See the green arrows - where it looks as desired.
See the red arrows - where padding is missing.
As you can see the orange high lighted lines are flush at the end of each line. Apart from the beginning and the end of the string.
So my question is how can I add left/right padding to each of the lines?
So it appears that each line has been highlighted with a background colour. Like plastic tape that you get embossed letters on.
Is this posible somehow?
Add "display: block" or "display:inline-block" to span's class
Unfortunately I do not think it is possible, and this is why:
span is always inline like this, so padding adds an extra 5px on the top, bottom, left, and right. Now your middle lines are not the beginning or the end because they are one line, so padding does not read for them.
You can set a background with display:block but you want a "highlighted" effect, which is not what display:block will give
I have run into this problem a few times. I have no problem limiting characters in a string to a specific number. However, some characters are longer than others so it wraps to another line or makes my DIV element wider and not uniform with the rest of my website.
For instance:
Literacy - Is it the Sa
Machu Picchu, Cuzco, Pe
are the exactly the same amount of characters (23) including spaces but the Machu Pichu one is longer in terms of the actual width on screen.
Is there any way to have a uniform size for a string that is based on the width of the actual string as opposed to the number of characters? Someone has had to have come up with a solution to this before right?
First (obvious) solution: switch to a fixed-width font such as Courier, Lucida Console, Consolas, etc.
Second solution: use the GD library to write strings to a graphic object and measure that object.
You'd probably have to play with GD and imagefontwidth(): http://ar2.php.net/manual/es/function.imagefontwidth.php
Without writing an algorithm in PHP to limit characters based on "font-widths" for the specific font you are using, you can use a monospace font.
Alternatively, I'm sure a JavaScript solution could be written as well to test the widths, but I'm not sure how off of the top of my head.
This can't be done in PHP -- the best you can do is approximate. Different browsers and different operating systems render font widths differently for the same font. So even if you manually stored an array of character font widths for the font on your browser and os, it might not match up with others.
It's usually better to work your design around the possibility of different-width fonts than to try to force it.
That being said, this can be done perfectly (without approximation) in javascript, albeit with a little bit of a hack. There are a number of possible methods, but here's one: Start by rendering the full string in a div that has width that you are looking for, then measure the div's height. If it is larger than one line could possibly be, then start a loop progressively removing the last word. Keep going until the height of the div is for one line.
Use CSS for formatting so they all have uniform widths - no jagged edges on the right side. Something like this:
p { text-align: justify; }
Had some fun workin on this CSS + JS solution. It wasn't tested intensively (Firefox + IE7/8) but it should work ok...
<script type="text/javascript" src="jquery.js"></script>
<style>
.monospaced, .not-monospaced{
font: normal normal 16px/16px Verdana; /* not monospaced font */
clear: both;
}
.monospaced span{
float: left;
display: block;
width: 16px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$('.monospaced').each(function(){
var monospace = $(this).html(); // .trim() does not work at IE http://api.jquery.com/jQuery.trim/ (view comments)
monospace.replace(/(^[\s\xA0]+|[\s\xA0]+$)/g, '');
mono = monospace.split('');
for(i = 0; i < mono.length; i++){
if(mono[i] == ' ')
mono[i] = ' ';
mono[i] = '<span>'+mono[i]+'</span>';
}
$(this).html(mono.join(''));
});
});
</script>
</head>
<body>
<div class="not-monospaced">
This is supposed to be monospaced...
</div>
<div class="not-monospaced">
mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
</div>
<div class="monospaced">
This is supposed to be monospaced...
</div>
<div class="monospaced">
mmmm mm mmmmmmmm mm mm mmmmmmmmmm...
</div>
</body>