I'm trying to implement this tutorial, and it works well. However, I'm trying to use a Cufon font in my menu. The font that I'm using is too small, so I need to increase the font size.
But in this case, the animation is activating when the mouse is in between two menus because the original font needed more space. (30px Arial is much bigger than my font in 30px.)
How can I restrict the hover area only to that area where the "label image" is?
Not sure if I understand your problem correctly (example would be nice), but try to set the line-height: __px; property to exactly the amount of clickable space you want.
Or make the element containing the text a display: inline-block; so you can set the height: __px; and make sure the font is not blowing it up by forcing overflow: hidden;.
Related
I've added a new link to my navigation bar, and for more visibility, have added a "New" marker to this link for improved visibility. This "New" marker is 0.8rem compared to the link's text being 1rem. I mention this because if the "New" marker is changed to be 1rem, then this issue does not occur.
The issue itself:
When hovering over the "Order Now" link (see Codepen), you might notice that the container height is stretched by maybe a pixel or 2 from the bottom - it's somewhat hard to see in this example but tried to make the colours as obvious as possible. It's most obvious when looking at the blue underline that there is a small gap between the active link (About us) and the hovered link. This only happens when hovering over "Order Now", and as mentioned, is rectified when setting the font size of "New" to 1rem (or removing "New" completely)
Codepen with minimum example: https://codepen.io/ftahir192/pen/PoPXjEv
This is the css for the "New" marker:
.new-marker {
color: red;
font-size: 0.8rem;
}
There's nothing special going on with that aside from the differing font size. I've tried:
Setting absolute positions on the container
Setting relative positions on the links itself
Playing with line-height - this fixes it but seems more of a hack.
It's a minor nuisance but still a nuisance nonetheless and something I haven't been able to get to the bottom of. Any tips would be very much appreciated
You can fix that by adding line-height its not a hack, the <i> tag inherits the <a> tag line-height attribute value (which is 60px), line height will fix it for you:
.new-marker {
color: red;
font-size: 0.8rem;
line-height:1rem;
}
setting the min-height:70px is the reason for this issue. My suggestion is you should change to height: 91px or any other hardcoded value. and avoid using min-height.
I'm making a paging control for a grid, and using font awesome icons for prev, next buttons.
The issue is that the icon (and any text that is in that element) appear 1 or two pixels higher than text where the font icon classes are not defined. Other font libraries such as https://icomoon.io appear to have the same behavior.
In the image below, you can see how the image and it's text do not align well vertically with the page numbers. Setting vertical-align styles on the element or pseudo element do not seem to help as none of the vertical alignment settings gives aligns perfectly.
I've encountered the same problem and found the solution on another post and adding this to my css fixed it for me.
Don't forget to put the good associated icon (mine was fa-lock) and the good content value
.fa-lock:before {
content: "\f023"; /*This is what the creator of font-awesome put in to show the lines character */
display:block;
margin-top:-1px;
}
I have an image that represents my email address. I want that this image has the same height as font height or line height. So I tried this:
img.address { height: 1em; width: auto }
<p>My e-mail address is <img class="address" height="15" width="149" src="address.png" alt="[]" />.</p>
It seems to work for Chrome on desktop, but for Chrome on smartphone image is much smaller than the font. I don't understand why? Is there any remedy for that?
NOTE: since this method works for desktop browser, the question could be rephrased like this: why is in smartphone browsers the height of the font not 1em and how can one obtain the height of the font?
EDIT: I added few commands around the image to put it into the context.
The default font-size for a webpage is 16px (reference) where no more setting is applied on document. You didn't set any font size to your html or body or paragraphs and so:
the browser renders image by default font-size (16px) because there
is no more setting to control images size.
Text of webpage may not use default 16px for many other overriding settings as well as android initial settings, accessibility options, mobile friendly standards to render texts etc.
So you have to define your desired font size for entire document and then the texts and images height will have same reference.
Finally if you dont want to set initial font size, a javascript trick is to calculate the height of rendered lines and set it as image height. For example I suggest to extract first word from text and put it into a temporary div and after calculating the height of that div, set it as image height:
var myhtml=$('#imageId').parent().text();
var mywords=myhtml.split(" ");
var fisrtWord=mywords[0];
$(body).append('<div id="tempdiv">' + firstword + '</div>');
$('#imageId').height($('#tempdiv').heigh());
$('#tempdiv').remove();
Final note: the height of lines is about 1.5 times taller than the characters height. So you may reduce the calculated height by 1.5 to have better result.
Actually it is the image that is too small on the mobile. Also, 1em is
supposed to be the font height. This is what makes this problem really
mysterious.
Well not really. font-size: 16px; does not equal to height: 16px;. line-height: 16px; will not either, it actually "just" adds space on top and bottom of the chars. The font-size actually is the width of the widest character in the alphabet (I think it actually measure the letter M). So the thing you are trying to do won't work. Then there is the fact that you would have to cut the image exactly with no space, meaning there is a possible error source there. You would have to try to set the height manually by measure and compare in different viewports. If you give me a hint of what you are trying to do with a screen or something I could possibly present you a other solution. Is there a reason why you want to use a image for your email and not a regular html?
Hello I have problem which you can see here: http://adrianwajs.pl/monika/. "coming soon" sign when you hover over h2,which wraps it you can see that, in firebug you can see that letter g doesn't fit the height of h2 element. I have seen it many times but I can't find solution for this, maybe someone has?
First of all your h2 says 'Comming Soon' Instead of 'Coming Soon'
I don't see a problem in Chrome, IE, Firefox.
There are two things you can do:
More padding on your h2 tag. for example h2 { padding: 30px; }
A line-height of for example like line-height: 1.5;
In general, a glyph may well extend below the bottom edge of a line box, even when text is set solid (line height equals font size). This is up to the font designer. If this causes a problem, use a larger line height or a different font.
On your page, the descender does not actually extend that far, as you can see by drawing an outline for the heading, for example. However it almost extends to the bottom of the font and far below the baseline; this is not uncommon in fonts that imitate handwriting.
Update: The features of the Pacifico font used on the page cause line boxes containing text in that font to have a largish height, larger than line-height. On the page, in Firefox, the span containing “Comming soon” is 128 pixels high for such reasons and thus extends past its container, the h2 element.
Line box heights are calculated by browsers on the basis of height requirements, including font properties, and there is no direct way to control this. You just need to live with it and provide sufficient spacing with margins or padding.
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.