...

View Full Version : Problem with DHTML Gallery Script (Maybe simple CSS problem)



manogamez
02-06-2008, 10:10 PM
Hello everyone!
I have a website running a DHTML script content glider seen here:
http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.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:


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;
}



.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=http%3A%2F%2Fwww.seas.upenn.edu%2F%7Ealammar%2Fpictures.shtml&charset=%28detect+automatically%29&doctype=Inline&group=0

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.seas.upenn.edu%2F~alammar%2Fpictures.shtml

manogamez
02-06-2008, 10:37 PM
Can a mod please move this to HTML/CSS. You'll have to forgive me this time as this is my first post.

manogamez
02-07-2008, 11:36 PM
Nevermind. I just gave up on this whole gliding thing. Going back to iframe.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum