Help me, How to edit css design for my site on firefox browser?

shopplier.com

It show not like on IE browser.

However, I try to change on margin, padding and more.

But it can't to changing a position.

This is my code

*  {
font-size : 100%;
margin : 0;
margin-left : 0px;
padding : 0;
line-height : 1.4em;
}

body  {
background-image : url(bg.jpg);
background-color : #275C88;
background-repeat: repeat-x;
font : 70% Century Gothic, Helvetica, sans-serif;
color : #000000;
}

#xxx-wrapper  {
display : block;
width : 1000px;
}

html body #xxx-wrapper  {
display: block;
width: 1000px;
margin: 0 auto;
}

*:first-child+html #xxx-wrapper  {
display: block;
width: 1000px;
margin: 0 auto;
}

*:first-child+html #xxx-header  {
clear: both;
background-position: center top;
float: left;
margin-top: -1px;
width: 900px;
height: 144px;
padding: 0;
margin-left: 50px;
}

html body #xxx-header  {
clear: both;
margin-top: -1px;
background-position: center top;
float: left;
width: 900px;
height: 144px;
padding: 0;
margin-left: 25px;
}

html body #xxx-content  {
width : 900px;
clear: both;
float: left;
padding: 0px;
margin-top: -4px;
margin-right: auto;
margin-bottom: 0;
margin-left: 25px;
background: #ffffff;
}

*:first-child+html #xxx-content  {
width: 900px;
clear: both;
float: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 50px;
background: #ffffff;
}

html body #xxx-content a  {
font-size: 12px;
}

*:first-child+html #xxx-content a  {
font-size: 12px;
}

#xxx-content a  {
font-size: 12px;
}

/* --------- Logo ------------ */

#xxx-header p  {
bottom: 0;
float: left;
padding-left: 30px;
padding-top: 40px;
background:none;
}

#xxx-header a  {color:#fff;text-decoration:none;}

#xxx-header a:hover  {color:#fff;text-decoration:none;}

.logotext strong  {
font-size:30px;
color:#fff;
font-weight:normal;
padding: 0;
margin: 0;
}

.logotext2  {font-size:12px;color:#fff;padding-top:5px;width:220px;display:none;}

*:first-child+html #xxx-right tr td tr td  {
text-align: left;
}

html body #xxx-right tr td tr td  {
text-align: left;
}

#xxx-right  {
float: left;
display: block;
width: 610px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
padding-left: 10px;
padding-right: 5px;
margin-left: 15px;
text-align: left;
}

#xxx-right li  {
list-style:none;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 25px;
}

#xxx-right a:hover  {text-decoration: underline;}

#xxx-left  {
float: right;
width: 225px;
margin-left: 0px;
margin-right: 10px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin-top:30px;
margin-bottom:20px;
}

html body #xxx-left  {
float: right;
width: 225px;
margin-left: 0px;
margin-right: 6px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin-top: 30px;
margin-bottom:20px;
}

#xxx-right  {
text-align: left;
}

html body #xxx-right .postinfo  {
width: 580px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 10px;
margin: 0px;
background-color: #f6faff;
border: 1px solid #dfeaf7;
color: #555555;
padding-left: 20px;
text-align: left;
font-size: 11px;
}

#xxx-right .postinfo  {
width: 600px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 10px;
margin: 0px;
background-color: #f6faff;
border: 1px solid #dfeaf7;
color: #555555;
padding-left: 20px;
text-align: left;
font-size: 11px;
}

#xxx-left h2  {
font: 1.00em Century Gothic, Helvetica, sans-serif;
font-size: 13px;
text-transform: none;
color: #000000;
font-weight: bold;
padding-top: 9px;
padding-bottom: 12px;
padding-left: 14px;
margin-left: -30px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -31px;
background: #cacccf;
background-repeat: repeat-x;
background-position: left bottom;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
}

*:first-child+html #xxx-left h2  {
font: 1.00em Century Gothic, Helvetica, sans-serif;
font-size: 13px;
text-transform: none;
color: #000000;
font-weight: bold;
padding-top: 9px;
padding-bottom: 12px;
padding-left: 14px;
margin-left:-30px;
margin-right:0px;
margin-bottom:20px;
margin-top:-32px;
background: #cacccf;
background-repeat: repeat-x;
background-position: left bottom;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
}

html body #xxx-left h2  {
font: 1.00em Century Gothic, Helvetica, sans-serif;
font-size: 13px;
text-transform: none;
color: #000000;
font-weight: bold;
padding-top: 9px;
padding-bottom: 12px;
padding-left: 14px;
margin-left: -30px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -32px;
background: #cacccf;
background-repeat: repeat-x;
background-position: left bottom;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #cccccc;
}

/* lists */

ul  {
margin-top: 0;
margin-right: 0;
margin-bottom: 24px;
margin-left: 15px;
text-align: left;
}

ol  {margin: 0 0 24px 9px;}

#xxx-left ul li  {margin: 0 8px 0 5px;}

#xxx-left li  {margin: 0 24px 0 14px;}

#xxx-left li a  {margin-left: 0px;}

#phasis-left li a:hover  {text-decoration:none;}

/* links */

a, a:visited  {color: #004b91; text-decoration: none;}

p a:hover, ul a:hover {}

#xxx-content p a:hover, #content ul a:hover  {background-color: #f6faff;}

#xxx-footer p a:hover, #content ul a:hover  {background-color: #6a9ed2;}

/* forms */

form {margin: 0 0 18px 0;}

#xxx-searchsubmit  {position: absolute;}

#xxx-s  {width: 130px; padding: 2px; border: 1px solid #B9C3D1; background: #CAD6E1; color: #32474B; margin-right: 2px;}

select, .field  {width: 157px; margin: 0 0 4px 0; color: #32474B;}

.field  {padding: 2px; width: 153px;}

textarea  {padding: 2px; width: 308px; font: 1em Century Gothic, Helvetica, sans-serif;}

select option  {padding: 1px;}

#xxx-submit  {padding: 3px;}

/* footer */

#xxx-footer  {
background-color: #ffffff;
}

*:first-child+html #xxx-footer  {
clear: both;
display: block;
width: 900px;
background: #6a9ed2;
border-bottom: 15px solid #6a9ed2;
text-align: left;
float: left;
background-repeat: repeat-x;
padding-top: 0px;
color: #fefefe;
font-size: 12px;
}

html body #xxx-footer  {
clear: both;
display: block;
width: 900px;
background: #6a9ed2;
border-bottom: 10px solid #6a9ed2;
text-align: left;
float: left;
background-repeat: repeat-x;
padding-top: 0px;
color: #fefefe;
font-size: 12px;
}

#xxx-footer  {
clear: both;
display: block;
width: 900px;
background: #6a9ed2;
border-bottom: 15px solid #6a9ed2;
text-align: left;
float: left;
background-repeat: repeat-x;
padding-top: 0px;
color: #fefefe;
font-size: 12px;
}

#xxx-footer-top  {display: block; width: 750px; height: 15px; background-color: #6a9ed2;}

#xxx-footer p  {color: #fefefe; padding: 0 37px 7px 37px;}

#xxx-footer a, #footer a:visited  {color: #fefefe; text-decoration:none;}

#xxx-footer a:hover  {background-color: #146eb9;}

Code (markup):

 

Its too simple, download Stylizer ultimate (around 10 MB), you will fully functional 14 days trial edition, It has option to switch between IE and firefox. Open your site in Stylizer window, it will give all the CSS elements, you can also use selection tool a red rectangle, which highlights the particular part of the page were the CSS code applies. Try it I can even give you full edition if you are satisfied with that

 

don't see problems, I think that some tiny differences should not bother you, as browsers display html differently, and usually people prefer writing different style sheets for different browsers, especially for ie6

 

Validate your markup for that list of 137 html errors and start using FF as your test browser. Never, ever use IE as your test bed. It will screw you up more than you can imagine.

 

Stylizer ultimate is the best and the simple solution for doing this . Open your site in stylizer window and it will help you out.