Different Browsers = Different Title Positioning

First place to start for questions like this is validation:

https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fveggyplease.com.%2F

Ok thanx so much, adam. I’ll look at that.

Erm, fixed the errors. The irregularity still shows ?? Here’s a picture showing the bit: https://www.veggyplease.com/images/comparison.png

The header has extra margin on the top in the IE browser.

I was looking around, and found a conditional comment <!–[if IE]> that supposedly affect changes in IE browsers only. Could I use that somehow to alter the header top-margin/padding?

I think that it might be possible with javascript as well, but I’m not familiar with javascript at all. Is there anyone here who is?

css will do what you need. Use the IE conditional comment to change the header h2 and make the padding negative more than it is now.
It’s probably one of the infamous ie bugs.
Don’t use javascript, this is exactly what the conditional comments are for!
It would be a good idea to view in ie 6 and ie 7. If ie 7 doesn’t have the error, change the conditional comment for this to versions under 7.

Thanx csleh. I found this problem with my IE7. I don’t have older versions of IE. Anyway, I had to try many variations before I finally got it to work. Here’s the modifications I did:

<!--[if IE]>
		<style type="text/css">
		.iename {margin: -20px 0px 0px 0px; padding: 0px 0px 0px 0px;}
		.iedesc {margin: -25px 0px 25px 0px; padding: 0px 0px 0px 0px;}
		</style>
		<![endif]-->
		<div class="iename">
		<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		</div>
		<div class="iedesc">
		<h2><?php bloginfo('description'); ?></h2>
		</div>

Adam and Csleh: Thanks for your help!

For those who are encountering the same problem, you might find the following numbers useful. I tried to get them to match as close as possible and these are the figures I ended up with:

<!--[if IE]>
<style type="text/css">
.iename {margin: -18px 0px 0px 0px;
padding: 0px 0px 0px 0px;}
.iedesc {margin: -28px 0px 28px 0px;
padding: 0px 0px 0px 0px;}
</style>
<![endif]-->
<div class="iename">
<h1><a>/"><?php bloginfo('name'); ?></a></h1>
</div>
<div class="iedesc">
<h2><?php bloginfo('description'); ?></h2>
</div>

And this is an image for comparison: https://www.veggyplease.com/images/comparison2.JPG