Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post

    Unhappy Problem with DHTML Gallery Script (Maybe simple CSS problem)

    Hello everyone!
    I have a website running a DHTML script content glider seen here:
    http://www.dynamicdrive.com/dynamici...tentglider.htm
    The script works in all browsers very well.

    The website, however, has some browser compatability issues. In Mozilla/Gecko based browsers such as Opera and Firefox, the glidecontent divs seem to lose some properties. They also don't glide into position and overflow into over divs.

    I've gone over the code a million times and I'm stumped. I need your help.

    http://www.seas.upenn.edu/~alammar/pictures.shtml
    The code should be all viewable:

    Code:
    a:link { color: #ffcc66; }
    
    a:visited { color: #ffffcc; }
      
    a:hover {  color: #ffffff;}
    
    body {
    	background-image: url('images/grass.jpg');
    	background-repeat: no-repeat; 
    	background-attachment: fixed;
    	font-family: arial;
    	font-size: 12px;
    	color: #000000;
    	margin: 0px;
    	padding:  0px 0 10px 0;
    }
    
    #content {
    	position: relative;
    	margin:20px auto 20px;	
    	padding: 10px 10px 10px 10px;
    	width: 800px;
    	background-color: #000000;
    	border: 5px double #FFFFFF;
    	color: #FFFFCC;
    	-moz-border-radius: 20px;
    	-webkit-border-radius: 20px;
    }
    
    #header {
    	position: relative;
    	margin: 0px auto 5px auto;
    	padding: 2px;
    	width: 830px;
    	color: #181818;
    	font-size: 5em;
    	font-family: serif;
    }
    	
    
    div#nav {
    	width: 100%;	
    	height: 20px;
    	margin: 0px 0px 0px 0px;
    	padding: 0;
    	border-top: solid #FFFFFF 1px;
    	border-bottom: solid #FFFFFF 1px;
    	background-color: #000000;
    }
    
    div#nav ul {
    	position: relative;
    	margin: 0 auto;
    	padding: 0 0 0 0;
    	width: 845px;
    	font-size: small;
    	color: #FFFFFF;
    	line-height: 20px;
    	white-space: nowrap;
    }
    
    div#nav li {
    	list-style-type: none;
    	display: inline;
    }
    
    div#nav li a {
    	text-decoration: none;
    	padding: 2px 10px;
    	color: #FFFFFF;
    }
    
    div#nav li a:link {
        color: #FFFFFF;
    }
    
    div#nav li a:visited {
        color: #CCCCCC;
    }
    
    div#nav li a:hover {
    	border-left: solid white 1px;
    	border-right: solid white 1px;
    	color: #FFFFFF;
    	background-color: #000033;
    }
    
    #rollingimage 
    {
    	text-align: center;
    	 width: 400px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-top: 10px;
    	border: 1px solid #FFFFFF;
    	background-color: #000000;
    }
    
    #inline-list 
    {
    	padding: 3px 0 3px 0;
    	margin: 0;
    	text-align:center;
    	width: 400px;
    	border-bottom: 1px solid white;
    	background-color: #000000;
    	color: #FFFFFF;
    }
    
    #inline-list ul , #inline-list li
    {
    	display: inline;
    	text-align: center;
    	margin: 0px auto;
    	padding: 0;
    	color: #FFFFFF;
    	}
    	
    #inline-list li a {
    	text-decoration: none;
    	padding: 2px 10px;
    	color: #FFFFFF;
    }	
    
    #inline-list li a:hover {
    	border-left: solid white 1px;
    	border-right: solid white 1px;
    	color: #FFFFFF;
    	background-color: #000033;
    }
    
    #inline-list li a:link {
        color: #FFFFFF;
    }
    
    #inline-list li a:visited {
        color: #CCCCCC;
    }
    
    .myMouseOverHover
    { 
    text-align:center;
    } 
    
    .myMouseOverHover:hover{ 
    background-color:#000000;
    color:#181818;
    } 
    
    hr { margin-left: 0px; width: 100%; clear:both;}
    
    #footer {
    	font-family: verdana, serif;
    	text-align: center;
    	font-size: .9em;
    }

    Code:
    .glidecontentwrapper{
    position: relative; /* Do not change this value */
    width: 780px;
    height: 450px; /* Set height to be able to contain height of largest content shown*/
    margin: 0px 10px 0px 10px;
    overflow: hidden;
    }
    /*
    	Total wrapper width: 780px+10px+10px=800px
    	Or width of wrapper div itself plus any left and right CSS border and padding
    	Adjust related containers below according to comments
    */
    
    
    .glidecontent{ /*style for each glide content DIV within wrapper.*/
    position: absolute; /* Do not change this value */
    background: #000000;
    padding: 10px;
    visibility: hidden;
    width: 100%;
    }
    /*
     Total glidecontent width: 330px+10px+10px=350px
    	Or width of wrapper div itself (not counting wrapper border/padding)
    */
    
    .glidecontenttoggler { /*style for DIV used to contain toggler links. */
    width: 780px;
    margin-top: 6px;
    text-align: center; /*How to align pagination links: "left", "center", or "right" */
    background: #000000; /*always declare an explicit background color for fade effect to properly render in IE*/
    border-bottom: solid white 1px;
    }
    /*
     Total contenttoggler width: 350px+5px+5px=360px
    	Or total width of wrapper div (counting wrapper border/padding)
    */
    
    .glidecontenttoggler a{ /*style for every navigational link within toggler */
    display: -moz-inline-box;
    display: inline-block;
    color: #2e6ab1;
    padding: 1px 3px;
    margin-right: 3px;
    font-weight: bold;
    text-decoration: none;
    }
    
    .glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
    background: #E4EFFA;
    color: black;
    }
    
    .glidecontenttoggler a:hover{
    background: #E4EFFA;
    color: black;
    }
    
    .glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
    }
    
    .glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
    }
    
    .glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{
    background: #1A48A4;
    color: white;
    }
    Thanks in advance for your efforts.

    EDIT:
    Validation Results -
    http://validator.w3.org/check?uri=ht...Inline&group=0

    http://jigsaw.w3.org/css-validator/v...pictures.shtml
    Last edited by manogamez; 02-07-2008 at 05:12 PM. Reason: Validation

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    Can a mod please move this to HTML/CSS. You'll have to forgive me this time as this is my first post.
    Last edited by manogamez; 02-07-2008 at 10:52 PM.

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 1 Time in 1 Post
    Nevermind. I just gave up on this whole gliding thing. Going back to iframe.
    █GGGG█


  •  

    Posting Permissions

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