position:fixed and named anchor problem in ie7

[zelda_pinwheel]

Hello,
i have looked on google and forums and i seem to have come up with a bug no-one has thought of yet (it's my special talent).

i made a template for a site (design not mine) using a banner + nav in position:fixed because it was the only way to acheive the nice rollover effect without making a menu in images, and i prefer a menu in html text.

because of that, i had to make some conditional comments for ie6 and 7, particularly so that the "content" div would not place itself at the top of the screen (behind the banner).

now everything is working perfectly, the code is valid (html and css), EXCEPT that in the faq page there are named anchors and when you click on them they jump to the top of the screen (behind the banner).

since i already saw this with the content div, it was not a big problem, i just added a padding-top:200px to the "a" tag inside a new "faq" div i created for this purpose. in firefox, it was perfect in 30 seconds. in ie6, does not apply since it doesn't understand position:fixed and scrolls everything anyway.

but ie7 refuses to understand, although 1. this solution worked on the "content" div which had this identical problem, and 2. when you click "back to top" the top of the page appears in the right place, not behind the banner, and it is also a named anchor.

i have tried a padding-top, a margin-top, a line-height (you never know), i added a width to my "faq" div to be sure it had layout, i tried making a class for the links instead of styling the "a" tag directly, and many other things which i have since forgotten (i have been searching for hours now).

the job is rather urgent because the client wants to launch tonight (!) and we still need to flow in the real content, so any help is really appreciated.

the page is online here :
http://audrey.keszek.free.fr/dartmouth/wiselywed/html/faq.htm

thank you in advance for any help you can offer ! i really have no more ideas (other than just forget it and say that for anyone who is still using ie, a little unnecessary scrolling is the least of their problems...).

[molendijk]

Does something like this solve the problem?:

<a href="javascript:void(0)" onclick=document.location.hash="marri";window.scrollTo(0,0)>marriage</a>

You can experiment with the values in 'scrollTo'.

Arie Molendijk.

[zelda_pinwheel]

Hello,
thank you for your suggestion. i am actually hoping to be able to fix this using css, because it works in ff and ie except 7 using css. if i use your code, i am afraid that the anchors will break if someone changes the size of the type (if i understand correctly, i specify a value in pixels in the scrollTo(0,0), like scrollTo(0,500) takes me 500 pixels lower in the page, but if someone has larger text maybe 500 is only halfway to the anchor).

Also, this code seems to act differently in ff, ie 6 and 7 ; 500 does not mean the same distance (no idea why) although it is pretty close in ff and ie6, so in fact i still have the same problem, only in javascript instead of css...

anyone else have any ideas ?

[jscheuer1]

You don't need any special treatment for IE 7 for this. The problem is that:


a {
padding-top:200px;
}

is meaningless because the a tag is an inline element. The fact that FF 'does it' is an error, if it were really applying that padding, there would be huge gaps in the layout. What you can do that will work for both, is:


#faq a {
padding-top:200px;
display:block;
}
#faq p {
margin-bottom:-200px;
}

By having the a tags display block, the padding will be applied and there will be gaps. By making the p tags have negative bottom margin, pulls the content below each of them back up into and filling those gaps.

You will also need to make:


#q {
z-index:100;
margin-bottom:-200px;
}

and:


/* content for non-ie */
body>#wrapper #content {
position:relative;
min-height:500px;
padding: 20px;
margin-top:200px;
z-index:10;
padding-bottom:200px;
}

A little tweaking may be necessary to get the exact layout in the faq area that you want due to subtle changes this may cause.

Note: Before trying this, make sure to get rid of both the IE 7 specific and the FF/other browser specific styles for the #faq a tags.

[zelda_pinwheel]

yay !! John, you're my css hero !

the only thing i had to tweak was to put the padding-bottom:200px; on the #faq div instead of the content one, so it did not get applied to every page. now it all works brilliantly, in ff, ie6 and ie7.

i feel a bit stupid ; i should have realized that i couldn't apply padding to an "a" tag, but i had just used that fix on the content div so it seemed the obvous solution... i did actually worry (for a fleeting second) that it would make 200px holes in the page but, well, then it didn't... so i didn't think about it any more.

thank you so much for your help !

[vincebowdren]

Zelda - did that solution work for you? I've found your finished site (wiselywed.com) and it looks like you changed your mind about using the position:fixed header in the end.

P.S. One solution I tried was to make the named anchors separate from the headers, then hide them and use position:relative on them with a negative top value, so they are positioned a good distance above their normal location. That works in FF and Opera, but IE (all versions) seems determined to link to the named anchor's normal location, not the position I've moved it to with position:relative. So that's a non-starter really.

Vince

[zelda_pinwheel]

hi vince, wow, your reply really took me back ! i had to visit the website to remind myself what it looked like...

the solution suggested by John *did* work, however, ultimately the client ended up changing their mind about other details (or maybe they didn't like the fixed header, to be honest i can't remember now !) and the fancy rollover effect on the nav links which is why i needed that to work was abandoned (*sigh*. it was so pretty. it changed the textured background from bordeaux colour to the yellow one, but the texture pattern matched since in fact it was the identical image stacked underneath, which became visible on rollover. hm, somewhat complicated to describe it...). to be honest i was a bit disappointed, since it was really a nice effect, but oh well. at least now i know how to do it if i want to use it in future. ;) and i did learn quite a lot in the process, so it wasn't wasted.

thank you for asking !