@ronpat ; are you seeing the issue too with the tabs? I also posted on a different question on a different forum and they replied with this url, the wiered thing is that the tabs there work:
http://codepen.io/jiri/full/kHJDe
but as soon as I place the code from above into my codepen and ebay account I still get the same problem with the tabs not working.
what’s up with that?
None there to my taste. What I want to know is how to make professional designs for ebay and sell them or become an ebay designer
Does it work for you in this form?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table#maintable {
background:#F7F6F6;
text-align:center;
margin-left:auto;
margin-right:auto;
width:960px;
border-color: #BDBDBD;
border-width: 1px 1px 1px 1px;
border-style: solid;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 15px #888;
}
tr { border-style:none }
td { border-style:none }
img { border:none }
article.newtabs {
position: relative;
display: block;
width: 960px;
height: 15em;
margin-top:3em;
}
article.newtabs section {
width:900px;
position: absolute;
display: block;
height: 14em;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
background: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/tabpanel3.png);
background-position: center;
background-repeat: no-repeat;
z-index: 0;
margin: 0 0 0 14px;
}
.tab-content {overflow:auto;height:13em;padding:0 1em;}
article.newtabs section:first-child{z-index: 1;}
article.newtabs section h2 {
position: absolute;
font-size: 18px;
font-weight: normal;
width: 240px;
height: 1.8em;
top: -1.8em;
left: -2px;
padding: 0;
margin: 0;
color: #999;
background-color: #f1f2f3;
border-left:2px solid #C6CBD0;
border-top:1px solid #C6CBD0;
border-right:2px solid #C6CBD0;
border-radius: 5px 5px 0 0;
}
article.newtabs section:nth-child(2) h2 {left: 248px;}
article.newtabs section:nth-child(3) h2 {left: 498px;}
article.newtabs section h2 a {
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.newtabs section:target,
article.newtabs section:target h2 {
color: #333;
background-color: #fff;
z-index: 2;
}
article.newtabs section,
article.newtabs section h2 {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
</style>
</head>
<body>
<table id="maintable" style="background: #F7F6F6; text-align: center; margin-left:auto; margin-left:auto; width: 960px; border-color: #BDBDBD; border-width: 1px 1px 1px 1px; border-style: solid; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 15px #888;">
<tbody><tr>
<td colspan="2"> </td>
</tr><tr><td width="460px">
<table id="countergrid">
<tbody><tr>
<td colspan="6">
<a href="getdeal.php"><img src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/bluegetitnow.png" style="border:none"></a>
</td>
</tr> <tr style="font-weight:bold; color:#000000; font-size:13px;">
<td>DEAL PRICE<br><span style="color:#7C8C91; font-weight:bold; font-size:24px;">£29.99</span></td>
<td><img src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/divide.gif"></td>
<td>REG. PRICE<br><span style="text-decoration:line-through; color:#97A3A6; font-weight:bold; font-size:24px;"> £69.99 </span></td>
<td><img src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/divide.gif"></td>
<td>YOU SAVE<br><span style="color:#EB4B1C; font-weight:bold; font-size:24px;">57%</span></td>
</tr>
<tr>
<td colspan="6" style="font-weight:bold; font-size:10px; color:#383838;">
</td>
</tr>
<tr>
<td id="qtycounter" colspan="6" style="vertical-align: bottom; height:100px; width:375px; background: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/qtyframe.png); background-position: center; background-repeat: no-repeat;">
<img src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/4.jpg" style="border:none;"><img src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/9.jpg" style="border:none;">
</td>
</tr></tbody></table>
</td>
<td style="text-align:right; padding-right:8px;"><div style="text-align:center; width: 480px; height:270px; margin-left:auto; margin-right:auto;"><img style=" border:none; max-height:100%; max-width:100%;" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/deal.jpg"></div></td>
</tr>
<tr>
<td colspan="2" style="vertical-align:middle; text-align:left; height:74px; width:931px; background: url(http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/socialpanel.png); background-position: center; background-repeat: no-repeat;" align="center">
<table style="width:931px; position: relative; top: 54%; margin-top: -6%; " cellpadding="0">
<tbody><tr>
<td style="width:50%">
<img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/sharedeal.png">
<a class="sharepopup" href="http://twitter.com/share?text=Just%20Picked%20Up%20A%20Great%20Deal:%20ukdesignbay%20-%20http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay"><img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/twitter.png"></a>
<a class="sharepopup" href="http://www.facebook.com/sharer.php?s=100&p[title]=Amazing+Deal%21&p[summary]=Check+Out+This+Deal+%3A+ukdesignbay&p=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay"><img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/facebook.png"></a>
<a class="sharepopup" id="pin" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay&media=http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/deal.jpg&" target="_blank" count-layout="none"><img src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/pinterest.png" title="Pin It" border="0"></a>
<a class="sharepopup" href="https://plus.google.com/share?url=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay"><img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/gplus.png"></a>
<a class="sharepopup" id="su" href="https://www.stumbleupon.com/submit?url=http%3A%2F%2Fmuslimahwebdesign.co.uk%2Fdeals%2Fukdesignbay"><img style="border:0; cursor:pointer" src="http://ukdesignbay.co.uk/template1/wp-content/themes/maestro/assets/images/stumble.png"></a>
</td><td></td> </tr>
</tbody></table>
</td></tr>
<tr>
<td colspan="2">
<table style="width:928px; text-align:left; margin-left:auto; margin-right:auto;">
<tbody><tr>
<td style="max-width:926px; overflow:none;">
<article class="newtabs">
<section id="newtab1">
<h2><a href="#newtab1">1 - Choose A Template</a></h2>
<div class="tab-content">
<p>Pick the super modern design that will make you stand out from the crowd and will increase your sales by 33% Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </div>
</p>
</section>
<section id="newtab2">
<h2><a href="#newtab2">2 - Easily Customise It</a></h2>
<div class="tab-content">
<p>Sign into your very own website to manage, edit and view your template. Simply copy and paste the code generated into ebay to add your listing with your super professional template</p></div>
</section>
<section id="newtab3">
<h2><a href="#newtab3">3 - Enjoy Your Free Hosting</a></h2>
<div class="tab-content">
<p>Have as many photos or videos to your listing as you want, no extra charge, all hosted by you!</p>
</div>
</section>
</article>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
Do you mean with the head and body etc included?
I’ve tried it but no, it’s still the same. If I use the code in komodo edit, it works fine. If I then use the file extention ( ie file:///C:/Users/hantaah/Documents/ukdesignbay/templates/ebay_listing_ukdb2.html#newtab1 ) and open it in my browser it works.
When I copy and paste it into code pen or ebay listing it doesn’t work.
If I view the codepen or ebay urls’s in browseemall ( crossbrowser tester ) still they don’t work
I’ve listed a test listing on ebay. Is it working for you as it isn’t for me?
http://www.ebay.co.uk/itm/190888148322?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649
After re checking the ebay test listing the tabs are working but the style which centres things is not.
I also have another question about styling.
I want to put this:
article.newtabs section { min-height: 323px; }
but when I do it takes the tabs section out of the containing area like this:
How is that fixed?
You’ve lost me on both questions. The layout looks centered to me, and the min-height code seems to work fine to me.
I’ve added an image here to show where the tabs are out of the container
Hm, what browser is that in?
that’s in forefox but it’s the same in all browsers
do you see that here? http://www.ebay.co.uk/itm/190888148322?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649
Hi guys
Does anybody see what is in the pic ( regarding the slider content going out of the container behind it ) here: http://www.ebay.co.uk/itm/190888148322?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649
if so what is the fix?
I do not see it in FF, Chrome, or Opera. IE8 simply shows a long page and no tabs, which is fine. Not tried in IE10.