Member Avatar for 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?

  • 2 Contributors
  • 3 Replies
  • 106 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A few practical options that avoid fragile, browser-specific layout hacks and make fragment links reliable long-term.

As seen above, suggested attaching the anchor to the heading and found a nonbreaking space cured IE’s jump. Those fixes work for this specific markup. A cleaner, more maintainable approach is to make the heading itself the fragment target and then control how the browser positions it.

Use an id on the heading so the fragment points directly at the element:

<h2 id="overhere">Overhere</h2>

Modern browsers treat the element with the matching id as the fragment target (recommended). See the id usage notes on MDN for details (Global id attribute).

If the heading’s padding or decorative layout causes it to be hidden after the jump, use CSS to offset the scroll position instead of layout hacks. The scroll-margin-top property lets you add a top offset for fragment scrolling:

h2 { scroll-margin-top: 40px; }

(See scroll-margin-top on MDN.) Use :target temporarily to visualize the landing position while testing:

:target { outline: 2px dashed #c00; }

For very old browsers that don’t support scroll-margin-top, add a tiny JavaScript fallback that nudges the page after the browser performs the default fragment jump (listen for load and hashchange). The simple approach works reliably across browsers and keeps markup semantic. See the hashchange event notes for implementation ideas (hashchange event).

Quick troubleshooting: give the target element a visible outline while testing so you can see exactly where the browser considered the target, and confirm the page is rendering in standards mode (valid DOCTYPE) so older IE is less likely to behave inconsistently.

Recommended Answers

All 3 Replies

Member Avatar for 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).

Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.