Options

Problems with scrolling using tabs in IE/FF

psenior1psenior1 Registered Users Posts: 125 Major grins
edited March 17, 2014 in SmugMug Customization
I've just implemented Lamah's code from HERE so I can use tabs for my prices page.

Its all working well apart from when in IE and FF and you click a tab the window jumps (scrolls) to the top. It doesn't do in in Safari.

Any help appreciated, page is http://www.snrmac.com/Info-and-Prices/Weddings

CSS
/* Hide the radio buttons used to remember the selected tab by shoving them way off-screen */
.ss-tabs > input[type="radio"] {
  position: absolute;
  left: -9999px;
  top: 0;
}

/* Default style for tab headers */
.ss-tabs > input[type="radio"] + label {
  display: inline-block;
  border-radius: 5px 5px 0 0;
  border-bottom: none;
  padding: 6px 14px 6px 14px;
  font-size: 105%;
  position: relative;
  z-index: 0;
  cursor: pointer;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Active style of tab headers */
.ss-tabs > input[type="radio"]:checked + label {
  /* Grow a pixel taller */
                                                                                                              padding-bottom: 7px;
  margin-bottom: -1px;
  vertical-align: bottom;
  /* Float on top of the tab content panel border */  
                                                                                                              z-index: 2;
  -webkit-box-shadow: inset 0 10px 40px -22px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 10px 40px -22px rgba(255, 255, 255, 0.5);
}

/* Tab body style */
.ss-tabs > div {
  display: none;
  position: relative;
  z-index: 1;
  background-color: rgba(5, 5, 12, 0.5);
  border-radius: 0 5px 5px 5px;
  min-height: 300px;
}

/* Support a reasonable number of possible tabs: */
.ss-tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1), .ss-tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2), .ss-tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3), .ss-tabs > input:nth-of-type(4):checked ~ div:nth-of-type(4), .ss-tabs > input:nth-of-type(5):checked ~ div:nth-of-type(5), .ss-tabs > input:nth-of-type(6):checked ~ div:nth-of-type(6), .ss-tabs > input:nth-of-type(7):checked ~ div:nth-of-type(7), .ss-tabs > input:nth-of-type(8):checked ~ div:nth-of-type(8), .ss-tabs > input:nth-of-type(9):checked ~ div:nth-of-type(9), .ss-tabs > input:nth-of-type(10):checked ~ div:nth-of-type(10), .ss-tabs > input:nth-of-type(11):checked ~ div:nth-of-type(11), .ss-tabs > input:nth-of-type(12):checked ~ div:nth-of-type(12), .ss-tabs > input:nth-of-type(13):checked ~ div:nth-of-type(13), .ss-tabs > input:nth-of-type(14):checked ~ div:nth-of-type(14), .ss-tabs > input:nth-of-type(15):checked ~ div:nth-of-type(15), .ss-tabs > input:nth-of-type(16):checked ~ div:nth-of-type(16), .ss-tabs > input:nth-of-type(17):checked ~ div:nth-of-type(17), .ss-tabs > input:nth-of-type(18):checked ~ div:nth-of-type(18), .ss-tabs > input:nth-of-type(19):checked ~ div:nth-of-type(19), .ss-tabs > input:nth-of-type(20):checked ~ div:nth-of-type(20) {
  display: block;
}

/* Use SmugMug-like coloured tabs for inactive tabs */
.ss-tabs > label {
  color: white;
}

.ss-tabs > input[type="radio"]:nth-of-type(1):not(:checked) + label {
  background-color: #014D87;
}

.ss-tabs > input[type="radio"]:nth-of-type(2):not(:checked) + label {
  background-color: #014D87;
}

.ss-tabs > input[type="radio"]:nth-of-type(3):not(:checked) + label {
  background-color: #014D87;
}

.ss-tabs > input[type="radio"]:nth-of-type(4):not(:checked) + label {
  background-color: #014D87;
}

HTML
<form action="">
	<div class="ss-tabs">
	    <input id="ss-tab-radio-1" type="radio" name="ss-selected-tab" checked="checked" />
	    <label for="ss-tab-radio-1" class="sm-panel-content sm-panel-flat">Digital Package</label>
	 
	    <input id="ss-tab-radio-2" type="radio" name="ss-selected-tab" />
	    <label for="ss-tab-radio-2" class="sm-panel-content sm-panel-flat">Premium Storybook</label>
	     
	    <input id="ss-tab-radio-3" type="radio" name="ss-selected-tab" />
	    <label for="ss-tab-radio-3" class="sm-panel-content sm-panel-flat">Luxury Mounted</label>
 		
        <input id="ss-tab-radio-4" type="radio" name="ss-selected-tab" />
	    <label for="ss-tab-radio-4" class="sm-panel-content sm-panel-flat">Additional Options</label>
	 
	    <div class="sm-panel-content sm-panel-shadow sm-panel-padded">
                
<h2><span style="text-decoration: underline; font-size: 16px;"><img src="http://www.snrmac.com/photos/i-HQHDRMw/1/S/i-HQHDRMw-S.jpg" alt="" style="border: 0px solid ; width: 250px; height: 166px; float: right; margin-top: 20px; margin-bottom: 20px;" />Digital
Package</span><span style="font-size: 16px;">&nbsp; -
Peak&nbsp;£1495 &nbsp;/ &nbsp;Off-peak £995</span></h2>
<p><br />
</p>
<p><span>* Attendance from bridal
preparation through to the first dance </span></p>
<p><span> * Two photographers </span></p>
<p><span> * 300+ creatively processed and
retouched images&nbsp;</span></p>
<p><span> * DVD of high resolution Jpeg’s
for home printing and sharing online </span></p>
<p><span> * Dynamic MP4 video slideshow </span></p>
<p><span> * Pre-wedding consultation at
the venue </span></p>
<p><span> * Media presentation case</span></p>
          
      </div>
      
	    <div class="sm-panel-content sm-panel-shadow sm-panel-padded">


<h2><span style="font-size: 16px; text-decoration: underline;">Premium Storybook Album Package</span><span style="font-size: 16px;">
-&nbsp;Peak from&nbsp;£1795&nbsp; / &nbsp;Off-peak from&nbsp;£1395</span></h2>
<p><img style="width: 250px; height: 166px; float: right; margin-top: 20px; margin-bottom: 20px;" alt="" src="http://www.snrmac.com/photos/i-mFM3Jrv/1/S/i-mFM3Jrv-S.jpg" /><br />
</p>
<p><span>* Stunning digital storybook
album, available in 12x8", 14x10" and 16x12" </span></p>
<p><span> * Attendance from bridal
preparation through to the first dance </span></p>
<p><span> * Two photographers </span></p>
<p><span> * 300+ creatively processed and
retouched images</span></p>
<p><span> * DVD of high resolution Jpeg’s
for home printing and sharing online </span></p>
<p><span> * Media presentation case </span></p>
<p><span> * Dynamic MP4 video slideshow </span></p>
<p><span> * 1hr engagement shoot </span></p>
<p><span> * Pre-wedding consultation at
the venue </span></p>
<p><span> * Full album design </span></p>
<p><span> * Beautiful album presentation
box</span></p>
          
          
	    </div>
	    <div class="sm-panel-content sm-panel-shadow sm-panel-padded">
	
          
<h2><span style="font-size: 16px; text-decoration: underline;">Luxury
Mounted Album Package</span><span style="font-size: 16px;">&nbsp; -
Peak from £2195&nbsp; / &nbsp;Off-peak from £1795</span></h2>
<p><img style="width: 250px; height: 166px; float: right; margin-top: 20px; margin-bottom: 20px;" alt="" src="http://www.snrmac.com/photos/i-mv4CMrj/1/S/i-mv4CMrj-S.jpg" /><br />
</p>
<p><span id="">* The ultimate in luxury and
quality, available in 10x10", 12x12" and 14x14" </span></p>
<p><span>* Attendance from bridal
preparation through to the first dance </span></p>
<p><span>* Two photographers </span></p>
<p><span>* 300+ creatively processed and
retouched images</span></p>
<p><span>* DVD of high resolution Jpeg’s
for home printing and sharing online </span></p>
<p><span>* Media presentation case </span></p>
<p><span>* Dynamic MP4 video slideshow </span></p>
<p><span>* 1hr engagement shoot </span></p>
<p><span>* Pre-wedding consultation at the
venue </span></p>
<p><span>* Full album design </span></p>
<p><span>* Beautiful album presentation box</span></p>
      </div>
      
<div class="sm-panel-content sm-panel-shadow sm-panel-padded">
	
  
<h2><span style="font-size: 16px; text-decoration: underline;" id="yui_3_8_0_1_1392741978180_7918">Additional Options</span><span style="font-size: 16px;">&nbsp; -
Contact us for details<br />
</span></h2>
<p><img style="width: 250px; height: 200px; float: right; margin-top: 0px; margin-bottom: 0px;" alt="" src="http://www.snrmac.com/photos/i-sGMPk7c/0/S/i-sGMPk7c-S.jpg" /><br />
</p>
<p id=""><span>* Photobooth - fantastic fun and a
great way to start the evening reception<br />
</span></p>
<p><span>* </span><span>Parent and bridesmaids albums</span>
</p>
<p><span></span></p>
<p><span>* Premium canvas wraps and canvas
blocks<br />
</span></p>
<p><span>* Luxury framed prints</span></p>
<p><span>* Wide selection of wall products</span></p>
<p><span>* Invitations and thank-you
cards&nbsp;</span></p>
  
      </div>      
	</div>
</form>
website - http://www.snrmac.com
facebook - my facebook page please LIKE me!

Comments

Sign In or Register to comment.