Yes the round corners are border-radius properties but not supported in IE8 and under.
You can either use images using the sliding doors techniques or just let IE have square buttons instead. Or lastly use one of the js linrarires such as CSS3pie.
Most of my clinets are happy to let IE8 and under have square corners and cut down oin the overheads of all the other methods.
What is a “js linrarires”??? 
Paul, I’m still trying to figure ou how the JavaScript works.
Do you know where in the HTML or JavaScript the file “jshow.css” is called??
(I would like to style the buttons, but need to first figure out how the style-sheet hooks up to everything else.)
Thanks,
Debbie
Cancel that one request.
I was being dense!!
(I thought that the JavaScript plugin was setting the path to the stylesheet, but aftre I posted it dawned on my I just needed to add a “link” to the stylesheet!)
Debbie
After staying up until 3:00 a.m., I think I’ve got a pretty nice finished product. Whew!
Here is a link to my test page…
I spent A LOT of time reading through the original code trying to understand how the HTML/CSS/JavaScript worked, and then cleaning things up. (Think I lost my “JS virginity” last night!) 
Everything looks great, with the only minor point being that if you re-size the browser with JavaScript off, it moves the slide off the screen as you minimize. (But a quick refresh fixes things.)
When I have more time, I’ll probably add a note or a “refresh” link on the version when Javacript is off, so the user understand how to compensate for this minor flaw.
Also, I’ll need to style the JS-Off links to make them look like buttons.
Everyone, please feel free to critique my final layout and code!!! (If anyone can look at my commented questions, that would be very helpful!!)
Thanks,
Debbie
Hi Debbie yes that’s looking pretty good now 
I think it looks better with the fade that you’ve added rather than the slide.
What is a “js linrarires”???
That should have said Libraries lol As in CSS3Pie.
I updated my version to account for fluid heights automatically but it got a little complicated but I’ll post it anyway as Ray may be interested.
The new example is here and it works like this:
My first thought was to cycle through the slides and find the tallest and then set all slides to that tallest height to stop the jump. This work on first page load but would not work on resize. I uses the resize event to run the routine again but it still wouldn’t work.
It seems that the plugin script strips the slides out of the DOM and that means you can’t get the height from them. As the script was too complicated for me to adjust I cheated and I cloned the slides and appended them to an empty div. I then absolutely placed this div under the existing slides and set the visibility to hidden to that they wouldn’t interfere with anything else.
This simply allowed me to grab the height of the longest slide from the cloned slides and then apply it to the real slides parent.
I’m only posting this out of interest in the hope that others may be able to do this more neatly. However, I still haven’t seen a single example of a fluid height scroller on the web and I must have looked at hundreds now.
Thanks! (I had good teachers!!)
I think it looks better with the fade that you’ve added rather than the slide.
Yeah, me too, that’s why I changed it. (BTW, if you look at the lines I commented out in the JS, then you’ll see how to make everything slide from the same direction, since you weren’t sure how to do this.)
That should have said Libraries lol
Ha ha. I figured it was a type-o!
I updated my version to account for fluid heights automatically but it got a little complicated but I’ll post it anyway as Ray may be interested.
Yeah, too complicated for me! (I’m quite happy with the example I posted.)
Thanks,
Debbie
Hi Paul,
Thanks for posting your latest fluid height fix.
The new example is here and it works like this:
My first thought was to cycle through the slides and find the tallest and then set all slides to that tallest height to stop the jump. This work on first page load but would not work on resize. I uses the resize event to run the routine again but it still wouldn’t work.
With some help from one of my js buddies I was able to get a script working that does exactly what your first thought was. Similar to an Equal Height Column script, I call this one the “Equal Height Sibling” script. With a little bit of tweaking it can be adjusted to target any sibling tags within any element ID. From the limited testing I’ve done so far it seems to be working fine.
Open that link in your browser, resize your window and grab the bottom right corner with your cursor and move your cursor in circles.
That should make it pass our Fluid Slider test.
>>but it still wouldn’t work.
From what I just learned (assuming I understand it right): If you have multiple resize events running in separate calls then it can cause one or both to fail. I’m not sure how you had it set up but grouping the calls together may have solved it.
It seems that the plugin script strips the slides out of the DOM and that means you can’t get the height from them. As the script was too complicated for me to adjust I cheated and I cloned the slides and appended them to an empty div. I then absolutely placed this div under the existing slides and set the visibility to hidden to that they wouldn’t interfere with anything else.
It might be worth a shot to see if you can merge my script into your page and eliminate the empty clone div. Seeing that it is standard javascript it should not have any conflict with the jQuery plugin stripping the slides out of the DOM.
I know Debbie says she’s content with things the way they are.
If I can make time, I may still try to take this a step further and see if I can merge what we have so far in with that TinySlider2 script I mentioned earlier in the thread.
A big THANK YOU goes out to Victor for introducing all of us to this cool new JavaScript Plugin!!
:tup:
Debbie
Rayzur, can you please explain what it is that you and Paul are up to? (My brain fizzled out this weekend after I got things working how I wanted. Not really following what you two are talking about…)
I thought the solution I posted did everything we all wanted? :-/
Anyways, feel free to improve (and simplify) things even more. (As far as simplification, I think that script I used could stand some definite cleaning up.)
Glad I inspired people to “push the envelope”!
Debbie
Rayzur, can you please explain what it is that you and Paul are up to?
We were looking for ways to keep it fully fluid without having it jump up and down, while not having to rely on min-height as it was not really a cure-all.
Different amounts of content in each slide are what caused that jumping. On a live site, all content below the slider would be jumping up and down with it.
I thought the solution I posted did everything we all wanted? :-/
To an extent it does, but there is still that jump in the height at it’s min-width. Your using the min-height on the LI which is just a conditional fix only really good for max-width.
We we’re just trying to take it the extra step and make it fool proof.
Hi Ray,
I already tried a similar script to yours and couldn’t get it to work but I tried yours anyway and ran into the same issues.
The problem is that once the slider is running it removes the slides from the dom and then inserts them one at a time. Therefore when your script runs on resize it only finds the one element and cannot determine the tallest element.
I’ve uploaded a new example to add the clone div via js so now the mark up is clean and will work with any number of slides automatically and maintain a consistent height on screen resize.
It seems to be working everywhere (more or less) but I don’t know what the implications are of having the slides cloned. I guess if you had hundreds of them then there would be overheads to consider so some other method would be preferable.
As Ray said you are manually setting a min-height which means that if you change the content in the slides you will also have to manually adjust the css to match. Which is fine if you want to do that
However your method still doesn’t cater for when the screen is resized smaller. Just resize your browser to the min-width and you will see that the page starts jumping up and down again.
We were looking for an automatic solution that adjusts to the tallest content in the slider even when the screen is resized smaller or larger.
So, conceptually, can’t you just look at all of the slides in the beginning, determine the “tallest” one, store that number/whatever somewhere, and then use it later? (I should shut up, because this is out of my league, but just trying to help!)
However your method still doesn’t cater for when the screen is resized smaller. Just resize your browser to the min-width and you will see that the page starts jumping up and down again.
True, but my plan was just to set a Min-Height - at the Mind-Width setting - so that it works - at least on my monitor! (Oops! Maybe that is the flaw in my thinking?!) 
We were looking for an automatic solution that adjusts to the tallest content in the slider even when the screen is resized smaller or larger.
Okay, I’ll shut up and let the pros get back to bigger and better things!
Debbie
P.S. You and Rayzur sure are getting excited over this! In the beginning, I had to coax a response out of both of you. 
Guess it is more exciting than it originally seemed?!
That’s good thinking except that we would have to save the height at every possible pixel width
Remember the height of the element will vary depending on the width of the window so if you get the initial height then that only refers to the width that the window happens to be open at. Once you resize the browser the height will change at every pixel change and you would have to save all those as well 
True, but my plan was just to set a Min-Height - at the Mind-Width setting - so that it works - at least on my monitor! (Oops! Maybe that is the flaw in my thinking?!)
Yes, that’s a reasonable solution but I think you just need a bit more height. The drawback of course is that once the screen is wider you will have rather a lot of blank space.
However as long as you don’t have a lot more content in one slide than another then I don’t think its a big issue.
P.S. You and Rayzur sure are getting excited over this! In the beginning, I had to coax a response out of both of you. Guess it is more exciting than it originally seemed?!
I think that your request for a fluid slider was a fair one and an interesting one which is why it kept our attention
Yep, I better keep quiet! 
Yes, that’s a reasonable solution but I think you just need a bit more height. The drawback of course is that once the screen is wider you will have rather a lot of blank space.
However as long as you don’t have a lot more content in one slide than another then I don’t think its a big issue.
For my situation, that is what I am shooting for.
I think that your request for a fluid slider was a fair one and an interesting one which is why it kept our attention
Well, if I can’t be a “brain” like you guys, at least I can ask “brainy questions”!! (I try to help out where I can…)
Debbie
Paul and Rayzur,
Our Slide-Show is working great so far, but just one kink I uncovered last night…
(Hmmm… how to explain?!) :-/
Is there some way to make each slide expand to fill the available space between my Left and Right Fixed-Width Columns?
You guys did a great job making things “fluid”, however, some slides are short on content which means that the slides are shrinking to fit the text and leaving ugly white gaps to the right of the skinny slide. 
For instance, let’s say I have the following slides…
Slide #1:
Get and keep a competitive edge.
Building a competitive edge into the fabric of your business is crucially important to long-term success. Some ways to get this edge are by knowing more than your competitors, making a product that is hard or impossible to imitate, being able to produce or distribute your product more efficiently, having a better location, or offering superior customer service.
Slide #2:
Small Businesses…
* Employ over half of private sector workforce
* Hire 40% of High-Tech Workers
* Represent 99.7% of all employer firms
In the above scenarios, Slide #1’s “fluid” nature means that it will expand and contract to fit any window size between the Min-Width and Max-Width which is exactly what we want!
However, Slide #2 is a problem because the available text isn’t wide enough to push the slide out to meet the Left and Right Columns.
I can’t adjust the “Min-Width” setting, because it messes up the larger Min-Max equation.
(It is almost like I need a Display: Block kind of action to address this issue.)
As it stands, I either need to make my font-size really big to push things out, or add extraneous text which is ridiculous?!
What makes this trickier is that every slide is different! One might have long stretches of prose like Slide #1 above, whereas many slides will read like PowerPoint presentations like Slide #2.
Any ideas of how to fix this?
Thanks,
Debbie
Hi,
The slide elements are list-items that were set to display:inline-block which is a shrinkwrapping element. If the LI does not have a width it will shrinkwrap to the width of it’s content.
Try setting width:100% on the inline-block LI, that should set it’s width according to the parent UL where the min/max widths were set.
Not sure what the script will do with it though, wasn’t it changing the LI’s to position:absolute?
The content in your slide#2 also looks like list-items so that could be set up as a nested UL.
I tried that, but I should be so lucky that it would be that easy.
It worked when the suspect slide was static, but when the slide-show rotates to the next slide you get this weird “ghosting” effect where you can see the narrower slide in the background so you get this ugly skip effect.
(I can’t complain since I don’t know JavaScript, but I suspect that if I had written the JavaScript, I would have taken a different approach. It sure does some weird things to our HTML/CSS?!)
Any other ideas?
Last night - and now again today - I was so desperate Iw as thinking of doing something insane like…
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
color: #FFF;
background-color: #FFF;
Debbie
Well I’m not sure what you were doing with the html on your #2 content example but I don’t see any problems when I incorporate it into Paul’s last example from post #51.
Here is how I set it up:
#demo li {
padding:10px;
display:-moz-inline-box; /*old gecko*/
display:inline-block;/* FF2+ + others*/
white-space:normal;
vertical-align:top;/*min-height:300px;*/
}
[B][COLOR=Black]#demo li li[/COLOR][/B] [COLOR=Blue]{display:block}[/COLOR]
<div id="demo">
<h1>Fluid Width Slider</h1>
<ul id="fluidslide">
<li id="slide1" class="slide">
<h2>Slide one</h2>
<p>One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim. Quisque metus justo, facilisis non facilisis id, laoreet eu libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend pellentesque odio ut euismod. Nulla consectetur bibendum tempus. Quisque at libero orci, tempor porta enim.</p>
</li>
[B] [COLOR=Black] <li id="slide2" class="slide">
<h2>Small Businesses...</h2>
<ul>
<li>Employ over half of private sector workforce</li>
<li>Hire 40% of High-Tech Workers</li>
<li>Represent 99.7% of all employer firms</li>
</ul>
</li>[/COLOR][/B]
<li id="slide3" class="slide">
<h2>Slide three</h2>
<p>Three Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim. Quisque metus justo, facilisis non facilisis id, laoreet eu libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend pellentesque odio ut euismod. Nulla consectetur bibendum tempus. Quisque at libero orci, tempor porta enim.</p>
<p>Three Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim.</p>
</li>
</ul>
Ugh.
Hey, I don’t want to look a gift horse in the mouth, but I sorta didn’t keep following you and Paul on that vertical fluid thingy.
If I use the new version in Post #51, am I gonna have to learn everything over and retool everything? 
(Don’t mean to be a pain, but I just have things working so well - and I was finally starting to understand the code - and so I’m afraid to scrap everything I have. I mean I already did that when we switched from the non-fluid slide-show.)
If the code in Post #51 fixes the issue, then I guess I’ll have to “upgrade”, but I’m hoping it isn’t an entirely different paradigm, because I spent a lot of time reading the last version of JavaScript in an attempt to style my buttons and tabs just like I wanted…
Hope that makes sense?
Not sure if you need me to post my code online, or if I should just jump to this newer and different version?!
Thanks,
Debbie
If I use the new version in Post #51, am I gonna have to learn everything over and retool everything?
Paul’s version from post#51 is the stable version that meets all the requirements of this fully fluid slider
Not sure if you need me to post my code online, or if I should just jump to this newer and different version?!
I really think you should be using Paul’s version anyway so I’m not sure if it would help by posting it at this point.
When setting the 100% width on the LI it did require me to remove the padding but that is always the case when using 100% widths.
Here is what I have that seems to be working fine with js on & off
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slider</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.jshowoff.min.js"></script>
<style type="text/css">
/*
Title: jShowOff: a jQuery Content Rotator Plugin
Author: Erik Kallevig
Version: 0.1.2
Website: http://ekallevig.com/jshowoff
License: Dual licensed under the MIT and GPL licenses.
*/
*{margin :0;padding}/* for testing only */
h1,h2,p {margin:0 0 1em}
h1{text-align:center;}
#demo {
position:relative;
}
#demo, #demo ul {
min-width:320px;
max-width:800px;
list-style:none;
margin:0 auto;
padding:0;
width:auto;
background:#ccc;
overflow:hidden;
white-space:nowrap;
zoom:1.0;
}
#demo ul {z-index:2}
#demo li {
[COLOR=Red]/*padding:10px; /*remove this with 100% width*/[/COLOR]
display:-moz-inline-box; /*old gecko*/
display:inline-block;/* FF2+ + others*/
white-space:normal;
vertical-align:top;
[B] [COLOR=Black] width:100%;[/COLOR][/B]
}
[COLOR=Black]#demo li#slide2 {background:#EEF;}/*testing 100% width*/
[/COLOR]
[B][COLOR=Black]#demo li li {
display:block;
width:auto;
}[/COLOR][/B]
[B][COLOR=Black]#demo li h2,
#demo li p,
#demo li li {margin:0 10px 1em}[/COLOR][/B]
* html #demo li{display:inline}/* ie6 display:inline-block hack*/
*+html #demo li{display:inline}/* ie7 display:inline-block hack*/
.jshowoff-controls {float:left;}
.jshowoff-slidelinks {float:right}
.jshowoff-controls a, .jshowoff-slidelinks a,#nojs a {
margin:0 5px;
display:inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:#fff;
background:#999;
padding:3px 10px;
text-decoration:none;
}
.jshowoff-controls a:hover, .jshowoff-slidelinks a:hover,#nojs a:hover{background:red}
.altlinks {zoom:1.0}
/* create a clone element so that we can grab height when browser resized*/
/* this element is inserted via js */
/* the lists will basically be on top of each other so we can just grab height from parent*/
#clone {
position:absolute;
background:red;
min-width:320px;
max-width:800px;
top:0;
left:0;
right:0;/* safari needs this*/
white-space:normal;
z-index:-1;
visibility:hidden;
}
* html #clone li{float:left;margin-right:-100%}/* ie6 needs this*/
*+html #clone li{float:left;margin-right:-100%}/* ie7 needs this*/
</style>
</head>
<body>
<div id="demo">
<h1>Fluid Width Slider</h1>
<ul id="fluidslide">
<li id="slide1" class="slide">
<h2>Slide one</h2>
<p>One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim. Quisque metus justo, facilisis non facilisis id, laoreet eu libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend pellentesque odio ut euismod. Nulla consectetur bibendum tempus. Quisque at libero orci, tempor porta enim.</p>
</li>
[COLOR=Black] [B] <li id="slide2" class="slide">
<h2>Small Businesses...</h2>
<ul>
<li>Employ over half of private sector workforce</li>
<li>Hire 40% of High-Tech Workers</li>
<li>Represent 99.7% of all employer firms</li>
</ul>
</li>[/B][/COLOR]
<li id="slide3" class="slide">
<h2>Slide three</h2>
<p>Three Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim. Quisque metus justo, facilisis non facilisis id, laoreet eu libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eleifend pellentesque odio ut euismod. Nulla consectetur bibendum tempus. Quisque at libero orci, tempor porta enim.</p>
<p>Three Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo elit in dolor aliquet vitae feugiat leo lacinia. Cras sed metus tellus. Suspendisse suscipit, risus sed condimentum fringilla, ante ante elementum neque, eget ornare eros orci in enim.</p>
</li>
</ul>
<p id="nojs" class="altlinks"><a href="#slide1">Slide 1</a> | <a href="#slide2">Slide 2</a> | <a href="#slide3">Slide 3</a></p>
<script type="text/javascript">
function adjustHeights() {
$('#fluidslide').after('<div id="clone"></div>');// create a holding div to hold a copy of our slides
$("ul#fluidslide").clone().prependTo("div#clone");// add slides to holding div
$('#clone ul').removeAttr("id")//remove ids from copy slides
$('#clone li').removeAttr("id")// remove ids from copy slides
adjustHeights2();
}
adjustHeights();
$(document).ready(function(){ $('#fluidslide').jshowoff({
effect: 'fade',
hoverPause: true,
autoPlay: true
});
$("#nojs").hide();// hide the normal naviagtion links when js is working
});
function adjustHeights2() {
/* no need to cycle through slides as they are all on top of each other and the parent will hold their height*/
var num2 = $('#clone').height();
$("#fluidslide").css('height',num2 );// set height of parent rather thean each individual slide
}
$(window).resize(function() {
$("#fluidslide").css('height','auto' );
// window.setTimeout('adjustHeights2()' ,500);
// adjust heights using a timeout to make it smoother
// ie6 and 7 don;t like that much so just do this
adjustHeights2();
});
</script>
</div>
<!--end #demo-->
</body>
</html>