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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    anything slider and firefox problems

    hello all. I am having an issue with css positioning and firefox using the jquery anything slider. The issue seems not to be with IE or chrome, just with firefox.
    The page is here:
    www.homeimprovementeducator.com
    The slider box slips out of its holder and is floated to the right and up a bit. the navigation buttons are where they are supposed to be, however. I think that this must be a width issue, maybe something is too big to fit into a container, but i cant figure out where the problem is.

    Here is the html and css on my end.

    Code:
    <div class="slidermargins">
          <div id="slider">
            <div>
              <div class="sliderleft"><img></div>
              <div class="sliderright">
                <h3></h3>
                <h4></h4>
                <p></p>
              </div>
            </div>
          </div>
    </div>
    
    .slidermargins {
    	margin-top: 20px;
    	margin-bottom: 30px;
    }
    
    .sliderleft {
    	float: left;
    	height: 250px;
    	width: 50%;
    }
    
    .sliderright {
    	float: right;
    	height: 250px;
    	width: 50%;
    	background-color: #eeeeee;
    	line-height: 20px;
    }
    #slider div .sliderright h3 {
    	clear: both;
    	color: #004499;
    	font-size: 24px;
    	font-family: "Times New Roman", Times, serif;
    	border-bottom-width: 1px;
    	border-bottom-style: solid;
    	border-bottom-color: #004499;
    	text-indent: 0;
    	margin-right: 20px;
    	margin-left: 20px;
    	margin-top: 10px;
    }
    #slider div .sliderright h4 {
    	clear: both;
    	padding-left: 20px;
    	color: #4a4e5a;
    	margin-top: -10px;
    	margin-left: 10px;
    }
    #slider div .sliderright p {
    	padding-right: 30px;
    	padding-left: 30px;
    	margin-top: -10px;
    }
    This is the css for the slider that came with the plugin:
    Code:
    #slider {
    	width: 700px;
    	height: 250px;
    	list-style: none;
    	/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    	overflow-y: auto;
    	overflow-x: hidden;
    }
    
    /******************
      SET STYLING HERE
     ******************
     =================================
     Default state (no keyboard focus)
     ==================================*/
    /* Overall Wrapper */
    .anythingSlider-metallic {
    	margin: 0 auto;
    	/* 23px right & left padding for the navigation arrows */
    	padding: 0 23px;
    }
    /* slider window - top & bottom borders, default state */
    .anythingSlider-metallic .anythingWindow {
    	border-top: 3px solid #333;
    	border-bottom: 3px solid #333;
    }
    /* Navigation buttons + start/stop button, default state */
    .anythingSlider-metallic .anythingControls a {
    	background: transparent url(../images/arrows-metallic.png) -68px -40px repeat-x;
    	color: #000;
    	border: #000 1px solid;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    }
    /* Navigation current button, default state */
    .anythingSlider-metallic .anythingControls a.cur,
    .anythingSlider-metallic .anythingControls a:hover {
    	background-position: -70px -137px;
    	background-color: #888;
    	color: #000;
    }
    
    /* start-stop button, stopped, default state */
    .anythingSlider-metallic .anythingControls a.start-stop {
    	background: #040;
    	color: #ddd;
    	/* top shadow */
    	-moz-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
    	-webkit-box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
    	box-shadow: inset 1px 2px 5px rgba(0, 0, 0, 0.5);
    }
    /* start-stop button, playing, default state */
    .anythingSlider-metallic .anythingControls a.start-stop.playing {
    	background-color: #800;
    }
    
    /* start-stop button, default hovered text color (when visible) */
    /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */
    .anythingSlider-metallic .anythingControls a.start-stop:hover,
    .anythingSlider-metallic .anythingControls a.start-stop.hover,
    .anythingSlider-metallic .anythingControls a.start-stop .anythingControls ul a:hover {
    	color: #fff;
    	/* clear top shadow */
    	-moz-box-shadow: inset 0 0 0 #000000;
    	-webkit-box-shadow: inset 0 0 0 #000000;
    	box-shadow: inset 0 0 0 #000000;
    }
    
    /*
     =================================
     Active State (has keyboard focus)
     =================================
    */
    /* slider window - top & bottom borders, active state */
    .anythingSlider-metallic.activeSlider .anythingWindow {
    	border-color: #0355a3;
    }
    
    /* Navigation buttons, active state */
    .anythingSlider-metallic.activeSlider .anythingControls a {
    	background-color: transparent;
    }
    /* Navigation current button, active state */
    .anythingSlider-metallic.activeSlider .anythingControls a.cur,
    .anythingSlider-metallic.activeSlider .anythingControls a:hover {
    	background-position: -76px -57px;
    	background-color: #ccc;
    }
    
    /* start-stop button, stopped, active state */
    .anythingSlider-metallic.activeSlider .anythingControls a.start-stop {
    	background: #080;
    	color: #fff;
    }
    /* start-stop button, playing, active state */
    .anythingSlider-metallic.activeSlider .anythingControls a.start-stop.playing {
    	color: #fff;
    	background: #d00;
    }
    /* start-stop button, active slider hovered text color (when visible) */
    .anythingSlider-metallic.activeSlider .start-stop:hover,
    .anythingSlider-metallic.activeSlider .start-stop.hover {
    	color: #fff;
    }
    
    /************************
      NAVIGATION POSITIONING
     ************************/
    /* Navigation Arrows */
    .anythingSlider-metallic .arrow {
    	top: 50%;
    	position: absolute;
    	display: block;
    	z-index: 100;
    }
    
    .anythingSlider-metallic .arrow a {
    	display: block;
    	width: 45px;
    	height: 95px; /* half height of image */
    	text-align: center;
    	outline: 0;
    	background: url(../images/arrows-metallic.png) no-repeat;
    	margin-top: -30px;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    }
    
    /* back arrow */
    .anythingSlider-metallic .back { left: 0; }
    .anythingSlider-metallic .back a { background-position: left bottom; }
    .anythingSlider-metallic .back a:hover,
    .anythingSlider-metallic .back a.hover { background-position: left top; }
    /* forward arrow */
    .anythingSlider-metallic .forward { right: 0; }
    .anythingSlider-metallic .forward a { background-position: right bottom; }
    .anythingSlider-metallic .forward a:hover,
    .anythingSlider-metallic .forward a.hover { background-position: right top; }
    
    /* Navigation Links */
    .anythingSlider-metallic .anythingControls {
    	height: 15px; /* limit height, needed for IE9 of all things */
    	outline: 0;
    	display: none;
    	float: right;
    	position: absolute;
    	bottom: 5px;
    	right: 20px;
    	margin: 0 45px;
    	z-index: 100;
    	opacity: 0.90;
    	filter: alpha(opacity=90);
    }
    
    .anythingSlider-metallic .anythingControls ul {
    	margin: 0;
    	padding: 0;
    	float: left;
    }
    .anythingSlider-metallic .anythingControls ul li {
    	list-style: none;
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    .anythingSlider-metallic .anythingControls ul a {
    	display: inline-block;
    	width: 10px;
    	height: 10px;
    	margin: 3px;
    	padding: 0;
    	text-decoration: none;
    	text-align: center;
    	outline: 0;
    }
    
    .anythingSlider-metallic .anythingControls span {
    	display: block;
    	visibility: hidden;
    }
    
    /* navigationSize window */
    .anythingSlider-metallic .anythingControls .anythingNavWindow {
    	overflow: hidden;
    	float: left;
    }
    /* navigationSize nav arrow positioning */
    .anythingSlider-metallic .anythingControls li.prev a span,
    .anythingSlider-metallic .anythingControls li.next a span {
    	visibility: visible;
    	position: relative;
    	top: -6px; /* bring navigationSize text arrows into view */
    	color: #fff;
    }
    
    /* Autoplay Start/Stop button */
    .anythingSlider-metallic .anythingControls .start-stop {
    	display: inline-block;
    	width: 10px;
    	height: 10px;
    	margin: 3px;
    	padding: 0;
    	text-align: center;
    	text-decoration: none;
    	z-index: 100;
    	outline: 0;
    }
    
    /***********************
    IE8 AND OLDER STYLING
    ***********************/
    /* Navigation Arrows */
    .as-oldie .anythingSlider-metallic .arrow {
    	top: 40%;
    }
    .as-oldie .anythingSlider-metallic .arrow a {
    	margin: 0;
    }
    
    /***********************
      COMMON SLIDER STYLING
     ***********************/
    /* Overall Wrapper */
    .anythingSlider {
    	display: block;
    	overflow: visible !important;
    	position: relative;
    	float: left;
    }
    /* anythingSlider viewport window */
    .anythingSlider .anythingWindow {
    	overflow: hidden;
    	position: relative;
    	width: 100%;
    	height: 100%;
    }
    /* anythingSlider base (original element) */
    .anythingSlider .anythingBase {
    	background: transparent;
    	list-style: none;
    	position: absolute;
    	overflow: visible !important;
    	top: 0;
    	left: 0;
    	margin: 0;
    	padding: 0;
    }
    
    /* Navigation arrow text; indent moved to span inside "a", for IE7;
    	apparently, a negative text-indent on an "a" link moves the link as well as the text */
    .anythingSlider .arrow span {
    	display: block;
    	visibility: hidden;
    }
    /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
    .anythingSlider .arrow.disabled {
    	display: none;
    }
    /* all panels inside the slider; horizontal mode */
    .anythingSlider .panel {
    	background: transparent;
    	display: block;
    	overflow: hidden;
    	float: left;
    	padding: 0;
    	margin: 0;
    }
    /* vertical mode */
    .anythingSlider .vertical .panel {
    	float: none;
    }
    
    /* fade mode */
    .anythingSlider .fade .panel {
    	float: none;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    }
    /* fade mode active page - visible & on top */
    .anythingSlider .fade .activePage {
    	z-index: 0;
    }
    
    /***********************
      RTL STYLING
     ***********************/
    /* slider autoplay right-to-left, reverse order of nav links to look better */
    .anythingSlider.rtl .anythingWindow {
    	direction: ltr;
    	unicode-bidi: bidi-override;
    }
    .anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
    .anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
    .anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */
    
    /* probably not necessary, but added just in case */
    .anythingSlider .anythingWindow,
    .anythingSlider .anythingControls ul a,
    .anythingSlider .arrow a,
    .anythingSlider .start-stop {
    	transition-duration: 0;
    	-o-transition-duration: 0;
    	-moz-transition-duration: 0;
    	-webkit-transition-duration: 0;
    }
    Any ideas or suggestions are greatly appreciated.
    Thank you for your time.

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sorry fixed it

    thanks for viewing everyone, but ive figured out the problem.


  •  

    Tags for this Thread

    Posting Permissions

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