When viewing my application thru Windows7 IE8, I noticed that the Font Size for H1 and H2 Tags are completely off and too large.
This causes the Titles to wrap and wrecking everything below it.
The Font Sizes are set to em and not px, and Im not sure if this is causing the issue.
font-size: 2.7em;
I have XP w/ IE8 and the application looks fine. I also checked this w/ MS Expression Superview, and it checked fine in all of the browsers.
http://www.davincispainting.com
In this ScreenShot the H1 & H2 Titles appear correct. However, if this is viewed with Windows7 IE8 there exists the problem.
Here are the Style Classes for H1 & H2 Tags:
#mid-feature h1 {
color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.7em;
}
#midlower-feature h2 {
color: #0C2A55;
font-family: Arial,Helvetica,sans-serif;
font-size: 2em;
/*text-align:center;*/
}
You may wish to include a CSS reset page before your CSS. The purpose of a reset is to get the default state of all elements into a consistent state for all browsers, so your particular CSS styling has a better chance of looking the same on each browser.
YUI has a reset you can use.
Related
I am using the free, open source font "Roboto".
Here is my code:
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
This code works great on my home page. It is thin and looks great.
But on my members area pages, it looks semi-bold.
I thought, perhaps it was because of the browser I was using (Google Chrome), but I debunked that idea because my homepage looks fine while using Google Chrome. Also, I haven't used any other browser.
Any tips on how to fix this issue?
Here is a screenshot to compare.
http://i.stack.imgur.com/XibIK.png
Here HTML code for "Username": (Note, all text on this page is boldish looking. Not just username. So it's not just this code.)
<div class='title'>Username</div>
Here HTML code for "Money doesn't buy happiness":
<h1 class="h1">Money doesn't buy happiness</h1>
As the people stated in the comments, a parent class is over-ruling the h1 and this results in bold text. I also see that you have a class h1 on the h1 element.
CSS
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
}
Or with !important to override the font-weight. Please note that !important will be helpful on classes that you always want to be same. For example on headings or buttons.
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100 !important;
}
I have a <textarea> inside the <body>. I have applied the following CSS rules:
body {
font-family: sans-serif;
font-size: 16px;
}
textarea {
font-family: monospace;
/* font-family: "Courier New", monospace; */
}
Here's what it looks like in Firefox 31.0:
You can see the result in this JSFiddle. By inspecting the <textarea> with Firebug we can see it does not inherit the <body>'s font-size, but sets it instead to 13px. (0.8em?)
However, if I uncomment the second font-family declaration, strange things happen.
Now the <textarea> seems to inherit <body>'s font-size, even though I didn't change it manually.
Finally, in both cases, Firebug shows that the font-size: 16px of <body> is overridden, even though I didn't find any browser stylesheets there that override it.
This does not seem to occur in Internet Explorer 11 or Chrome 34.
The problem is easily fixed by setting font-size: 0.8em to all <textarea>s, but the cause bothers me a bit.
What may be the cause of this? A bug in Firefox, possibly?
I have a odd issue on my "in-development" website here: http://www.cphrecmedia.dk/musikdk/stage/
The H1-h6 fonts are just "sans-serif", but often in Chrome it shows another font (screenshot: http://cl.ly/image/260B0H0l1w0C). When the mouse hover the navigation it changes to the right font. FYI this is how it should look like: http://cl.ly/image/442l071M3N1B
The code used for font is:
.nm li a {
float: left;
font-family: sans-serif;
height:22px;
padding: 12px 14px 7px 14px;
color:#white;
font-size: 12px;
line-height: 20px;
}
I mainly develop using Chrome, so I'm not sure if the issue is present in other browsers. Have anyone of you seen this issue before?
'sans-serif' is not a font name it's a font family specification.
Use a sans-serif font name like "Arial" or "Verdana" or else you will have unexpected results (the browser may replace your font with generic ones).
Try using custom font method by downloading the font and keeping it in your fonts folder.
Example:
#font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{ font-family:myFirstFont; }
Try using custom web font from google:
http://www.google.com/fonts
Select a font and uses one of the three metods, i prefer CSS method.
Example:
#import url(http://fonts.googleapis.com/css?family=Roboto);
Import this in CSS and use this for you text: font-family: 'Roboto', sans-serif;
I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com
I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?
The code from them that I have used so far is:
position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text
Using the CSS given I can get the same style as on iCloud website. (http://jsfiddle.net/LeBen/WznR5/)
After font-weight, the property that can slightly change the appearance of text on webkit browsers is -webkit-font-smoothing: antialiased;. If you don't use it, the browser fallback to the default smoothing mode (subpixel-antialiased) and result in a text looking bolder.
Are you sure you've included it in your tests and your browser apply it?
Try Avenir Ultra Light it's a thin font that looks similar to it
http://www.typophile.com/node/42590
The page layout is fine in all browsers but IE9.
We use a block-style layout on the page and a width of 660px, centered.
In keeping with the 660px max width, I set a width for h2 of 660px
which is fine in all browers except (surprise surprise) on IE9 the h2 font is HUGE and runs off the right
of the 660px layout by a huge amount.
Can I change the verbiage in the h2 to alleviate this (shorten the text)?
Nope. The verbiage on the page is not my purview -- someone else's job ('UE' gal).
This is my CSS:
h2 {
width: 660px;
}
That width of 660px is used in other divs on the page and provides a visually appealing 'block layout' on the page.
But on the landing page, the text inside of one of the h2 tags -- the h2 text is massively larger on IE9 so the 660px width is exceeded by the large IE9's h2 font size.
Here is an example of an offending line:
<h2 class="grayDecorative">Make your Relics visible on our site now! -- OurSite!</h2>
Here is the 'grayDecorative' style:
.grayDecorative
{
font-family: Arial, sans-serif;
background-image: url('images/chromishbg.gif');
background-repeat: repeat-x;
}
This style fills in the h2 with a visually appealing gradient background behind the text.
I'm thinking to solve this by having a 'conditional-for-IE9' that uses, say -- an h3 tag instead of the h2 tag -- but only on IE9.
How can I make the html conditional to use an h3 for IE?
I want to post the discovery I made that led to a solution.
I and others thought that using the following style should make the font size the same for the h2 tag's text on IE and FF et al:
h2
{
width: 660px;
font-size: 20px;
}
Setting the same font-size for the h2 tag should have done the trick. BUT IT DIDN'T.
For the same font-size: 20px above in the h2 tag, the IE text font was much bigger.
Well I got lucky when I noticed -- other text elements on the same page were the exact same size on FF and IE9.
But these tags were not h2 -- they were anchors mostly and a couple label tags.
The following text style generated text in the exact same size on IE9 and Firefox -- but note that
the tag below is not the h2 tags which is the one I was having text-sizing problems with:
.pageTopRowTextStyle
{
color:RGB(255,255,255);
text-decoration:none;
font-family: Arial, sans-serif;
font-size: 15px;
}
<a class="pageTopRowTextStyle" href="oursite.com">
This text size was the same in IE9 and FF</a>
Here's what I discovered. Mind you this is what we found with IE9.
You cannot reliable reconcile cross-browser text-size difference if the h2 tag is involved.
I didn't check the other header tags (h1, h3, h4, etc).
I'm assuming the same issue.
While using the font-size: 20px; setting for a style on h2 DOES make a difference -- say, if you increase to 25px or down to 15px -- you can see the font size changing on both IE9 and FF ---
-- the h2 tag is not responding in the same way to the font-size ??px across FF and IE9.
With the h2 tag -- a font-size:16px on IE9 is bigger the same font-size:16px for an h2 on Firefox.
That's not true with other tags though -- label and anchor tags render the same size on both browsers.
So we just shitcanned the h2 tag and we are now using a label tag in place of the h2 tag and now the font sizes on FF and IE9 are identical:
.h2XtraStyle
{
/*width: 660px; LABEL doesn't recognize 'width' so we used padding */
font-size: 20px;
}
Here is a cross-browser h2 tag -- looks the same on IE9 and FF
<br />
<label class="h2XtraStyle">Make your Relics visible on our site now! -- OurSite!
</i></label>
<br />
I don't really know why the h2 tag's font sizing is handled differently in IE9 but the workaround is not to use it at all.
Our solution is not very elegant but it did the job.