Stylesheets - IE: Indentation breaks relative link

Author

IE: Indentation breaks relative link

Aarono Brown

2004-07-21, 11:16 pm

In the following html page, I'm using a stylesheet to move
everything in the body over five percent, and then move the
h1 heading back over to the left margin. On IE 6 (W2K & 98)
the relative link (fragment identifier) only works if the
heading text is wider than five percent of the window size.
(In other words, change the lowercase letter "l" used below
into something longer -- or make the window sufficiently
narrow -- and it'll start working.)

Is this a known bug? Is there a workaround? (I'm just
trying to do basic indentation -- to have the headings at
the left margin, and have other stuff indented. My current
workaround is just to settle for an indentation narrow
enough that all my headings are wider than that
indentation.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=us-ascii" />
<title>Test</title>
<style type="text/css">

</style>
</head>
<body>
<p>
<a href="#linky">Click me</a>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</p>
<h1><a id="linky">l</a></h1>
</body>
</html>

Thanks,

--
Aaron Brown
arundelo @ hotmail.com

Els

2004-07-21, 11:16 pm

Aarono Brown wrote:

> In the following html page, I'm using a stylesheet to move
> everything in the body over five percent, and then move the
> h1 heading back over to the left margin. On IE 6 (W2K & 98)
> the relative link (fragment identifier) only works if the
> heading text is wider than five percent of the window size.

> Is this a known bug? Is there a workaround?

It works correctly in Firefox, but not in IE6 on WinXP.
I think it has to do with the negative margin. Not entirely
sure though.

Workaround could be this:

<style type="text/css">
body {
margin-left:0;
text-indent:5%;
}
h1{
text-indent: 0%;
}
</style>

But:
> <h1><a id="linky">l</a></h1>

Why don't you just write
<h1 id="linky">l</h1>
?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Kirsty MacColl - A New England

Aarono Brown

2004-07-22, 12:18 pm

Els wrote:

> It works correctly in Firefox, but not in IE6 on WinXP.

Yeah, I didn't mention it in the original post, but I tried
it successfully on Firefox as well.

> Why don't you just write
> <h1 id="linky">l</h1>
> ?

Good question -- I'm automatically generating the html where
I originally encountered the problem, and it uses the same
function to generate hyperlinks wherever they are. When I
edited it down to the sample code that I posted, it never
occured to me to get rid of the anchor tag.

> Workaround could be this:
>
> <style type="text/css">
> body {
> margin-left:0;
> text-indent:5%;
> }
> h1{
> text-indent: 0%;
> }
> </style>

This works, but when I apply it to the real page, I can't
get the tables (real tabular data) to indent correctly
(neither in IE nor in Firefox). (Also, the fact that,
unlike margins, indentation applies only to the first line
of a block isn't appropriate for what I'm doing.)

However, you put me on the right track. Instead of using
margin-left to skooch the whole body to the right and then
using it again on the headings I wanted on the left, I tried
just using margin-left just on the list of all tags that I
want skooched (and letting everything else default to the
left side):

p,h3,table { margin-left: 5%; }

The page is now, as far as I can tell, working perfectly in
both IE and Firefox.

Thanks a lot for the help,

--
Aaron Brown
arundelo @ hotmail.com