IE 7 need help

[Girard Ibanez]

http://team-raptor.net/myraptor/r50v...n_linkage.html

The above URL works great in IE 6 and Fire Fox. Would like to find out why IE 7 causes the H2 Title in grey background highlight to disappear. My css has a class ID set to a negative margin so that I can highlight the H2 headings. In other words, I have the class id and the H2 stacked up. I tried to update the css with the z-index but that does not fix the problem.

Also, The H2 Heading INTRODUCTION will only appear if you run your mouse on the first @hover (hyperlink) and disappear on the second @hover (hyperlink).

Another issue is that once you click on a pic the above horizontal navigation will stay drop down. In fact, if you hover the mouse on the navigation menus, they will all stay in the drop down position.

I believe the issues are common to both problems as it seems that IE 7 does not refresh the page.


IE 7 ....

[jscheuer1]

Your page is complex so, rather than analyze why this is happening, I just took a guess at the solution and, unless this messes up something else that I cannot easily notice on the page, I got lucky:

#rcontent h2 {
 padding: 1.5em 0em 1.5em .5em;
 font-size: 1.1em;
 position:relative;
 z-index:1;
 background-color:transparent;
}

[Girard Ibanez]

Thanks jscheuer1 for assisting.

Yes the page is quite complex mainly due to my limited knowledge. The new code works.

Now all I need to do is view it in IE 6 at work.

[Girard Ibanez]

Adding the following to the css [background-color: transparent; position: relative; z-index: 1;] works with IE 7. In FF, the hyper link TOP does not work.

Any other suggestion to make the hyperlink function in FF.

    <h2>Understanding the &quot;Equal Throw Method&quot; <a name="understanding_equal_throw_method" id="understanding_equal_throw_method"></a></h2>
 
    <div class="tothetop">
      <p><a href="#equal_throw_method_page">TOP</a></p>
    </div>

#rcontent h2 {
 padding: 1.5em 0em 1.5em .5em;
 font-size: 1.1em;
 background-color: transparent;
 position: relative;
 z-index: 1;
}


.tothetop { /*Highlights the H2 headings*/
 font-size: 0.75em;
 color: #cccccc;
 background: #CCCCCC;
 margin: -4.2em -.85em 0em -.7em;
 padding-right: .5em; 
 text-align: right;
}
 
.tothetop a{
 text-decoration: none;
}

[jscheuer1]

Where's:

<a name="equal_throw_method_page"></a>

[Girard Ibanez]

Where's <a name="equal_throw_method_page"></a>

equal_throw_method_page is the <h1> title of the equal_throw_method.html page.

This is my name anchor so that at each <h2> sub heading title, I can click on TOP to bring the page to the top.


Girard

[jscheuer1]

It works here in IE 7, FF 1.5.0.9 and Opera 9.01. So, I don't see what the complaint is.

[Girard Ibanez]

John,

I just uploaded the css code to the following url:

http://team-raptor.net/myraptor/equal_throw_method.html

Click on the table of contents to get to Equal Throw Method
Click on TOP in the H2 heading on the right.
The TOP is hyper linked back to the H1 heading but the a:hover is not recognized in Fire Fox.

Uploaded code:

#rcontent h2 {
 padding: 1.5em 0em 1.5em .5em;
 font-size: 1.1em;
 position:relative;
 z-index:1;
 background-color:transparent;
}

Thanks again for your time and assistance.

Girard

[jscheuer1]

#rcontent a {
 position:relative;
 z-index:1;
 text-decoration: none;
 }

[Girard Ibanez]

John,

Both browser work with one exception.

IE 7 good

In FF, clicking on the TOP (to the top) brings the page back to the top but the href (h1 heading) is not visible.

For some reason this is what I get in FF. Here's the url to a screen shot of the problem.

http://www.team-raptor.net/myraptor/test.html