you can go here: http://phpbb32.majordroid.com/index.php
and see live example
you can see this:
see image
letter "g" is partially visible... and all other similar letters like q, j, p, etc... have the same problem...
how to fix this problem to see the last line normal ?
Also from admin panel I can change font family, and then for some font family the last line of text is normal visible, but for some is not like in this case.
is It possible to adjust to be normally visible for all font family types ?
Thank you
Because .list-inner has css property overflow: hidden set, and a max-height as well it is cutting off the text. If you remove both of this properties it will display correctly.
You need to compromise and choose which way you want to go, max-fixed height might not always work. If you're title have max characters then you don't really need that max-height
So remove those from your list-inner:
overflow: hidden;
max-height: 3.6em;
And hide the forum-description?
Related
I'm working on a site wich has filters on category pages - http://www.purrfectlyyappy.com/fun-and-games/dog-toys
The filter is on the left hand side, but the text in the filter appears under the products when it's too long, is there a way i can set it to break onto a second line if the name is too long?
Seem like it should be easy, but i've been struggling on this!
This is happening because there is a css in you page
.hikashop_filter_checkbox {
white-space: nowrap;
}
Above css is already applied on your html page which is forcing elements to come in single line.
You can either remove this css and if not then use following css in label
.hikashop_filter_checkbox label{
white-space: normal;
}
Use the overflow property.
enter link description here
Here, adding :
overflow : scroll;
will make the "too long text" in a scroll area. There are many other values.
I have a HTML page where I am listing pictures of people and their names. If there name is longer than 20 characters I want it to show up on 2 lines instead of one to avoid a lot of empty horizontal space for the people below them
What is the simplest way to make sure to do this. To be clear, I don't want to break up words in name but rather just break up the words on two lines.
You can try setting the width of the container that holds the name to be smaller or alternatively add some padding. For example:
HTML
<div class="name">This is my name</div>
CSS
.name { width: 50px; /* or whatever value works for you */ }
You would rather need to decide what is the maximum width that the name can take. Then,
.boxed-name { width: ?? px;text-align: ??; }
The main issue with a character counting solution is that it doesn't consider the font family neither the font size. This can lead to serious differences. Also, mmmmmmmmmmmmmmmmmmmm can be longer than iiiiiiiiiiiiiiiiiiii if the current font is not fixed.
i have a select drop down, which has the word "girl" as an option.
The problem is that the "l" of girl is very close to the arrow drop-down thing on the select. How can i put a bit more "space" between the word/content (all of the options, i mean. I don't feel the need to just target the word "girL") and the little arrow?
I have tried putting a space after "girl", but this has no effect (ie the problem is still extant).
Here is what it looks like (kind of)
sex: |boy |v|
|girl|
here is what i want:
sex: |boy |v|
|girl |
yes, i know pretty much everyone here knows what i'm on about. it is just kind of fun to draw the dropdown with pipes!
PS html or css, i am indifferent to the method of the solution!
Maybe, this is too late, but, I am posting it as information for next visitors.
Setting the width is not solution for every case. Flexible width is useful sometimes.
Padding-right is not solution too, because it only adds space between arrow and
right border, but not between text and arrow.
For static list item, adding at the tail of each row is best solution. But if you do it dynamically, Google Chrome shows it as text instead of special character.
For dynamic change, following works great:
option.text = itemtext + String.fromCharCode(160);
Hey now give to padding right to select tag as like this
select{
padding-right:40px; // as your requirement give to padding-right
}
Live demo http://tinkerbin.com/vPS8tXNJ
just use
to add a space after it.... if you do need it in css...
padding-right: 10px;
My page is here. The section I am on about starts with CANVAS FINE ART WRAPS, you will notice between the first and second paragraph there is a big gap. I have looked at it on chrome (osx), safari(osx) and firefox(windows)
There's nothing in the markup to suggest the reason for it. Inspecting it shows no margin or anything causing it.
It sounds like Wordpress is sticking in something it shouldn't be. My suggestion would be:
Go into html view
Cut out all of the code
Paste it into notepad
Save the page as completely empty
Copy back the elements one by one into your html view and save.
Add display: inline-block; to the .box p selector. It should work after this.
the p has a margin - which should be reduced
also , the box class should reduce its line height.
edit
Also - ive edited your text to : 1111 and 2222 and it was fine
you probably pasted the text which contains some bad chars
The main issue I see is on line 199/200 of your normalise.css file:
it has:
p, pre {
margin: 1em 0;
}
If I remove this, the big gap is removed.
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.