I'm doing some work on a website but can't figure this out at all! For some reason the font in the nav bar on the homepage is smaller then on the rest of the site. the site is built using wordpress and I have never had this issue before!
I have been trying to use the chrome dev tools to figure it out but so far i haven't been able to find a solution. if somebody has the time to take a look and can help me figure this out I'd really appreciate it. Thanks
Howmepage: http://www.abbeyvideoproductions.com/
On the homepage you can see the font in the nav is smaller and sits further to the left of the nav bar as a result compared to any other page on the site:
Other page example: http://www.abbeyvideoproductions.com/packages/
I think there is a problem with % font-size.
Try to define the font-size and line-height with px
style.css (line 903)
.builder-module-navigation {
font-size: 13px;
line-height: 37px;
...
}
Just delete property form .builder-module-navigation li a font-size: 112.5%;
First of all, your HTML isn't valid. Don't start with a div!
You have two places with different stylesheets
post-teasers-left/style.css vs. post-teasers-right/style.css
style-home.css vs. style-pages.css
So, this would be the first place to investigate.
In your case, you have a different font-size, although it is defined as 112.5% in both cases. From MDN - font-size
Percentages refer to the parent element's font size
This means, you must look at some ancestor's font-size. When you go up the heirarchy, you will find that in one case it is font-size: 100%, and in the other case it's font-size: 1em.
To solve your problem, you can either redefine the font-size with absolute values in the nav bar as #kkern already suggested, or use the same values in both parent's font-size.
Related
I have an intractable, at least for me, HTML/CSS problem. Here is a bit of a web page I'm currently developing:
(The whole page is here: http://www.professorbrown.net/ but has now been changed as suggested in the accepted answer.)
Note that the "fine print" at the bottom has the same line spacing as the body copy, and I can't fix it. It looks the same in Chrome, Firefox, and Edge, so it has to be an error in my work.
The CSS is: .fine {font-size: 1rem; line-height: 1.1;} The markup is <span class="fine">.
Using the inspector function of both Chrome and Firefox shows the computed CSS for font-size as 10px, which is correct, and the line-height as 11px, which is what I intended, but clearly not what's displayed. Measurement says the displayed line height is about 32px, which is the same as the body copy above the fine print. Margin, border, and padding for the fine print are all zero. HTML and CSS validate using validator.nu and Jigsaw. There are style sheets from Skeleton, Superfish, and Slick linked in. I've commented them out one by one with no change in the error.
Please tell me what I've done wrong or give me some help with further debugging.
(Note: This is still a development project, so TLS is not enabled and the images have watermarks because I haven't licensed them yet. I know both things must be done before "production.")
A span won't take on line-height correctly due to how its display property works if it is inside a div with defined font-size or line-height css. You can either change your span to a div or, you can add display:block to your .line's css class to change the display behavior.
e.g.
.fine {font-size: 1rem; line-height: 1.1; display:block;}
I have been searching for an answer for this for an hour now with no luck.
I am centering text vertically inside the box using the "line-height" CSS property. This is working fine with standard safe fonts and also works fine for ""#font-face"" font embedding on Windows.
On the Mac however, there is a problem with this centering using "#font-face". See: http://cl.ly/QBlE/o
I don't know what to do with this. The only way to fix this to use different line-height for Mac. But as far as I know this is not possible without JavaScript or server side programming and does not seem to be the proper solution for me.
Example (blue box at the top):
#header .login {
text-decoration:none;
margin:11px 9px 0 9px;
float:right;
font-size:11px;
color:#fff;
background:url(../img/header-login.png);
width:118px;
height:26px;
line-height:26px;
padding:0 0 0 10px;
text-transform:uppercase;
font-family: 'Helvetica55', Sans-Serif;
}
Instead of using different line heights, try using the font-size-adjust property with a value of auto.
From the W3C:
In situations where font fallback occurs, fallback fonts may not share the same aspect ratio as the desired font family and will thus appear less readable. The font-size-adjust property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.
First, try setting the line-height from px to em.
If that doesn't work, then it could be caused by default styles that are different for each browser. Those default styles could be messing with your styles. So try to use a reset.css in your page.
The problem most probably lies in the used font. Each font has its own metrics and when not optimized properly they can differ from one platform to another. See http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ for a better explanation of this.
You could try to alter the font yourself using a tool like http://fontforge.org/. This isn't easy though and takes some trial and error to get it right. It may also violate the license of the font you're using.
My advice: choose a font that is better optimized for use on the web. Take any font from Typekit or the like and i bet you get more consistent results.
Perhaps 'vertical-align:' may help,
please check this fiddle
this will explain the difference, I think every browser have different default value,
here I have created 4 different span tag to show the top, middle, bottom, and default(unassigned) value of the vertical align value,
Please change values if that helps,
as you are using images in the button, please verify the image are set with 0 0
i.e background:url(../img/header-login.png) no-repeat 0 0;
this will render the image from the 0 left and 0 top that will help you idnetify if and image is not properly generated..
Please reply if problem not solved..
From my experience for multi browser and multi platform websites you should really drop the pixels in fonts and start using ems.
Here's a useful convertion table tool:
http://pxtoem.com/
Let me know if it still happens using em. Keep in mind also that different fonts have different behaviors and the default (base) size may differ too. If you want to make sure it is exactly the same size, appart from using 'em' you should also use an openType font and embbed it into your CSS, having exactly the same font and size in any screen or browser.
Operating systems may render fonts different ways. One can start from bottom and other can start from top as their algorithm different. If the problem was CSS, it wouldn't be resolved by another type of font.
I found another question similiar to your one, you can check if it works for your situation:
Mac vs. Windows Browser Font Height Rendering Issue
I have a page that is an online version of an energy newsletter, and each story is separated by a <hr>. I just noticed today that one of them is rendering at 680px x 2px instead of 680 x 1px.
Having inspected the element I see the height comes from this css entry: "height: 0.1em;" and was wondering why the browser seems to think a different thickness is needed for this one and not the others? (I know it's not majorly important but it's just bugging me and someone must know!)
This is the page: http://utilitiessavings.co.uk/utilities-insider-issue-10-january-2013/
Thanks
An em is not an absolute unit of measure. It is proportional to your font size. Chances are, the two different <hr> tags are inheriting different font-sizes and are therefore calculating 0.1em differently.
Reference: http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/
As Eipark has suggested you are using em rather than pixels to format your HR bars.
Really simple fix would be
With Style.css look for line 67 hr { and change the follow below code from, too
From This
height: 0.1em;
To This
height:1px;
IE 9 on Hover over a link, pushes some of the HTML down the page.
When i remove the color from
td.subarea > h2 > a:hover { color: #aa051a; text-decoration: none;}
the problem does not occur.
I can't paste all the code here, and fairly sure its a unique problem to this page.
But maybe someone out there has seen something similar.
Its not moving the Link(a tag) down the page, its the whole containing table that moves.
This problem seems to occur in IE9 when the container element is set to overflow: auto and there is some hover action taking place in the child element.
There is a very simple solution of adding min-height: 0px to the container element, which works.
The detailed explanation of the bug and this solution can be found in this link:
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
Make sure your line-height and font-size properties are the same for normal and hover.
Sort of found the problem, well makes the table stop moving. margin-top:-20px.
Although it olny shifted down about 10px.
Probably some IE9 rendering issue. IE7/8 actually move the table on intial loading.
The font sizes, line-heights, all that css, is all good for the link.
Marc B is probably close to the issue of IE rendering something wrong and cauing floats and such to mess up.
Now have to real style a table layout wihtin a table layout page(ugh, hate table layout).
For me I had to specify
height:100%;
Then I had to go ahead and specify
width:100%;
The 'min-height: 0px' by mohitp above got me on the right track.
i am using this css.
.text_style3{
font:normal 8px Helvetica;
color:#f7922c;
}
i want to it more small but after 10px this is not working. i have used 7px, 6px, 5px etc. but this is not working.
so how can i decrease size. this css is not working in mozilla.
That is a rule specified by the browser, usually 10px is the minimum font size allowed in a default Firefox installation.
Try it by going to Preferences -> Content -> Fonts & Colors -> Advanced -> Minimum font size.
Any font size smaller than 10px will be almost non-readable. The rule is there to ensure better accessibility.
Hope that helps.
You most likely have a CSS Specificity issue, where another style is overriding the style you were expeceting to see.
You can use tools like Firebug for Firefox to see what style the browser is using and where in your code it has come from.
You may need to make your font size declaration more specific, by changing the selector, or even methods like using the !important operator or making the style inline in your HTML.
See these links for more information on ways to handle this:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html
are you sure you arent resetting text_style3 after this to have a normal style? it may be that you are styling div p or span (or any other containing tag) after you do this one.
if you are not, break the font style down to the following:
.text_style3{
font-weight:normal;
font-size: 8px;
font-family: Helvetica;
color:#f7922c;
}
You have some really good answers here, and they are probably correct (min-font size, use !important to override other CSS). I would add to try to use em's, once you get use to them, they seem to work alot better than straight px, and they resize better (my opinion) for users who need to increase the font size for readability.
Also worth noting is that Cascading Style Sheets are just that: Cascading
Levels:
stylesheet
style tag in file
style in code
1 will be overwritten by definitions in 2.
Both 1 and 2 will be overwritten by definitions in 3.
The closer the CSS is to the actuall item/text being displaied, the more important it is.
As Mauro wrote, if the tag you are doing class="text_style3" on has some other definition of text size this may also affect the display.
It may be that you have a minimum font size set in your browser, check Tools > Options > Content and choose Advanced in the fonts and colours section and change the minimum font size to None.
It is likely your minimum font size is set to 10px (smaller sizes are unreadable)