Results 1 to 8 of 8

Thread: CSS menu scripts dont align in any version of IE

  1. #1
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry CSS menu scripts dont align in any version of IE

    1) Script Title:
    Drop Down Tabs (5 styles)

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...roptabmenu.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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	OK.jpg 
Views:	166 
Size:	19.8 KB 
ID:	4851   Click image for larger version. 

Name:	bad.jpg 
Views:	161 
Size:	18.2 KB 
ID:	4852  

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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:

    Code:
    <!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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

    Code:
    <!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:

    Code:
    <!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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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/kn...fm?id=tn_14201

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

    Add the following parameter to the OBJECT tag:

    HTML Code:
    <param name="wmode" value="transparent">
    Add the following attribute to the EMBED tag:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Dec 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by bytehd; 12-20-2012 at 01:33 AM.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    	<!-- 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 5
    Last Post: 10-19-2011, 08:55 AM
  2. Slashdot menu a current dont work
    By Niclas in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 04-06-2008, 10:45 AM
  3. Lightbox and other scripts dont mingle?
    By wasahobo in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 09-08-2006, 06:33 AM
  4. HV menu version 5.5 and security settings
    By purpleKate in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-06-2006, 11:02 AM
  5. Top menu version 3
    By fred2028 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-01-2005, 06:42 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •