Results 1 to 2 of 2

Thread: animatedcollapse.js problem with IE8 / Firefox

  1. #1
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default animatedcollapse.js problem with IE8 / Firefox

    1) Script Title: animatedcollapse.js

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

    3) Describe problem: I have been working on new menus using the animatedcollapse.js. I'm still in the process of building them but trying to fix a problem that only show up in IE8 and Firefox. It works just fine in IE7 and passes W3C Validation. the URL is http://www.mistergreengenes.com/mm5/.../leftmenu.html The problem is the gaps between the graphics and also when the DIV expands. Any ideas would be great.

    Thanks
    Last edited by GreenG; 07-12-2010 at 10:39 PM.

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Part of the problem can be alleviated by putting a css reset on the top of the stylesheet. I use a Meyer reset that looks like this
    Code:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-weight: inherit;
    	font-style: inherit;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    body {
    	line-height: 1;
    	color: black;
    	background: white;
    }
    ol, ul {
    	list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: "";
    }
    blockquote, q {
    	quotes: "" ""
    }
    It is helpful in making things look the same in different browsers.

    There might still be small gaps left but those are probably due to transparent regions in the png's

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
  •