Help - Search - Members - Calendar
Full Version: Anchor problem.
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
MickeyG
I'm working on a page that will have a lot of individual articles that I want to create anchors and links for. I'm having a weird problem with the page reloading in an odd format when one of the links is clicked on.

http://www.mickeygriffith.com/powerfit/articles.shtml

If you click on the article numbered "6" you should see the result I'm talking about. My suspicion is that it has something to do with using the shtml extension, but what do I know. smile.gif That's why I'm here.

Any help is surely appreciated. Thanks in advance.
pandy
Oh dear. ohmy.gif I've never seen anything like that before. Where does everything go? It seems to happen only in FF too. IE and Opera are fine.

You have some validation errors.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
Most are because you declare that you use XHTML, but you don't. Change to a HTML doctype and those errors will go away.

The othere errors are of this type.
CODE

Line 120, character 23:
  <h2><a name="1" id="1"></a>Low Tech - High Effect</h2>
                      ^Error: value of attribute id must start with a letter, not 1



"ID and NAME tokens must begin with a letter ([A-Z a-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). "
http://www.w3.org/TR/html401/types.html#h-6.2

This is a longshot, very long, but start with correcting those name and id values. As said, I've never seen something like this, but I have seen "numbered" anchors make other odd stuff happen.
MickeyG
QUOTE(pandy @ Oct 25 2008, 05:07 PM) *

Oh dear. ohmy.gif I've never seen anything like that before. Where does everything go? It seems to happen only in FF too. IE and Opera are fine.

You have some validation errors.
http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
Most are because you declare that you use XHTML, but you don't. Change to a HTML doctype and those errors will go away.

The othere errors are of this type.
CODE

Line 120, character 23:
  <h2><a name="1" id="1"></a>Low Tech - High Effect</h2>
                      ^Error: value of attribute id must start with a letter, not 1



"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). "
http://www.w3.org/TR/html401/types.html#h-6.2

This is a longshot, very long, but start with correction those name and id values. As said, I've never seen something like this, but I have seen "numbered" anchors make other odd stuff happen.



Hey Pandy, thanks for the note. I've fixed all of the IDs by adding an "a" to the beginning of the name, but it doesn't seem to fix the problem. That's some weird activity, isn't it? Any other ideas? I also changed my doc type to HTML instead of XHTML. Here is the updated page.

http://www.mickeygriffith.com/powerfit/articles.shtml

I'm using a Mac with Firefox and the problem is also consistent on another computer using IE7 with Windows XP Professional.

Again, thanks for the help.
pandy
Haven't got the foggiest, I'm afraid. I'll look again, but don't get your hopes up.

QUOTE

I'm using a Mac with Firefox and the problem is also consistent on another computer using IE7 with Windows XP Professional.


OK. I have IE6. So it's old IE and Opera on one side and FF and IE7 on the other. unsure.gif
pandy
Taa-taa! cool.gif

It's this.
CODE
#content-container { overflow: hidden }


Change it to 'visible' and everything will work - but look hideous. tongue.gif

I don't follow everything here. I assume the above is connected with the 'padding-bottom: 30000px; margin-bottom: -30000px' you use in two places. What is all this doing?
MickeyG
QUOTE(pandy @ Oct 25 2008, 06:41 PM) *

Taa-taa! cool.gif

It's this.
CODE
#content-container { overflow: hidden }


Change it to 'visible' and everything will work - but look hideous. tongue.gif

I don't follow everything here. I assume the above is connected with the 'padding-bottom: 30000px; margin-bottom: -30000px' you use in two places. What is all this doing?


Haha, well, you're right about the hideous part. I guess I could have told you that I know I'm not the end all beat all of HTML and CSS. I'm pretty sure that the 30000 margin and padding was the only way I found to make the left column always extend to the length of whatever the right margin is. I know this sort of automatic resizing is handled more easily than I have made it, but I'm still not sure how to do it. If you can help me out with out to make that column auto expand as the content on the right side lengthens, that would be great. I'm sure the 30,000 thing was something I found in a tutorial somewhere. Probably just a poor tutorial.

Any help on that? Got a good tutorial on automatically making those divs match up in length?
MickeyG
I should add that I've made some more changes today. Here is the latest page.

http://www.mickeygriffith.com/powerfit/about.shtml

Oh, and the actual anchor problem isn't the problem anymore. You, of course, were right about the overflow. I'm having issues with the columns extending to fill the space. So any help would be appreciated.

Also, I used this tutorial for the idea for how it looks right now. That is to say that I am using a background image for the columns and then I'm trying to place the two divs over it.

http://www.ozzu.com/html-tutorials/tutoria...art-t85731.html

Thanks again for the previous help and any to come.

Mickey
pandy
QUOTE(MickeyG @ Nov 16 2008, 07:49 PM) *

I'm pretty sure that the 30000 margin and padding was the only way I found to make the left column always extend to the length of whatever the right margin is.


The easiest way may be to fake it.
http://www.alistapart.com/articles/fauxcolumns/
MickeyG
QUOTE(pandy @ Nov 16 2008, 04:51 PM) *

QUOTE(MickeyG @ Nov 16 2008, 07:49 PM) *

I'm pretty sure that the 30000 margin and padding was the only way I found to make the left column always extend to the length of whatever the right margin is.


The easiest way may be to fake it.
http://www.alistapart.com/articles/fauxcolumns/



Hey Pandy,

Thanks for the help. I'm still having some issues with this. I've got the faux columns done with an image like the article suggested, but I'm having a placement problem with my columns. I think it has to do with positioning, but essentially the menu column is staying on the left and the content is on the right, but it is jumping down the page out of the way of the menu when viewed in Explorer. As if there was an invisible box that extended from the menu all the way to the right and was pushing the content down. I hope that makes sense. Here is the link again.

http://www.mickeygriffith.com/powerfit/trainers.shtml

Thanks for all your help so far. I'm really hoping to get this page done so I can get all the content rolling. I've got to get this site up. rolleyes.gif biggrin.gif

pandy
In the rule for #content remove width altogether and replace padding-left with margin-left.

CODE
#content  {
    /* width: 575px; */
    /* padding-left: 200px; */
    margin-left: 200px;
    /* and so on... */
}
}
MickeyG
QUOTE(pandy @ Nov 29 2008, 10:59 PM) *

In the rule for #content remove width altogether and replace padding-left with margin-left.

CODE
#content  {
    /* width: 575px; */
    /* padding-left: 200px; */
    margin-left: 200px;
    /* and so on... */
}
}



Hey Pandy, thanks again. I finally have the bulk of it behaving correctly. Just have weird things happening at the bottom of some of the main pages now. It seems intermittent, but I could just be missing a detail. Like I have all along. smile.gif If you'd still care to take another look, I'd still appreciate it. smile.gif

http://www.mickeygriffith.com/powerfit/
Frederiek
In your homepage, you have a lot of </br>'s in the code after the footer div, which cause the page-container div to unnecessarily increase in height.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.