IE 7 need help

[Girard Ibanez]

http://team-raptor.net/myraptor/r50v2/raptor_50v2_aileron_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 .... :eek:

[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


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

[jscheuer1]

I noticed that. That is governed by the actual spot in the HTML code where the named anchor link is located. You could try moving it higher:


<div id="subtitle">Raptor 50 V2 </div>
<a name="equal_throw_method_page" id="equal_throw_method_page"></a>
<h1>Equal Throw Method </h1>

It could also go in the div, or even above it:


<a name="equal_throw_method_page" id="equal_throw_method_page"></a>
<div id="subtitle">Raptor 50 V2 </div>

<h1>Equal Throw Method </h1>

It is not, unfortunately, an exact science. Most likely, you will find a spot for it that works well (if not identically) in all browsers.

[Girard Ibanez]

Yes placing the name anchors in the html solves that problem.

My biggest problem in using the [position: relative;] to fix my problems is that it alters my wysiwug in Dream Weaver 8 design page.

:rolleyes:

After all that work, fixing one issue creates another issue. When does it end .... M$IE ...

[jscheuer1]

I wouldn't worry about how anything looks in Design View in any program as long as it looks OK in your target browsers. As for any specific style for IE messing up anything else, it can always be put in a separate section shielded from other programs and browsers (in the head of a page after the other style links and/or declarations):


<!--[if IE]>
<style type="text/css">
IE specific rules go here
</style>
<![endif]-->

This is also possible:


<!--[if IE]>
<link href="ie_styles.css" rel="stylesheet" type="text/css">
<![endif]-->

as is targeting specific IE versions if necessary.

[Girard Ibanez]

John,

I like these specific IE "IF" statements. I placed them on every html page in the inside the <head> </head> ... correct ...



<head>
<!--[if IE]>
<style type="text/css">
#rcontent h2 {
position:relative;
z-index:1;
background-color:transparent;
}
</style>
<![endif]-->
</head>


So the last and final issue are the drop down menu in IE 7. When I click on a hyper link or picture then go up and click or hover on the horiz drop down menu, the drop down menus stay down. Clicking on all the drop down menus will soon reveal every drop down menu in the navigation.

Refreshing the page forces the menu to retract.

[boxxertrumps]

IE7 doesn't Support Xhtml, Which is What the page is written as.
Might Be The Problem.

[jscheuer1]

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

This is as regards the pop up window script, the credit is in the external file but the usage terms require it to be on the page:


<script type="text/javascript" language="JavaScript" src="popup.js">

/****************************************************
Author: Eric King
Url: http://redrival.com/eak/index.shtml
This script is free to use as long as this info is left in
Featured on Dynamic Drive script library (http://www.dynamicdrive.com)
****************************************************/

</script>

Now, about your menu - where did you get it? I see that it has an IE specific fix for the fact that IE prior to 7 did not recognize the :hover pseudo class on elements other than linked anchors. This is the script nav.js. However, removing it doesn't fix the problem in IE 7 as I had hoped. I'd suggest going back to the menu's author or distributor to ask about this problem in IE 7. Unfortunately, this might not be specific to the menu and, at the moment I cannot see why clicking on the page (turns out the problem comes if you click anywhere on the page) would change anything. I can find no window.onclick or document.onclick event or any onselectstart onmousedown or onmouseup that could be affecting this. Do you know of any I'm missing?

[Girard Ibanez]

This is as regards the pop up window script, the credit is in the external file but the usage terms require it to be on the page:


Yes you are correct and I will correct the problem. I will update the author's credit to all the pages vice the location of the author's script in the external files.

As for the nav.js script it came from the following sites. It works in IE 6 just not IE 7.

Url: http://alistapart.com/articles/dropdowns
Url: http://www.htmldog.com/articles/suckerfish/



I can find no window.onclick or document.onclick event or any onselectstart onmousedown or onmouseup that could be affecting this. Do you know of any I'm missing?

If I remove the nav.js script, the drop downs will not work in IE. So the script is needed for the drop downs to work.

No ..

[jscheuer1]

Those events I was talking about would be coming from other scripts or on the page itself, not the nav.js. IE 7 should be able to do the menu without the nav.js - I don't see why it doesn't. If it could be made to work without nav.js, it could be shielded from it by a version specific comment. That is why I would want you or someone to contact the author about this. I'll have a look at those links. There are, I believe, other similar menus that will work in IE 7 without any javascript help.

[Girard Ibanez]

Well I went back to this site:

Url: http://www.htmldog.com/articles/suckerfish/

and the same problem with the script that I am having. Only thing is that its only happening to one of the examples. The rest of the other examples are working ok.

[Girard Ibanez]

I think I found my problem, didn't have this in my css style sheet.



#mainnav li:hover, li.sfhover {
display: block;
}

Thanks John for all your help.