page layout destroyed due to IE9 fonts too large for <h2> - html

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.

Related

Vertical alignment of text using CSS when the font has annoying space above it

I recently purchased a couple of fonts for a website project and I've found that one in particular is not at all fun to work with. It's called Goodlife Sans and the problem I'm having results from a large amount of white space included above the font's characters i.e. the font takes up more vertical space than the glyphs themselves.
It's difficult to set vertical margins as I have to account for the extra space taken up by the font. Setting line-height: 1em helps a little, but the line height is measured from the very top of the font, meaning that if the text is set in a block element with overlow: hidden the bottoms of the letters are cropped off.
The following images show the height of the font by itself, and with the line-height hack. The background of the block element is coloured red for clarity.
http://i.stack.imgur.com/VAjKz.png
http://i.stack.imgur.com/ffL9l.png
Edit: Here's the code
#import url("//hello.myfonts.net/count/2e978a");
#font-face {
font-family: "GoodlifeSans";
src: url("fonts/2E978A_0_0.eot");
src: url("fonts/2E978A_0_0.eot?#iefix") format("embedded-opentype"),
url("fonts/2E978A_0_0.woff2") format("woff2"),
url("fonts/2E978A_0_0.woff") format("woff"),
url("fonts/2E978A_0_0.ttf") format("truetype");
}
p {
font-family: "Goodlifesans";
font-size: 344%;
background: red;
text-align: center;
/*line-height: 1em;*/
margin: 0;
padding: 0;
}
body {
margin: 10px;
font-size: 80%;
}
<body>
<p>This is the test title text</p>
</body>
Short of actually modifying the font itself (which I believe licencing prevents me from doing anyway) is there a elegant solution to this problem? I really don't want to have to include a parent element with negative margin every time I use this font.
In the end the guys at HDV Fonts sent me their copies of the font files which fixed the issue. The files from myfonts.com apparently contain strange vertical metrics, which explains what I was seeing.

Font size inconsistancy between browsers on mac

In the following example, it's a navigation bar. Its elements are variable in width, the sum of their width is the width of their container, ul element.
The issue is, each element has the same width on all windows browsers, the sum of their width is 379px. But on mac each browser seems to render the font slightly different, causing the width to either increase or decrease, thus the last element wrap to the second line.
<html>
<head>
<style>
body {margin:0;padding: 0;}
ul {margin:0;padding:0;list-style-type: none;}
.nav {
width:379px;
}
.nav li {
float: left;
margin: 5px;
padding: 20px;
background-color: #0099ff;
color: white;
font-family: Arial;
font-size: 16px;
}
</style>
</head>
<body>
<ul class="nav">
<li>asdf</li>
<li>qwer</li>
<li>test 1</li>
<li>testing test</li>
</ul>
</body>
</html>
The question is, how to guarantee each element's width on all browsers by just specifying the font size.
Setting a fixed-width div plus padding size is tricky when working with text. It's unlikely you'll be able to get a string to render exactly the same size on all major browsers and platforms. Though you can get pretty close; here are some suggestions.
Specify px values rather than pt or em. Such text will render at the same size regardless of device resolution, and will still scale properly when zooming in and out
Use a very common font, or a web font. You can use Font Squirrel to strip down a version of a specific font you'd like to use
Explicitly set the font-smoothing method
Use a computed CSS property to offset the letter-spacing by a fraction based on the amount the resulting div width differs from the target. This will be accurate, but also complex and less compatible
Use JavaScript to do the above calculation instead, resulting in more compatible code
Render some PNGs beforehand, or server-side at runtime
Here's some sample code illustrating one way to get a more consistent cross-platform Arial text render.
html, body {
font-family: Arial, sans-serif;
font-size: 13px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
First of all, validate your HTML. You have some issues there, like a missing DOCTYPE. I also recommend HTML5BOILERPLATE to get a lot of normalization done.
Next: why do you make the width dependant on the font size? Wouldn't it be better to make the font size static and set a certain static width to your elements?
If you are scared that this behaviour will lead to reading problems on small sceens (mobile devices), you should read about responsive layouts. They make use of media queries to use alternative CSS based on certain rules.
If you can't get it work, it would be fairly simple to load a .png of the text with a transparent background.

line-height working diffeerently for IE and chrome

When i m typing text in input, the text cursor is working differenlty in chrome. For IE, it is appearing in center with text but for chrome, it is taking entire textbox height even though my font-size is 16px. When i m reducing line-height, then text is starting from top in IE.
Below is the css which i am using:
.mainContent .searchBox .searchField .text
{float: left;width:507px ;height: 67px;
border:none;font-size: 16px;
font-family: verdana;color: #3F454F;
line-height: 4;}
Make sure your doc type is declared properly, if declared.
IE is iffy if the doc-type ain't correctly chosen.

How so I set an inline span to have the same height when containg text in both Chrome and Firefox?

I have the following style:
background-color: #C9C5BC;
color: #FFF;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
text-transform: uppercase;
cursor:pointer
the HTML element is
<span class="name-indicator">NameIndicator1</span>
IT looks like this is Firefox (desired)
and in Chrome it looks like this (wrong)
The problem is that in chrome there is no white space between the span elements and it is caused by the fact that in FF the height is 13px and in Chrome it's 15px, when setting the font size in chrome to 7px I achieved the right effect.
How can I fix this to be the same on both browsers? I want to keep the font-size to be 10px
EDIT:
I've created a fiddle please take a look at both FF and Chrome
I noticed that the codes in the stackoverflow answers look similar to your provided image (2nd one). If you put this CSS line-height: 21px on the container .wmd-preview p, then a separation appears between the codes. So your problem could be solved by adding line-height to the container of those span.
To have better chance of achieving same results across many browsers use css-reset at the beginning of your page. This little piece of css will make sure that all elements have same default values in all browsers. You can get one from here.

Windows 7 IE8 Font Size Issue with em

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.