h1 tag Displays Different in IE

You’re using the default size for your #content h1’s. FF and IE render them differently since you don’t have the style defined in your CSS file. (IE likes to make them bigger)

You have the #header h1 in your CSS, but you will want to add ‘#content h1’ and or ‘#content h1 a’ as well. Once you add a font-size or whatnot to the #content h1 a in your CSS they will look the same in both browsers.

example:

#content h1 a {font-size: 19px;}

You can also adjust margin, padding, and line-height the same way.

Thanks for the quick response but I cannot get this to work. I entered in the above code into my css, I even modified it different ways and even deleted the #header h1 style, but still no joy.

Any other suggestions?

Thanks, S

Well I just looked and it’s h2 not h1 for your post titles.

You have a h2, etc generic 130% font-size in your /wp-content/themes/mts-journey/style.css

You could either try changing the % to something like 19px instead.

Or try adding #content h2 a {font-size: 19px !important;}

or

.post h2 a {font-size: 19px !important;}

and Don’t delete the #header h1, etc it doesn’t correspond to your post titles.

It’s not the post title that is giving me grief, it’s the header title. It is the correct size and position in FF but in IE it is larger and pushed to the right too far.

try some adjusting here;

div#header h1 a {
position: absolute;
top: 15px;
left: 51%;
font:oblique 160%/170% “Palatino Linotype”, swiss, serif;
color:#000000;

I believe 160% is font size where 170% is line height.

[EDIT] oops… sorry

I would also like to know how I can remove the underline from just the h1 tag.

I’m not positive, but I think adding “text-decoration: none;” might do it.

div#header h1 a {
position: absolute;
top: 15px;
left: 51%;
font:oblique 160%/170% “Palatino Linotype”, swiss, serif;
color:#000000;
text-decoration: none;

K, the text-decoration fixed the underline for the h1, thanks! but I still have the issue of the font and spacing between IE and Firefox. No matter what I change in the css file both browsers react differently to the same code. It seems as though IE doesn’t “perform” using the same dimensions as FF. Is there a way to code for 2 different browsers? (I.E) create code just for IE and different code for FF??

oh sorry I read to fast.

You can make another stylesheet to fix IE bugs if you must, using conditional tags. Put what’s below in your head. Can also google IE conditional comments and learn more.

<!–[if IE]>
<link href=”ieonly.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

For the font-size thing, I’d try using px instead of a %. IE’s default of 100% is 16px or whatever and FF is smaller. Which could be the case for your issue. Can also try specifying a top and bottom margin, because IE likes to use larger margins for h1, etc.