“next” link cuts off “previous”

[RobertoStephenson]

Hi everyone!

On my web photo gallery, as I assign the "go to next page" link, I mysteriously loose the "go to previous page" link. This happens to "footer" links only. In this example ( http://robertostephenson.com/samp/04.html ) both links work, while in the two other pages (http://robertostephenson.com/samp/03.html and page http://robertostephenson.com/samp/02b.html ), where links are set as footers, the left link is broken.

If anyone want to get a closer look, here is a link to download the sample files: http://robertostephenson.com/samp.zip

 

Thank you!

[COBOLdinosaur]

When you put part of the markup outside of the body, you should probably not expect them to act like they are part of the page in all browsers. I suggest you use a valid structure as a starting point. There is no point trying to debug code when such obvious errors exist.

[RobertoStephenson]

Cobol, of course you're right. If I stay put, nothing will ever happen. The thing is that this is the only way I found to keep links at the same place without having to move up and down according to photos height. So, I'd rather go where the path is dangerous and see if I anyone can help. Eventually I'll go back on the safe side.

[COBOLdinosaur]

Let me see if I understand this. You wrote smoe code that didn't work the way you wanted it to so instead of fixing it and finding what was causing the problem you decided to try hacking away with an invalid structure that also does not work so now you are looking for a way to get the hack to work instead of looking for a solution for the valid code that does not work.

 

This is a strange planet.

[dsonesuk]

You need NOT to create your own unique html elements, but rename footer_* to valid html element (div), which use there own default styling (block, inline, margins, padding), and give these unique id ref instead.

 

Both these elements occupy the same area, and the latter has precedence.

 

Use width: 50% (maybe less), for left then use left:0; with NO right: property, and for the right use right:0; and you guessed it with no left: property, they should not overlap now and links are now accessible.