<a name> tag problem in IE

[colweb]

I have a strange thing with some <a name> tags when the page is accessed by IE. The tag is just before a <h2> and works in Firefox. In IE (6 and 7) the page scrolls just a bit to high, meaning, the <h2> is just out of the window.
In Firefox you can see the text "Overhere", in IE you can only see the bottom half of this text, and the first line you can actually read is "something..."

Below the css for the h2 and the way it's put in the html page:

h2 
	{font-weight:normal;
	font-size:1.7em;
	height:40px;
	margin-left:-19px;
	padding-left:10px;
	padding-top:32px;
	display:block;
	background:url(/images/boxh.gif) no-repeat;
	color:#800080;}

<a name="overhere"></a>
<h2>Overhere</h2>
<p>something about overhere...</p>

Anybody know how to keep the h2 inside the window in IE?

[MidiMagic]

h2 
	{font-weight:normal;
	font-size:1.7em;
	height:40px;
	margin-left:-19px;
	padding-left:10px;
	padding-top:32px;
	display:block;
	background:url(/images/boxh.gif) no-repeat;
	color:#800080;}

<a name="overhere"></a>
<h2>Overhere</h2>
<p>something about overhere...</p>

I think your code and styles are confusing it. You have several things that each can force the top of the line off the page:

- The A tag is empty. That makes it render very small at the bottom of the line of text, if it renders at all. Put the a tags inside the h2 tags and the contents between the a tags. I think this is it.

<h2><a name="overhere">Overhere</a></h2>
<p>something about overhere...</p>

Empty tag pairs cause all kinds of rendering trouble--never leave tag pairs empty. If you absolutely must have an empty tag pair, put a nonbreaking space between them.

- I often have trouble getting IE to correctly render h# tags when relative font size (em) measures are used.

- The font size of 1.7em and the height of 40px may be placing two different constraints on the same item that different browsers react to in different ways, especially under different screen resolutions.

- Negative surrounding styles are also not defined by the W3C, and can make quite a mess. Never use them.

- Try defining your padding in units other than px (try em instead).

If none of these work, one thought is to attach the anchor tag to something small in a line above the title (maybe an hr tag, a nonbreaking space, or a line of ----- in a small font above the title).

[colweb]

MidiMagic,

Well, it seems the only way to solve this is adding &nbsp; in the <a name> tag. Have tried a lot of things, but IE ignores most of them. (padding, margin etc).

Negative surrounding styles are also not defined by the W3C

There is a reason to have a negative left margin. The <h2> is inside a div that's inside a div and that's inside a div. As you can see in the css definition the <h2> also has a backrgound image. It's used to make a div with rounded borders and have the <h2> spring out at the left side but without breaking the border.

The final page validates without any error at http://validator.w3.org/check as XHTML 1.0 Strict!

Negative surrounding styles may not be defined by the W3C, they don't find see it as an error. And as far as different screen resolutions may make a mess of things, I have tested the page from 640*480 up to 1600*1200 and anything in between. No problems.

[MidiMagic]

What happened when you did this?

<h2><a name="overhere">Overhere</a></h2>
<p>something about overhere...</p>

This is actually the most correct way to do it.