SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question <a href="some_id"> not working properly in IE.

    Hi All,

    I made a simple html file that serves as a help document for some web application. It starts with an index of the content. I made it with some nested lists. All seems fine in Firefox, but in IE the links of the deepest level nested lists don't work.

    These are snippets of relevant code:

    HTML (4.01 strict) of the index:
    HTML Code:
        <ol id="inhoudsopgave">
          <li><a href="#hfdstk1" title="Ga naar hoofdstuk 1">Inleiding</a>
            <ol>
              <li><a href="#paragr1-A" title="Ga naar paragraaf 1.A">Wat kunt u met de SynGeoviewer doen?</a></li>
            </ol>
          </li>
          <li><a href="#hfdstk2" title="Ga naar hoofdstuk 2">Functionaliteit</a>
            <ol>
              <li><a href="#paragr2-A" title="Ga naar paragraaf 2.A">Opstartscherm</a></li>
              <li><a href="#paragr2-B" title="Ga naar paragraaf 2.B">Indeling van de SynGeoviewer</a></li>
              <li><a href="#paragr2-C" title="Ga naar paragraaf 2.C">Kaartnavigatie en objectselectie</a>
                <ol>
                  <li><a href="#paragr2-C-1" title="Ga naar paragraaf 2.C.1">Inzoomfunctie</a></li>
                  <li><a href="#paragr2-C-2" title="Ga naar paragraaf 2.C.2">Uitzoomfunctie</a></li>
                  <li><a href="#paragr2-C-3" title="Ga naar paragraaf 2.C.3">Meetlintfunctie</a></li>
                  <li><a href="#paragr2-C-4" title="Ga naar paragraaf 2.C.4">Volledig kaartbeeld</a></li>
                  <li><a href="#paragr2-C-5" title="Ga naar paragraaf 2.C.5">Panningfunctie</a></li>
                  <li><a href="#paragr2-C-6" title="Ga naar paragraaf 2.C.6">Centreerfunctie</a></li>
                  <li><a href="#paragr2-C-7" title="Ga naar paragraaf 2.C.7">Attribuutinformatie</a></li>
                  <li><a href="#paragr2-C-8" title="Ga naar paragraaf 2.C.8">Selectie wissen</a></li>
                </ol>
              </li>
              <li><a href="#paragr2-D" title="Ga naar paragraaf 2.D">De werking van de datamanager</a>
                <ol>
                  <li><a href="#paragr2-D-1" title="Ga naar paragraaf 2.D.1">Geselecteerde objecten</a></li>
                  <li><a href="#paragr2-D-2" title="Ga naar paragraaf 2.D.2">Kaartlagenbeheer</a></li>
                  <li><a href="#paragr2-D-3" title="Ga naar paragraaf 2.D.3">Legenda bekijken</a></li>
                  <li><a href="#paragr2-D-4" title="Ga naar paragraaf 2.D.4">Adres zoeken</a></li>
                  <li><a href="#paragr2-D-5" title="Ga naar paragraaf 2.D.5">Afdrukken naar een bestand</a></li>
                  <li><a href="#paragr2-D-6" title="Ga naar paragraaf 2.D.6">Online helpbestand</a></li>
                </ol>
              </li>
            </ol>
          </li>
        </ol>
    HTML 4.01 of the chapters and pargraphs:
    HTML Code:
    <!--                  Paragraaf 2.D                  -->
    
        <h3 id="paragr2-D"><span>2.D </span>De werking van de datamanager</h3>
        <p>Some content</p>
        <p class="home"><a href="#home">Terug naar begin</a></p>
    
        <div class="text">
          <h4 id="paragr2-D-1"><span>2.D.1 </span>Geselecteerde objecten</h4>
          <p>Some more content</p>
          <img src="images/zoekresultaten.png"
            alt="Screenshot venster geselecteerde objecten">
        </div><!-- close div.text -->
        <p class="home"><a href="#home">Terug naar begin</a></p>
    Now, what I don't understand is that the deepest level, n.g. #paragr2-D-1 doesn't work in IE, but does work in Firefox.

    Can anyone explain? I'm confused. I would say there's nothing wrong with the code... I thought it might be the dashes in the ID, but removing them didn't improve anything.

    Best regards,
    Martijn.

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Might be a haslayout issue. Had something similar happen on my site.

    Have a look at this article to see if it's of any help. http://www.satzansatz.de/cssd/onhavinglayout.html

    Here's something slightly easier to understand! http://jimthatcher.com/news.htm#haslayout It may be that this isn't the solution as the problem I had and the one mentioned here is about "focus" and keyboard navigation - but it might be worth a go anyway just in case!
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks for the reply. I'm aware of the haslayout issues, but I didn't consider it as an option in this situation. After your suggestion I tried the Holly hack, but to no avail. Any other suggestions?

    I'm using rather simple CSS (see below), nothing fancy, so I don't understand what IE is fussing about. But I'm probably overlooking a browser quirck?

    Best regards,
    Martijn Senden.

    Code:
    /* ____________________________________________
    
         *, html and body - General settings
       ____________________________________________ */
    
    * {
      padding: 0;
      margin: 0; 
    }
    html {
      padding: 40px;
      font-size: 67.5%; /* Set the font size */
    }
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f0f0f0;
      color: #000;
      font-size: 1.6em;
      line-height: 1.9em;
    }
    
    /* ______________________________
    
                Typographical settings
       ______________________________ */
    
    /* Headers */
    h1, h2, h3, h4 {
      line-height: 1.9em;
      font-weight: normal;
      margin: 1em 0 1em 0;
    }
    h1 {
      font-weight: bold;
      font-size: 1.45em;
    }
    h2 {
      font-size: 1.1em;
    }
    h3 {
      font-size: .8em;
      font-weight: bold;
    }
    h4 {
      font-size: 1em;
      font-style: italic;
    }
    
    /* Links */
    a {
      text-decoration: none;
      color: #d30547;
      font-weight: bold;
      border-bottom: 1px solid #F2AFC1;
      background-color: #f0f0f0;
    }
    #nieuwvenster {
      display: block;
      color: #fff;
    }
    a:hover, #nieuwvenster:hover {
      border-bottom: 1px solid #d30547;
      color: #000;
      background-color: #fcfcfc;
    }
    .home {
      font-size: 0.7em;
    }
    
    /* Onderschriften */
    .figuurmetbijschrift p {
      font-size: .8em;
      margin-bottom: 0.75em;
    }
    
    
    /* ________________________
    
                         Lists
       ________________________ */
       
    ol li ol {
      list-style-type: upper-alpha;
    }
    ol li ol li ol {
      list-style-type: decimal;
    }
       
    
    /* ________________________
    
                   Layout
       ________________________ */
    
    h4 {
      min-height: 28px;
      padding-left: 34px;
      margin-left: -34px;
    }
    li {
      margin-left: 2em;
    }
    .belangrijk {
      background-color: #d30547;
    }
    #nieuwvenster {
      padding-right: 25px;
    }
    
    /* Hoofdstuk 2, paragraaf D */
    .text {
      width: 100%;
    }
    .text p {
      float: left;
      width: 60%;
    }
    .text img{
      padding-left: 20px;
      clear: both;
    }
    .home {
      clear: both;
      margin-bottom: 2em;
    }
    #fig1 {
      margin: 1em 0 -0.5em;
    }
    
    
    /* ________________________
    
              Background images
       ________________________ */
    
    #nieuwvenster {
      background: url(./../../../images/help_in_nieuw_venster.png) no-repeat right top;
    }
    
    /* Hoofdstuk 2, paragraaf C */
    #paragr2-C-1 {
      background: url(./../../../images/btn_zoomin.png) no-repeat left top;
    }
    #paragr2-C-2 {
      background: url(./../../../images/btn_zoomout.png) no-repeat left top;
    }
    #paragr2-C-3 {
      background: url(./../../../images/btn_meetlint.png) no-repeat left top;
    }
    #paragr2-C-4 {
      background: url(./../../../images/btn_volledig.png) no-repeat left top;
    }
    #paragr2-C-5 {
      background: url(./../../../images/btn_pan.png) no-repeat left top;
    }
    #paragr2-C-6 {
      background: url(./../../../images/btn_centreer.png) no-repeat left top;
    }
    #paragr2-C-7 {
      background: url(./../../../images/btn_selectiecirkel.png) no-repeat left top;
    }
    #paragr2-C-8 {
      background: url(./../../../images/btn_selectiewissen.png) no-repeat left top;
    }
    
    #paragr2-D-1 {
      background: url(./../../../images/btn_gegevens.png) no-repeat left top;
    }
    #paragr2-D-2 {
      background: url(./../../../images/btn_kaartlagenbeheer.png) no-repeat left top;
    }
    #paragr2-D-3 {
      background: url(./../../../images/btn_legenda.png) no-repeat left top;
    }
    #paragr2-D-4 {
      background: url(./../../../images/btn_adres_zoeken.png) no-repeat left top;
    }
    #paragr2-D-5 {
      background: url(./../../../images/btn_afdrukken_naar_bestand.png) no-repeat left top;
    }
    #paragr2D6 {
      background: url(./../../../images/btn_help.png) no-repeat left top;
    }

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and this is the IE-specific stylesheet:

    Code:
    /* ________________________
    
               Layout
       ________________________ */
    
    h4 {
      height: 2.8em; /* IE treats height as min-height */
    }
    
    /* Hoofdstuk 2, paragraaf D */
    .text img{
      float: right;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    I have found out that removing the ie-specific stylesheet resolves the problem. The error is in the height of the H4 tag. When I remove that line, the problem is solved, i.e. the links in the index then work. However, another problem arises then:

    The background images for the h4 titles don't show. This is a haslayout issue. I put a height: 1% value in the IE-specific sheet for the H4 elements. This solves the haslayout issues. I also had to give the h4 elements a position: relative and a z-index, so the background images would display properly next to the floated images that some of the paragraphs have.

    That almost works, but when I give any height to the h4 elements, IE somehow doesn't let me link to their id's anymore.

    What to do? Does anyone have a good suggestion? Should i add anchor tags? I thought I wouldn't need them because I could just link to the id's of the h4. It works for the other levels in the list, why not for these? And why does it work if I don't apply a height through css?

    Aaarrggghh. I just don't get it!

    Best regards,
    Martijn Senden.
    Last edited by Sendeman; Jun 30, 2006 at 07:09.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I still am having this problem. I am trying all I can do to solve it. I tried all sorts of ways to give the h4 tag layout in IE. All methods indeed give it layout, and the image at the left of the h4 appears the way it ought to. Invariably this leads to the links to the h4 tags in the index list (the deepest level nested list), to stop working in IE.

    What can I do about this? I can't find any ideas on the web on how links to elements with haslyout=true are treated.

    Anyone have a clue?

  7. #7
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give us a link to the actual site - it's much easier to try to work stuff out if you can actually see it "live" rather than working just with the code.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, Thanks for the reply. I've uploaded the site to:
    http://sendeman.freepgs.com/help/help.html

    I hope anyone can help me out with this. I really don't understand what IE's doing.

    Best regards,
    Martijn Senden.

  9. #9
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again.

    Ok got it working for me locally at least!

    It's definitely a Haslayout issue. To get round it, stick all those text sections into a div and then in your IE only stylesheet give that div a height of 1%.

    Now the internal links work in IE too.

    Here's a test page: Test Page
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks a lot for the efforts!

    I'm still having the same issues though. In your test page the background images on the h4 headers do not show up in IE. The same issue I had. I tried solving it by putting height: 1% on the h4 tag itself, which made the background image appear, but at the same time the link to the h4 tag stopped working. Your solution does let the links work in IE, but I'm afraid it makes the background images on the h4 tags disappear.

    I think I'll have to continue my search for a solution. It appears that I'll have to choose to have IE display the icons, or have IE show links that work. I really want both!

    Does anyone have an idea? What may be causing these issues?

    Best regards,
    Martijn Senden.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note: When using height=1% on the title tags (or on the added div in Tailslide's solution), IE does seem to process the links (clicking on the links changes the address bar). The page just doesn't move down to the h4 title.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Location
    Utrecht, The Netherlands
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All,

    This question is now repeated in the CSS Forum: it seems a more appropriate place, since the problem is related to the Holly Hack (height: 1%. I have still not solved the issues I have. My last posts about this problem can be found here.

    Thanks in advance for any help you can give!

    Best regards,
    Martijn Senden.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •