[mineallmine]

Hi all,

I'm working on a template, and the idea is that it'll be used as an ebay listing when finished. I've done this successfully with html before, although have run into a few formatting problems that that I am using css. Please note that I don't really know anything about css, and have just found my way around it for the purpose of finishing this template! The template looks fine on my domain but goes skiw-if when put on ebay.

Take a look below and you'll see what I mean:
Index on my page: http://www.tradingho...partsandspares/
Ebay page: http://cgi.ebay.co.u...=item4cecf83952

CSS copied below:
[*
{
margin: 0px;
padding: 0px;
}

a:link {
color: #7BBB15;
}

a:hover {
text-decoration: none;
color: #FF0000;
}

a:visited {
color: #7BBB15;
}

body {

background: #D2D2D2 url(images/back_all.gif) repeat-x;
font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}

#content
{
margin: 0 auto;
width: 765px;
text-align: left;
}

#back
{
width: 765px;
}

#header {
height: 103px;
text-align: left;
}

#menu1
{
width: 695px;
height: 45px;
padding-left: 70px;
}

#menu ul {
list-style: none;
}

#menu li {

display: inline;

}

#menu a {
float: left;
width: 79px;
height: 32px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
}

#menu a:hover {
width: 79px;
height: 32px;
color: #ffffff;
text-decoration: underline;
}

#button1 a
{
background: url(images/button1.png) no-repeat;
height: 25px;
width: 125px;
padding-top: 20px;
}
#button1 a:hover
{
background: url(images/button1_r.png) no-repeat;
height: 34px;
width: 125px;
margin-top: -9px;
}

#button2 a
{
background: url(images/button2.png) no-repeat;
height: 25px;
width: 125px;
padding-top: 20px;
}
#button2 a:hover
{
background: url(images/button2_r.png) no-repeat;
height: 34px;
width: 125px;
margin-top: -9px;
}

#button3 a
{
background: url(images/button3.png) no-repeat;
height: 25px;
width: 125px;
padding-top: 20px;
}
#button3 a:hover
{
background: url(images/button3_r.png) no-repeat;
height: 34px;
width: 125px;
margin-top: -9px;
}
#button4 a
{
background: url(images/button4.png) no-repeat;
height: 25px;
width: 125px;
padding-top: 20px;
}
#button4 a:hover
{
background: url(images/button4_r.png) no-repeat;
height: 34px;
width: 125px;
margin-top: -9px;
}
#button5 a
{
background: url(images/button5.png) no-repeat;
height: 25px;
width: 125px;
padding-top: 20px;
}
#button5 a:hover
{
background: url(images/button5_r.png) no-repeat;
height: 34px;
width: 125px;
margin-top: -9px;
}


#logo {
width: 745px;
height: 48px;
text-align: left;
padding-left: 20px;
padding-top: 10px;
}


#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #0066cc;
}

#logo H1, #logo H2
{
line-height:24px;
}

#logo H2 a
{
font-size: 16px;
color: #FFFFFF;
}

#top
{
background: url(images/top.gif) no-repeat;
height: 10px;
}

#main
{
width: 765px;
background: #FFFFFF;
}

#boxes
{
width: 765px;
height: 212px;
margin-bottom: 10px;
}

#box1
{
width: 203px;
height: 203px;
float: left;
font-size: 11px;
background: url(images/box1.jpg) no-repeat;
}

#box2
{
width: 203px;
height: 203px;
float: left;
font-size: 11px;
background: url(images/box2.jpg) no-repeat;
}

#box3
{
width: 203px;
height: 203px;
float: left;
font-size: 11px;
background: url(images/box3.jpg) no-repeat;
}

#box1 h2, #box2 h2, #box3 h2
{
color: #FFFFFF;
font-size: 36px;
text-align: center;
font-weight: bold;
padding-bottom: 10px;
}

#box1 h3, #box2 h3, #box3 h3
{
color: #FFFFFF;
font-size: 28px;
text-align: center;
font-weight: bold;
padding-bottom: 10px;
}

#box1 h4, #box2 h4, #box3 h4
{
color: #999999;
font-size: 16px;
text-align: center;
font-weight: bold;
padding-bottom: 10px;
}

#box1, #box2, #box3
{
color: #000000;
margin-left: 16px;
margin-top: 10px;
padding: 15px;
}

#top1
{
width: 733px;
background: url(images/top1.gif) no-repeat;
height: 15px;
}

#bottom1
{
width: 733px;
background: url(images/bottom1.gif) no-repeat top;
height: 11px;
}

#page
{
width: 733px;
margin: 0 auto;
}

#back1
{
background: #ECECEC;
}

#left
{
width: 207px;
margin-left: 10px;
}

#left H3
{
width: 182px;
height: 46px;
font-size: 14px;
font-weight: bold;
padding-left: 25px;
padding-top: 10px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) repeat-x
}

#left ul {
list-style: none;

}

#left li ul {
border: 0px;
margin-left: 20px;
margin-bottom: 10px;
}

#left li li {
padding: 4px 10px;
background: url(images/small.gif) no-repeat left;
}

#left a {
color: #7BBB15;
}
#left a:visited {
color: #7BBB15;
}

#left p
{
padding: 10px;
}

#calendar1 {
padding: 0 10px 20px 10px;
}

#calendar table {
width: 100%;
text-align: center;
}

#calendar thead {

}

#calendar tbody td {
border: 1px solid #F1F1F1;
}

#calendar #prev {
text-align: left;
}

#calendar #next {
text-align: right;
}

#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}

#calendar #now {
background: #696969;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff
}

#right
{
float: right;
width: 450px;
padding-right: 10px;
}

#right H4
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #7BBB15;
}

#right a
{
color: #7BBB15;
text-decoration: none;
}

#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}

#right h2 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #7BBB15;
text-align: center;
}

#right h3 {
margin: 0;
padding: 0;
padding-top: 0px;
color: #FF3300;
text-align: center;
}

#right ol, #right ul
{
margin-left: 30px;
}

.date {
text-align: right;
color: #808080;
font-size: 11px;
}

.date a {
color: #D72020;
}



#footer {
height: 29px;
clear: both;
padding-top: 20px;
padding-bottom: 10px;
background: url(images/bottom.gif) no-repeat top;
}

#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #666666;
}

#footer a {
color: #666666;
}

]

I thought I'd try asking somewhere where people know what they're on about, rather than spending the next 3 hours using trial and error to try and sort it out!

Any suggestions gratefully appreciated! As previously stated, I'm a complete novice at css so please go easy!

Thanks

Vic

[JamesW]

I just looked at both versions, and the eBay one looks fine to me..

[MrBrightside]

The eBay layout breaks because of you selecting HTML elements such as a, body and * without a parent selector.

Ideally what you'd do is wrap your entire template (which shouldn't have a <body> tag anyway) in a div.

E.g.

<div class="my_template_wrapper">
<!-- put all your template code here -->
</div><!-- close the div-->

Then you'd apply your style only to elements inside that div e.g:

.my_template_wrapper {
background: #D2D2D2 url(images/back_all.gif) repeat-x;
font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}

.my_template_wrapper * {
margin: 0px;
padding: 0px;
}

.my_template_wrapper a:link {
color: #7BBB15;
}

Having .my_template_wrapper before the "*" and "a:link" means you're only address elements within the my_template_wrapper div.

In your method you don't specify a parent, so it applies your style to the entire document and it ends up overriding the eBay default styles.

[mineallmine]

Thanks for your advise Mr Brightside.

As I said in my first post, I'm a complete novice so please bear with me!

I've included both of the examples you gave me within the html and css as you've suggested although this hasn't made any difference so I'm clearly not doing it properly.

I'm unsure how the wrapper works so if you had the time to explain it a little, I may be able to see where I'm going wrong.

I'm glad however that someone's been able to see that it is a realatively straight forward issue!

Thanks again!