I noticed a strange behavior with the default font size option (I'm NOT speaking about the minimum font size under the advanced tab) under Firefox :
go to this page http://fr-region.xb83studio.ch/2012/lachen/ and put a default font size of 44px or higher. Can somebody explain why the second list drops under the first one ?
The texts inside have a font size specified, hence they aren't modified by the default font size feature.
At first the problem occurred with a default font size of 17 pixels and higher. I reduced the width by 3px and it now works up to 40px. But I still don't understand why this problem arises. I would really appreciate an explanation.
BTW, I'm running Firefox 12.0 under Windows 7 Professional SP1
Thanks for your ideas
René
You have two inline-block elements with width 207px and left-margin 32px each. They're in a container with width 488px (573px width div containing a section with auto width, a 55px left margin, and a 30px right margin). In your markup, there is whitespace between the </ul> for the first inline-block and the <ul> for the second one, so in the rendering there is a space between them, just like between any two characters separated by whitespace. The width of that space is the width of a space character in the container's font.
So the second list will wrap under the first one once 488px-2*(207px+32px) = 10px is smaller than the width of a space character in the container's font.
If you earlier had your inline-blocks at 210px width, then the wrapping would happen once the width of a space is more than 6px; somewhere around a 17px font size sounds about right for that for typical variable-width Western fonts.
Related
My horizontal nav bar and footer look perfect on PC, but when testing on Mac, the font is lifted about 30px above its position in the horizontal nav bar.
After trying every CSS reset and line-height adjustment, what finally worked on Mac made the font drop about 30px below its position in the horizontal nav bar on PC this time.
One Stackoverflow answer mentioned editing the glyph/baseline of a font.
I downloaded a free font editing program and noticed the characters inside of each respective square were lifted as if to have a 40px margin underneath, but I can't adjust the height of the baseline in the program.
Is there a free font manipulation program that will allow me to adjust the glyph/baseline of the font?
I appreciate your time in advance.
Try to generate your font via http://www.fontsquirrel.com/, and use the CSS for font-faces it gave you.
If the above does not work for you, try this:
Try to find out with JavaScript if the app is running on Mac. If so, load a new font-fix-mac.css file, where you will put margin-top:30px on all elements where the font is lifted above.
I have the following fiddle: http://jsfiddle.net/VyXWp/1/
#wizard li {
display: inline;
min-width:100px;
float:left;
}
The second divs width should be calculated based on the text width.
In IE7 and IE8 it is messed up.
For some reason the 'a' element gets the width of the span2 div instead of the text.
Edit:
After more digging i noticed that the problem was not width but float. If i set no width, the float doesn't work. It doesn't limit the width to that of the text.
Edit 2:
Couldn't find any pure css solution that worked and kept the width auto, so in the end i calculate the width with javascript.
The CSS width property takes a fixed parameter when passing precise values, but in terms of percentage, if you set the width of an element to 50% or 100% it will take the percentage of the width its parent element is.
so if you have a div with a width of 500px and p tag inside with a width at 50% the p tag would be 250px, vice versa with a 100%.
i short my suggestion is to make sure that the parent element either has a fixed width or percentage
you might also find this helpful
http://learnlayout.com/percent.html
Couldn't find any pure css solution that worked and kept the width auto, so in the end i calculate the width with javascript for old browsers.
The main text of my website's first word has a significant larger font-size than the rest. For some reason or another the container that contains the text cuts the first word off on top. Probably because the line-height of the first word is identical to the rest of the text and thus the container is not able to calculate its own height properly.
Codepen snippet: http://codepen.io/sardasht/pen/maJup (I've included the full contents of my css file to be able to debug properly, so will not embed this here. If this is requested, I'd happily edit my post to include it, but it will be ~300 lines of text)
If I increase the line-height of the first word, the rest of the text which is on the same line gains the same line-height and thus jumps up from the rest of the text below. If I add a margin-top to the container element, the first word is not cut off anymore, but then the bottom line of the text is cut off.
I played with overflow: visible/hidden as well on all parent elements, but to no avail.
The p element has line-height: 1.5em, which will set the height of the text lines inside it. Because of the em unit, the height is determined based on the font size, and it's the font size set for the p element that is used, so the line height won't increase because of the larger font size set on a child element.
I would try using a line-height declaration that isn't set in px, or ems.
p, span { line-height:1 }
I also tried
span { line-height:0.8 }
which seemed to give the very least amount of top "push", but I only viewed it in FF on a Mac.
I've noticed, with fonts, that their heights and widths are rendered differently from browser to browser. And this can be exacerbated with fonts that haven't been given proper leading, kerning, etc. This can cause "odd" line breaks, which causes a 'problem' with set block heights -- especially going from FF, and Chrome to IE. FWIW.
EDIT:
http://jsfiddle.net/mvf6j/
Setting the line-height to 1 (of the child) equates to 100% of the parent's line-height; thus, in your example code 1 = 1.5em. In my fiddle/example, 1 = 1em (even with the child being a 2em font). It's inheritance. It makes the child relative to the parent. And takes the guess work out, if you should want to change the parent's size. All of that ease in sizing/relationships disappears when you set explicit line-heights to the children.
I often embed webfont (#font-face) in sites that I develop and I have never encountered a major problem until today.
In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.
What we had before with standard desktop font (= rendering is good for us):
What we had with the font-face (no change in CSS stylesheet):
Here is the CSS:
#content h1 {
background:#000000;
color:#FFFFFF;
font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
font-size:35px;
line-height:30px;
padding:10px;
text-transform:uppercase;
}
Usually font websites will have ways to configure the webfont package when you download it. I buy all my fonts from myfonts.com and under the advanced settings there are options for line-height adjustments. Try downloading the font using native line-height adjustments if this option is available. If not, try uploading the font to fontsquirrel's online font generator and upload the new version.
That's not the same font. The shape of the O and the curvature of the arm on the R give it away, which means the fallback fonts are being used, likely due to #font-face not loading properly. Different fonts will have different default spacing, as stated already, which would also lead you to believe it's a line-height issue.
Try making your fallback fonts something totally obvious, like:
font-family:"DINPro-Bold",serif;
This worked for me:
Generate the webfont at Font Squirrel. After uploading the fonts select 'Expert', scroll down and check the checkbox 'X-height Matching'. This resizes the height to match the x-height.
If you have problem with line-height of your webfont (especially if font suppose to be big in your project) try this: close your font in div or other block element and set "overflow" to "hidden". Div will have exact height of your font so any additional space will be cut off.
Try adding "position: relative; top: 5px;" to the "h1" tag
Try position: relative; paddint-top: 5px; padding-bottom: 0px;
Line height according to wikipedia
In typography, leading (rhymes with heading) refers to the amount of
added vertical spacing between lines of type.
This can be achieved like this...
.class{
line-height: 1em;
}
But if you are referring to the height of the letters then this is not something that can be adjusted. It is part of the font you have chosen to use.
I have quite large text (font size 28) I'm trying to align vertically in a fixed-height container.
I'm doing this by eye and just setting a margin-top so that it gets to the right spot. However, when in Firefox, I need a margin-top of 20px, in Safari I need like 15px (else it's too far down). I saw that the discrepancy was because in Safari the text element is taller than in Firefox and includes a slight amount of whitespace on top that doesn't show up in Firefox (in Firefox, the top of the text element is exactly when the text starts).
I've tried all kinda of display combinations with line-heights and perhaps adding a width/height for the text and whatnot. Nothing works.
What can I do to make this consistent? I'd hate to use JS but it seems like the only option...
For cross-browser CSS normalization I'd recommend a reset - YUI3 has a good one, Twitter Bootstrap is another good one. It basically sets paddings and margins to 0 so all browsers will behave and only adhere to YOUR css rules and not their own default rules.
For vertically aligning text to containers, if it's a single line of text, use the line-height property, and set it to equal the height of the container.
For example:
CSS:
div {
height:300px;
width: 400px;
line-height: 300px;
font-size:28px;
background-color:#F0F0F0;
}
HTML:
<div>
Some vertically centered text
</div>
Example: http://jsfiddle.net/Djvv7/
You need to apply a css reset. Good practice to use one on all projects. The most famous I know of is: http://meyerweb.com/eric/tools/css/reset/