Toggle sidebar Toggle sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

"#" doesn't work if I have a stylesheet

Doctor Q

Doctor Q

Administrator
Original poster
Staff member
I must be making some very simple mistake in my web page, but I can't tell what it is. 🙁

The URLgoes to my page. 🙂

I want the URLto go to the end of my page, but instead it goes to the top. 🙁

The h1 lines are there simply to make the page tall enough to test.

Here is file test.html:
Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>one</h1>
<h1>two</h1>
<h1>three</h1>
<h1>four</h1>
<h1>five</h1>
<h1>six</h1>
<h1>seven</h1>
<h1>eight</h1>
<h1>nine</h1>
<h1>ten</h1>
<h1>one</h1>
<h1>two</h1>
<h1>three</h1>
<h1>four</h1>
<h1>five</h1>
<h1>six</h1>
<h1>seven</h1>
<h1>eight</h1>
<h1>nine</h1>
<h1>ten</h1>
<a name="theend">the end of the page</a>
</body>
</html>
File test.css is empty, i.e., a zero byte disk file.

If I shrink the link line to read just this:
Code: 
<link rel="stylesheet" />
it still goes to the top of the page 🙁

But... if I remove the link line entirely then the web browser goes to the bottom of the page as intended. 🙂 😕

So what is the problem with the original page? Why can't I use a stylesheet and be able to position on the page from the URL?
 
In what web browser?

I tried it on Windows IE and Firefox and it works fine with the stylesheet call - the link goes to the end of the page. (I'm not near my Mac right now to test on that)
 
Yes, I should have mentioned that. The problem is specific to Safari.

Safari (2.0.3) for Mac OS (10.4.6): top of page 🙁
Firefox for Mac: bottom of page 🙂
Firefox for Windows: bottom of page 🙂
Internet Explorer for Windows: bottom of page 🙂
 
Not sure exactly. I'd have to look at it closer but a workaround is to remove the <link> and just do

<style type="text/css">
@import url("yourstylesheet.css");
</style>

Try this and see if it's still a problem. Just curious
 
The name attribute is being deprecated for this usage and should only be used for form elements (input etc). The id attribute is its replacement. People have noted having this problem with Safari before and it this replacement usually works.
 
Thanks for the ideas, everyone, but no luck so far.

The HTML 4.01 Specification says here that either name or id should work, but Safari is uncooperative whenever I use a stylesheet.

So I tried all these, but no combination worked if I also use <link rel="stylesheet" />, and they all work if I omit the link line.
Code: 
<a name="theend">the end of the page</a>
Code: 
<a id="theend">the end of the page</a>
Code: 
<a name="theend" id="theend">the end of the page</a>
Code: 
<h1 name="theend">the end of the page</h1>
Code: 
<h1 id="theend">the end of the page</h1>
Code: 
<h1 name="theend" id="theend">the end of the page</h1>

It also fails with a style section instead of the link line:
Code: 
<style type="text/css">
   @import url("test.css");
</style>
Interestingly, this works fine:
Code: 
<style type="text/css">
</style>
but that does me no good, since I need my stylesheet. (This is a sample of a collection of hundreds of pages that share the stylesheet.)

Summary: The problem happens when I include <link rel="stylesheet" /> (with or without its type and href attributes) or @import url("test.css");. In other words, whenever I reference a stylesheet, links to fragments fail. 🙁
 
That's very strange, I have it working here in Safari. I just copied your code and attached one of my style sheets instead (using the same syntax).

Can you post a screenshot of what you get in Safari?
 
Here is my current code:
Code: 
<html>
<head>
<link rel="stylesheet" />
</head>
<body>
Use this <a href="#theend">link</a> to go to the bottom of the page.
<h1>one</h1>
<h1>two</h1>
<h1>three</h1>
<h1>four</h1>
<h1>five</h1>
<h1>six</h1>
<h1>seven</h1>
<h1>eight</h1>
<h1>nine</h1>
<h1>ten</h1>
<h1>one</h1>
<h1>two</h1>
<h1>three</h1>
<h1>four</h1>
<h1>five</h1>
<h1>six</h1>
<h1>seven</h1>
<h1>eight</h1>
<h1>nine</h1>
<h1>ten</h1>
<a name="theend" id="theend">the end of the page</a>
</body>
</html>
Below is how it looks in Safari and Firefox.

The link I added in the 6th line works fine, scrolling from the top of the page to the bottom in either browser. But when I first come to this address Safari puts me at the top of the page.
 

Attachments

  • fragment-problem.png
    fragment-problem.png
    20.1 KB · Views: 232
I think I figured out the problem.

The < link > tag has to point to an existing style sheet. It seems that if it points to nothing, Safari gets angry 🙂 I got this code working:

Code: 
<html>
<head>
<link href="../assets/english/css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Use this <a href="#theend">link</a> to go to the bottom of the page.
<h1>one</h1>
<h1>two</h1>
<h1>three</h1>
<h1>four</h1>
<h1>five</h1>
<h1>six</h1>
<h1>seven</h1>
<h1>eight</h1>
<h1>nine</h1>
<h1>ten</h1>
<h1>one</h1>
<h1>two</h1>
<h1>three</h1>
<h1>four</h1>
<h1>five</h1>
<h1>six</h1>
<h1>seven</h1>
<h1>eight</h1>
<h1>nine</h1>
<h1>ten</h1>
<a name="theend" id="theend">the end of the page</a>
</body>
</html>
 
That's how I had it originally. I can't tell why it works for you but not for me.

I set it back to
Code: 
<link rel="stylesheet" type="text/css" href="http://myserver/test.css" />
but it still fails.

Just in case, I tried these too:
Code: 
<link rel="stylesheet" type="text/css" href="test.css" />
Code: 
<link rel="stylesheet" type="text/css" href="/test.css" />
I even stuck an h1 style in test.css and the h1 lines adopted that style, so I know it finds the stylesheet.
 
Have you checked for formatting gremlins within your html document? Everything works fine for me in Safari using your code.
 
If you don't mind, please post your test.html and test.css and I'll copy/paste them, rather than using my own. It feels like something trivial is going to fix this, but I can't see what it is.
 
Thanks. The only difference between yours and mine is the server it's running on, so I'm going to study the http headers that precede the html. Perhaps something in the header causes the web browser to act differently.
 
If nothing works, repair permissions 😀

But seriously, it could be something in your Safari settings.
 
mnkeybsness said:
here ya go
Click to expand...
Now I'm even more confused. Here's what I do and what happens:

  1. I drag your test.html into Firefox and into Safari.

    The URL is file:///Library/WebServer/Documents/test.html.

    The top of the page displays in both browsers. 🙂

  2. I add #theend to the end of the URL and press return.

    The URL is now file:///Library/WebServer/Documents/test.html#theend.

    The bottom of the page displays in both browsers. 🙂

  3. I click in the URL and press return again (or, equivalently, I click the reload icon).

    The URL is still file:///Library/WebServer/Documents/test.html#theend.

    The bottom of the page displays in Firefox. 🙂

    The top of the page displays in Safari! 🙁
Can anybody reproduce this behavior?
 
I can't confirm this 100% as I am at the office at the moment, but on our site, using both achnors and CSS works fine on Safari. Just visit www.klf.de/faq/ and choose one of the categories. On the following site, you should be able to quick-jump to the question you clicked on.

Maybe you want to have a look at our (horrible) source code.
 
Can't test it out for you right now as I am on my PC at work, but have you tried adding an appropriate doc-type? Safari might be pickier about having that than other browsers.
 
kgarner said:
Can't test it out for you right now as I am on my PC at work, but have you tried adding an appropriate doc-type? Safari might be pickier about having that than other browsers.
Click to expand...
I tried doing that, didn't change anything. I'm guessing it's a bug in Safari.
 
We don't use a doctype neither, but as I wrote before, jumping to anchors works fine here. Just checked it again. So, no bug in Safari.
 
c-Row said:
We don't use a doctype neither, but as I wrote before, jumping to anchors works fine here. Just checked it again. So, no bug in Safari.
Click to expand...
It works fine, sometimes. Here's what I came up with:

1- If you click on a link that jumps to an anchor, it works fine.
2- If you copy a URL that ends with the anchor name and paste it in the address bar, it also works fine. (for example: test.html#theend )
3- After getting it to work, pressing the reload button in Safari will still work fine.
4- Now, if you highlight the address bar and press enter to reload the page, it fails to work and goes to the top of the page. It also doesn't work if you select the address from Safari's auto-complete feature in the address bar.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back