IE: Indentation breaks relative link

Web Design Forum

Convenient web based access to our favorite web design Usenet groups

Web Design > Web Design > Stylesheets > IE: Indentation breaks relative link

This is Interesting: Free Magazines for Graphics designers and webmasters

Last Thread Next Thread

Author

Thread

IE: Indentation breaks relative link

Aarono Brown

07-22-04 - 04:16 AM

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">
<!--
body {
margin-left: 5%;
}
h1{ margin-left: -5%; }
-->
</style>
</head>
<body>
<p>
<a href="#linky">Click me</a>
<!-- These breaks are just to put some vertical whitespace
in the page. -->
<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

[ Post Follow-Up to this message ]

Re: IE: Indentation breaks relative link

Els

07-22-04 - 04:16 AM

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

[ Post Follow-Up to this message ]

Re: IE: Indentation breaks relative link

Aarono Brown

07-22-04 - 05: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

[ Post Follow-Up to this message ]