PDA

View Full Version : CSS menu scripts dont align in any version of IE



bytehd
12-19-2012, 03:35 AM
1) Script Title:
Drop Down Tabs (5 styles)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem:
doesnt work AT ALL on ANY version of IE (AKA, "the internet" for all people who cant find a real browser")
See attachments below.

Have no clue why, tested in IE6, IE7, IE8
FF - fine.
Android browser in Moto RAZR MAXX - Fine
No go in IE

thank you.

jscheuer1
12-19-2012, 04:18 AM
I'm assuming the menu works fine in IE on its demo page. If not, the menu is buggy.

Your images certainly show something out of kilter. Are you using a standards invoking DOCTYPE?

Is the page valid HTML?

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

bytehd
12-19-2012, 04:24 AM
I'm assuming the menu works fine in IE on its demo page. If not, the menu is buggy.

Your images certainly show something out of kilter. Are you using a standards invoking DOCTYPE?

Is the page valid HTML?

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

http://www.swordministries.org

jscheuer1
12-19-2012, 05:14 AM
OK, the first thing to try is using a standards invoking DOCTYPE. The page has one, but it's preceded with a quirks mode invoking one. A page is only allowed one DOCTYPE anyway, and the first (if there are more than one) generally takes precedent.

Replace:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

with:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The browser cache may need to be cleared and/or the page refreshed to see changes.

Also, if you're using IE's Developer tools, that should be closed and a new window or tab opened.

And BTW - Looking at the page in IE 9 in both its IE 9 standards mode and its IE 8 standards mode appears to take care of the problem.

bytehd
12-19-2012, 12:12 PM
OK, the first thing to try is using a standards invoking DOCTYPE. The page has one, but it's preceded with a quirks mode invoking one. A page is only allowed one DOCTYPE anyway, and the first (if there are more than one) generally takes precedent.

Replace:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

with:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The browser cache may need to be cleared and/or the page refreshed to see changes.

Also, if you're using IE's Developer tools, that should be closed and a new window or tab opened.

And BTW - Looking at the page in IE 9 in both its IE 9 standards mode and its IE 8 standards mode appears to take care of the problem.

Ok did that. Thanks.
HMMM, the drop-downs seem to be behind the flash object
Is this a z-index problem?

Shouldnt my DOCTYPE be newer anyway?
And any idea why those 5 middle tabs are taller?
Is it the IMG file in the LI elements?

jscheuer1
12-19-2012, 05:21 PM
The DOCTYPE should be one that you're willing to validate the page to. That one looked like the best candidate. It is the most recent for HTML 4.01 transitional. You could try the HTML 5 one:


<!DOCTYPE html>

Flash being over content on the page is usually not z-index, though in some cases that can play a role. Usually what needs to be done is that the flash needs wmode transparent:


Loosely from:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201

Add in this language to your object/embed tag(s) -

Add the following parameter to the OBJECT tag:


<param name="wmode" value="transparent">

Add the following attribute to the EMBED tag:


wmode="transparent"

Or, if you are using two object tags, as can and is sometimes done, add the param tag to both of them.

If you are using script to generate the tags (as is frequently done to avoid the 'click to activate' feature in some browsers), the wmode transparent must be passed to the script. This is easily accomplished but, varies depending upon the sort of script one uses. Some scripts do it automatically.

As for your other layout issues, when I have more time, I'll have a real look.

bytehd
12-20-2012, 01:26 AM
I cleaned up a bit
Can you take another look.

wmode works in IE6/IE7
FF already worked.

1) Not sure WHY there is a gap below the menu in FF, and above in IE6/7...

2) The individual LI items have different height
The IMG tags perhaps?
I CANT seem to make the others without images taller.
bluetabs.css margins/padding maybe?
or depsnds on font metrics?

IN FF, they are all TOO narrow vertically anyways

Thanks

jscheuer1
12-21-2012, 05:13 PM
The one thing that jumps out at me in IE is that the drop downs are too far down. To fix that add the highlighted:


<!-- CSS for Drop Down Tabs Menu #2 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/bluetabs.css">
<!--[if IE]>
<style type="text/css">
.dropmenudiv_b {
margin-top: -11px;
}
</style>
<![endif]-->
<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">
/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

As for the other things you're saying, I either don't see them, don't understand them, or they're so minor that I'm sure your visitors will not notice or think they're a problem. Remember, you look at it in all different browsers, comparing things and looking for small details. The regular user doesn't. As long as the thing works and doesn't look horrible, they won't notice or care.

If there still is a major problem. Describe it more specifically and I will try to see what you're talking about.