Give help. Get help.
For some reason the height of the panel div is calculated as a set number of pixels… once I switch panels and come back it is calculated to fit the content(height:auto; like it should be). I have been beating my head off the desk for hours trying to figure this one out.
website in question:
I’vehttp://kyam.ca/kyam06/
jquery.coda-slider-2.0.js:
http://kyam.ca/kyam06/js/jquery.coda-slider-2.0.js
settings used:
this must have something to do with the panel height but makes no sense to me (I’m a total newb when it comes to js):
This is the css:
http://kyam.ca/kyam06/stylesheets/coda-slider-2.0.css
a:hover {
color:#000;
text-decoration:none;
}
p {
text-align:justify;
padding:10px;
}
h2 {
font-family:”Gill Sans”, “Helvetica Neue”, Arial;
font-size:16px;
letter-spacing:3px;
font-style:normal;
font-weight:100;
margin-top:25px;
border-bottom:2px solid #e3f4f6;
text-align:center;
}
h3 {
font-family:”Gill Sans”, “Helvetica Neue”, Arial;
font-size:16px;
letter-spacing:3px;
font-style:italic;
font-weight:100;
margin-top:25px;
margin-bottom:25px;
text-align:center;
}
.left {
float:left;
width:375px;
}
.right {
float:right;
width:375px;
}
#header {
width:800px;
position:absolute;
left:50%;
margin-left:-400px;
background:#blue;
padding:0;
}
body {
background-image:url(../images/bg-diag.png);
font-family:”Gill Sans”, “Helvetica Neue”, Arial;
font-size:14px;
letter-spacing:1px;
font-style:normal;
line-height:25px;
font-weight:100;
margin:0;
padding:0;
}
.panel h2.title {
margin-bottom:10px;
}
noscript div {
background:#ccc;
border:1px solid #900;
margin:20px 0;
padding:15px;
}
.coda-slider-wrapper {
position:absolute;
left:50%;
top:150px;
margin-left:-400px;
background:#e3f4f6;
clear:both;
overflow:auto;
padding:0;
}
.coda-slider {
background:#fff;
float:left;
overflow:hidden;
position:relative;
}
.coda-slider-no-js .coda-slider {
height:200px;
overflow:auto!important;
padding-right:20px;
}
.coda-slider-wrapper.arrows .coda-slider {
margin:0 10px;
}
.coda-nav-left a,.coda-nav-right a {
background:#000;
color:#fff;
width:100px;
display:block;
text-align:center;
text-decoration:none;
padding:20px;
}
.coda-nav ul li a.current {
background:#fff;
}
.coda-slider .panel-wrapper {
padding:5px;
}
.coda-slider p.loading {
text-align:center;
padding:20px;
}
.coda-nav ul {
background-color:#e3f4f6;
clear:both;
display:block;
overflow:hidden;
margin:auto;
}
.coda-nav ul li {
display:inline;
}
.coda-nav ul li a {
color:#000;
display:block;
float:left;
margin-right:1px;
padding:3px 20px;
}
.coda-slider .panel {
display:block;
float:left;
}
.coda-slider .panel-container {
position:relative;
}
.coda-nav-left,.coda-nav-right {
float:left;
}
a:link,a:visited {
color:#09C;
text-decoration:none;
}
.coda-slider,.coda-slider .panel,.coda-slider-wrapper.arrows .coda-slider,.coda-slider-wrapper.arrows .coda-slider .panel {
width:800px;
height:auto;
}
I was wrong about the window height so I edited my post. It is always calculated at the same initial height no matter the window size.
I added a height attribute to the solutions pic on the first panel… Problem solved!
You must be logged in to reply to this topic.