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

Discussion in 'Web Design and Development' started by Doctor Q, Apr 7, 2006.

  1. Doctor Q Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #1
    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. :) :confused:

    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?
     
  2. atari1356 macrumors 68000

    atari1356

    Joined:
    Feb 27, 2004
    #2
    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)
     
  3. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #3
    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 :)
     
  4. Squareball macrumors regular

    Joined:
    Mar 16, 2004
    Location:
    Palo Alto, CA
    #4
    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
     
  5. Voidness macrumors 6502a

    Voidness

    Joined:
    Aug 2, 2005
    Location:
    Null
    #5
    Try this, works on a site i'm working on:

    Code:
    <a name="theend" id="theend">end of page</a>
     
  6. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #6
    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.
     
  7. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #7
    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. :(
     
  8. Voidness macrumors 6502a

    Voidness

    Joined:
    Aug 2, 2005
    Location:
    Null
    #8
    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?
     
  9. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #9
    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.
     

    Attached Files:

  10. Voidness macrumors 6502a

    Voidness

    Joined:
    Aug 2, 2005
    Location:
    Null
    #10
    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>
     
  11. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #11
    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.
     
  12. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #12
    Have you checked for formatting gremlins within your html document? Everything works fine for me in Safari using your code.
     
  13. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #13
    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.
     
  14. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #14
    here ya go
     

    Attached Files:

  15. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #15
    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.
     
  16. Voidness macrumors 6502a

    Voidness

    Joined:
    Aug 2, 2005
    Location:
    Null
    #16
    If nothing works, repair permissions :D

    But seriously, it could be something in your Safari settings.
     
  17. Doctor Q thread starter Administrator

    Doctor Q

    Staff Member

    Joined:
    Sep 19, 2002
    Location:
    Los Angeles
    #17
    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?
     
  18. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #18
    Works (er, fails to?) exactly as you describe in Safari/Camino for me. It's a bug!
     
  19. Voidness macrumors 6502a

    Voidness

    Joined:
    Aug 2, 2005
    Location:
    Null
    #19
    Yes, I did. I also noticed if you click the reload button, it doesn't reproduce. But if you hit enter in the address bar, it goes to the top of the page.

    Very strange, this could be reported to the Webkit people. http://webkit.opendarwin.org
     
  20. c-Row macrumors 65816

    c-Row

    Joined:
    Jan 10, 2006
    Location:
    Germany
    #20
    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.
     
  21. kgarner macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #21
    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.
     
  22. Voidness macrumors 6502a

    Voidness

    Joined:
    Aug 2, 2005
    Location:
    Null
    #22
    I tried doing that, didn't change anything. I'm guessing it's a bug in Safari.
     
  23. c-Row macrumors 65816

    c-Row

    Joined:
    Jan 10, 2006
    Location:
    Germany
    #23
    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.
     
  24. Voidness macrumors 6502a

    Voidness

    Joined:
    Aug 2, 2005
    Location:
    Null
    #24
    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.
     

Share This Page