html - Tab content background cutting off in Safari but fine in Chrome -
i'm having trouble css tab content of site. client has asked image added background, have done , working fine in chrome , ie. in safari image being cut off, please see http://jsfiddle.net/j9ftx/11/ referring to. there must in css tabs controlling width can't find what.
thanks help
.tabs { position: relative; margin: 40px auto; width: 810px; background-color:#ffffff; background-image:url(http://creationdev.co.uk/expressiveprint/images/parrot.png); background-repeat:no-repeat; } .tabs input { position: absolute; z-index: 1000; height: 40px; left: 0px; top: 40px; opacity: 0; cursor: pointer; } .tabs input#tab-2{ top: 80px; } .tabs input#tab-3{ top: 120px; } .tabs input#tab-4{ top: 160px; } .tabs input#tab-5{ top: 200px; } .tabs label { background: #1c1c1c; margin-top:8px; font-size:32px; font-weight:normal; line-height: 40px; height: 40px; position: relative; padding: 0 20px; display: block; width: auto; color: #ffffff; text-align: right; float: left; clear: both; z-index:2000; } .tabs label:after { content: ''; background: #ffffff; color:#1c1c1c; position: absolute; right: -2px; top: 0; width: 2px; height: 100%; } .tabs input:hover + label { background: #5e5e5e; } .tabs label:first-of-type { z-index: 4; } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tab-label-5 { z-index: 1; } .tabs input:checked + label { background: #c196c5; color:#ffffff; z-index: 6; } .content h2 { font-size:30px; } .clear-shadow { clear: both; } .content { background: #fff; position: relative; width: auto; margin: -175px 0 0 200px; height: 430px; z-index: 5; overflow: hidden; } .content div { position: absolute; top: 0; padding: 10px 40px; z-index: 1; opacity: 0; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -o-transition: linear 0.5s; -ms-transition: linear 0.5s; transition: linear 0.5s; } .content div{ -webkit-transform: translatey(-450px); -moz-transform: translatey(-450px); -o-transform: translatey(-450px); -ms-transform: translatey(-450px); transform: translatey(-450px); } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4, .tabs input.tab-selector-5:checked ~ .content .content-5 { -webkit-transform: translatey(0px); -moz-transform: translatey(0px); -o-transform: translatey(0px); -ms-transform: translatey(0px); transform: translatey(0px); z-index: 100; -ms-filter:"progid:dximagetransform.microsoft.alpha(opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: ease-out 0.3s 0.3s; -moz-transition: ease-out 0.3s 0.3s; -o-transition: ease-out 0.3s 0.3s; -ms-transition: ease-out 0.3s 0.3s; transition: ease-out 0.3s 0.3s; } .content div h2, .content div h3{ color: #1c1c1c; text-align:left; } .content div p { font-size: 14px; line-height: 22px; text-align: left; margin: 0; color: #777; } <div class="content2"> <h3><span class="black"> services </span></h3> <div class="container"> <!-- codrops top bar --> <section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">print</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">direct mail</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">hand finishing</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">fullfilment</label> <input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" /> <label for="tab-5" class="tab-label-5">pos</label> <div class="clear-shadow"></div> <div class="content"> <div class="content-1"> <h2>let our print capture customers’ imagination.</h2> <p>if need creative, concise , competitively priced print should talking expressive print. either supply own artwork or make use of our full design , copy writing service. whatever print requirements brochures, inserts, questionnaires, leaflets or envelopes can offer highly competitive prices outstanding print quality. full creative , design service offered compliment existing activity or devise fresh new brand or campaign. aim understand requirements , translate them great design strong copy while being environmentally friendly, cost effective , delivering schedule.</p> </div> <div class="content-2"> <h2>excellent response rates , return on investment.</h2> <p>expressive print handle low , high volume direct mail campaigns making use of latest developments ensure mailings relevant , results driven. better targeted direct mail seeing resurgence apathy email communication grows in b2b sector. strive ensure data selected , targeted , visual presentation highest standard ensure excellent response rates , return on investment each campaign.</p> </div> <div class="content-3"> <h2>hand finishing</h2> <p>many campaigns require element of hand finishing before mailing such attachment of business cards or cd. expressive print implement application suitable mail piece selecting correct tack , materials ensure visual finish. don’t allow mailing piece spoilt @ final stage unsympathetic finishing.</p> </div> <div class="content-4"> <h2>fullfilment</h2> <p>whatever project involves expressive print experienced in delivering you. daily pick , pack requirements contract packing , bulk despatches have ideal space work in - clean, modern , secure premises packing teams crb checked, robust stock control systems, comprehensive insurance cover , expertise. ensures right things packed in right order , sent right people – simple critical. selecting fulfilment partner has strong systems full accountability , customer service resource vital ensure product’s success.</p> </div> <div class="content-5"> <h2>pos & kit collation</h2> <p>handling large despatch projects education, banking , drinks industry, expressive print ensure each project has it’s own documented process system full track , trace on deliveries. source , supply specialist packaging fragile or odd shaped items , test packs , packaging prior despatch ensure delivery in pristine condition.</p> </div> </div></div> </div>
now define your .tabs background-size: 25% 100% as this
.tabs { background-size: 25% 100%; // add line , adjust background size according layout } 
