Os explico un poco el problema. Tengo un css que lo aplico a una pagina web que estoy "construyendo" pero resulta que mientras trabajo en mi equipo se ve perfecto. Lo tengo en alta resolución, el problema esta cuando la subo al ftp, y la veo desde otro equipo, pues se ve algo mas "estrecha" aunque con una calidad buena, se que el problema está en el css, y he intentado modificar todas las proporciones. pero no encuento la solucion.
Os adjunto el codigo por si alguno pudiera orientarme.
Citar
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
/* Global properties ======================================================== */
body {
background:url(../images/main-bg.jpg) no-repeat 50% 0 #000;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.125em;
color:#464646;
}
html { min-width:980px;}
html, body { height:100%;}
/* Global Structure ============================================================= */
#main {
margin: 0 auto;
position: relative;
width: 896px;
font-size:.75em;
}
/* Header */
header{
height:146px;
position:relative;
}
/* Banners */
#banners {
height:261px;
overflow:hidden;
}
/* Content */
section#content {
float: left;
width:490px;
}
/* Sidebar */
aside{
float: left;
width:202px;
}
aside .indent {
padding:10px 20px 23px 26px;
}
/* Footer */
footer{
padding:25px 25px 25px 25px;
position:relative;
height:1%;
}
/* Left & Right alignment */
.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}
.col-1, .col-2, .col-3 { float:left;}
.alignright { text-align:right;}
.aligncenter { text-align:center;}
.wrapper {
width:100%;
overflow:hidden;
}
* html+.wrapper-ie {
width:100%;
overflow:hidden;
}
/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 0 5px; }
/*----- form defaults -----*/
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
/*----- other -----*/
.img-indent {
margin:0 20px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:17px;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {margin-bottom:18px;}
.p1 { margin-bottom:9px;}
.p2 { margin-bottom:18px;}
.p3 { margin-bottom:27px;}
/*----- txt, links, lines, titles -----*/
a {
color:#fff;
outline:none;
}
a:hover{
text-decoration:none;
}
h2 {
background:url(../images/title-bg1.gif) 0 0 #111410;
position:relative;
margin:0 -19px 22px -19px;
padding:0 0 0 20px;
color:#fff;
text-transform:uppercase;
height:39px;
line-height:34px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
}
h3 {
background:url(../images/title-bg.png) no-repeat 0 0;
height:45px;
color:#000;
line-height:45px;
padding-left:26px;
text-transform:uppercase;
margin-bottom:4px;
overflow:hidden;
}
h4 {
font-size:13px;
font-weight:normal;
color:#c3c2c2;
margin-bottom:7px;
}
h5 {
}
h6 {
font-size:1em;
color:#c52600;
}
h6 a {
color:#c52600 !important;
text-decoration:underline !important;
}
span.price {
font-size:16px;
line-height:27px;
color:#c52600;
margin-right:27px;
}
.button {
float:left;
background:url(../images/arrow2.gif) no-repeat 9px 50% #000;
padding:5px 12px 5px 20px;
color:#fff;
font-weight:bold;
text-decoration:none;
position:relative;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
}
.button:hover {
background:url(../images/arrow2.gif) no-repeat 9px 50% #fff;
color:#000;
}
.line-hor {
background:url(../images/line-hor.gif) 0 0 repeat-x;
height:1px;
overflow:hidden;
font-size:0;
line-height:0;
margin:25px 0 25px 0;
}
/*==================boxes====================*/
.box {
background:url(../images/box-bg.gif) 0 0 #191819;
position:relative;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
margin-bottom:4px;
}
.box .inner {
padding:18px 15px 20px 20px;
}
.box .inner1 {
padding:6px 25px 30px 25px;
}
.address {
float:left;
}
.address dt {
margin-bottom:18px;
}
.address dd {
clear:both;
}
.address dd span {
float:left;
width:75px;
}
/*===== header =====*/
header .logo {
position:absolute;
left:-15px;
top:23px;
}
header nav {
position:absolute;
left:0;
top:91px;
background:url(../images/nav-bg.gif) 0 0 repeat-x;
height:45px;
width:895px;
font-size:13px;
text-align:center;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
}
header nav ul {
padding:13px 0 0 0;
}
header nav li {
display:inline;
color:#fff;
}
header nav li a {
color:#fff;
text-decoration:none;
padding:0 33px 0 30px;
}
header nav li a:hover,
header nav li a.current {
text-decoration:underline;
}
header .language {
color:#fff;
padding:9px 9px 9px 10px;
position:absolute;
right:0;
top:33px;
background-color: rgba(0, 0, 0, 0.5); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
-pie-background: linear-gradient(#000, #000 50%);
}
header .language img {
position:relative;
top:3px;
margin-left:3px;
}
/*===== aside =====*/
aside ul.last {
padding-bottom:0;
}
aside ul li {
background:url(../images/arrow1.gif) no-repeat 0 7px;
padding:0 0 8px 14px;
}
aside ul li a {
color:#c3c2c2;
text-decoration:none;
}
aside ul li a:hover {
color:#fff;
text-decoration:underline;
}
.new_product {
padding:0 0 0 0;
margin-bottom:-3px;
}
.new_product li {
font-size:13px;
color:#c3c2c2;
background:none;
padding:0 0 6px 0;
}
.new_product li.name {
padding-bottom:2px;
}
.new_product li.price {
font-size:16px;
color:#c52600;
padding-bottom:0;
}
.list1 {
padding-bottom:0;
}
.list1 li {
padding:0;
background:url(../images/line-hor.gif) 0 100% repeat-x;
padding:0 0 17px 0;
margin-bottom:17px;
color:#fff;
}
.list1 li.last {
background:none;
margin-bottom:0;
padding-bottom:0;
}
/*===== content =====*/
#content {
}
.pagination {
padding:0 0 15px 0;
width:100%;
overflow:hidden;
color:#6e6e6e;
}
.pagination.last {
padding-bottom:0;
}
.special {
width:100%;
overflow:hidden;
}
.special li {
float:left;
width:162px;
margin-right:86px;
padding-bottom:63px;
}
.special li.even {
margin-right:0;
}
.special li span.price {
margin:0;
float:right;
}
dl.faq dt {
font-weight:bold;
color:#fff;
}
dl.faq dd {
margin-bottom:18px;
}
dl.faq dd.last {
margin-bottom:9px;
}
/*===== footer =====*/
footer nav ul {
margin-left:-7px;
}
footer nav ul li {
display:inline;
color:#1f1f1f;
}
footer nav ul li a {
color:#464646;
text-decoration:none;
padding:0 9px 0 6px;
}
footer nav ul li a:hover {
color:#fff;
}
footer .billing {
display:block;
position:absolute;
right:25px;
top:25px;
}
/*----- forms -----*/
#login fieldset {
border:none;
}
#login .field {
padding-top:3px;
}
#login input.text {
width:115px;
background:#242424;
border:1px solid #000;
border-right:0;
color:#fff;
}
#login input.submit {
background:url(../images/submit.gif) no-repeat 0 0;
border:none;
width:28px;
height:19px;
cursor:pointer;
}
#currencies fieldset {
border:none;
}
#currencies .field {
padding-top:3px;
}
#currencies select {
width:152px;
background:#242424;
border:1px solid #000;
border-right:0;
color:#fff;
}
#contacts-form fieldset {
border:none;
width:100%;
overflow:hidden;
display:block;
padding-bottom:36px;
}
#contacts-form .col-1 {
width:210px !important;
margin-right:0 !important;
}
#contacts-form .col-2 {
width:210px !important;
margin-right:0 !important;
}
#contacts-form label {
display:block;
height:53px;
overflow:hidden;
}
#contacts-form input {
color:#111;
border:1px solid #a09b96;
background:#fff;
padding:3px 0 3px 5px;
width:170px;
}
#contacts-form textarea {
color:#111;
border:1px solid #a09b96;
background:#fff;
padding:3px 0 3px 5px;
width:200px;
overflow:auto;
height:120px;
margin-bottom:18px;
}
#contacts-form .button {
float:right;
margin-left:11px;
}
/*==========================================*/
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
/* Global properties ======================================================== */
body {
background:url(../images/main-bg.jpg) no-repeat 50% 0 #000;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.125em;
color:#464646;
}
html { min-width:980px;}
html, body { height:100%;}
/* Global Structure ============================================================= */
#main {
margin: 0 auto;
position: relative;
width: 896px;
font-size:.75em;
}
/* Header */
header{
height:146px;
position:relative;
}
/* Banners */
#banners {
height:261px;
overflow:hidden;
}
/* Content */
section#content {
float: left;
width:490px;
}
/* Sidebar */
aside{
float: left;
width:202px;
}
aside .indent {
padding:10px 20px 23px 26px;
}
/* Footer */
footer{
padding:25px 25px 25px 25px;
position:relative;
height:1%;
}
/* Left & Right alignment */
.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}
.col-1, .col-2, .col-3 { float:left;}
.alignright { text-align:right;}
.aligncenter { text-align:center;}
.wrapper {
width:100%;
overflow:hidden;
}
* html+.wrapper-ie {
width:100%;
overflow:hidden;
}
/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 0 5px; }
/*----- form defaults -----*/
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
/*----- other -----*/
.img-indent {
margin:0 20px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:17px;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {margin-bottom:18px;}
.p1 { margin-bottom:9px;}
.p2 { margin-bottom:18px;}
.p3 { margin-bottom:27px;}
/*----- txt, links, lines, titles -----*/
a {
color:#fff;
outline:none;
}
a:hover{
text-decoration:none;
}
h2 {
background:url(../images/title-bg1.gif) 0 0 #111410;
position:relative;
margin:0 -19px 22px -19px;
padding:0 0 0 20px;
color:#fff;
text-transform:uppercase;
height:39px;
line-height:34px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
}
h3 {
background:url(../images/title-bg.png) no-repeat 0 0;
height:45px;
color:#000;
line-height:45px;
padding-left:26px;
text-transform:uppercase;
margin-bottom:4px;
overflow:hidden;
}
h4 {
font-size:13px;
font-weight:normal;
color:#c3c2c2;
margin-bottom:7px;
}
h5 {
}
h6 {
font-size:1em;
color:#c52600;
}
h6 a {
color:#c52600 !important;
text-decoration:underline !important;
}
span.price {
font-size:16px;
line-height:27px;
color:#c52600;
margin-right:27px;
}
.button {
float:left;
background:url(../images/arrow2.gif) no-repeat 9px 50% #000;
padding:5px 12px 5px 20px;
color:#fff;
font-weight:bold;
text-decoration:none;
position:relative;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
}
.button:hover {
background:url(../images/arrow2.gif) no-repeat 9px 50% #fff;
color:#000;
}
.line-hor {
background:url(../images/line-hor.gif) 0 0 repeat-x;
height:1px;
overflow:hidden;
font-size:0;
line-height:0;
margin:25px 0 25px 0;
}
/*==================boxes====================*/
.box {
background:url(../images/box-bg.gif) 0 0 #191819;
position:relative;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
margin-bottom:4px;
}
.box .inner {
padding:18px 15px 20px 20px;
}
.box .inner1 {
padding:6px 25px 30px 25px;
}
.address {
float:left;
}
.address dt {
margin-bottom:18px;
}
.address dd {
clear:both;
}
.address dd span {
float:left;
width:75px;
}
/*===== header =====*/
header .logo {
position:absolute;
left:-15px;
top:23px;
}
header nav {
position:absolute;
left:0;
top:91px;
background:url(../images/nav-bg.gif) 0 0 repeat-x;
height:45px;
width:895px;
font-size:13px;
text-align:center;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
}
header nav ul {
padding:13px 0 0 0;
}
header nav li {
display:inline;
color:#fff;
}
header nav li a {
color:#fff;
text-decoration:none;
padding:0 33px 0 30px;
}
header nav li a:hover,
header nav li a.current {
text-decoration:underline;
}
header .language {
color:#fff;
padding:9px 9px 9px 10px;
position:absolute;
right:0;
top:33px;
background-color: rgba(0, 0, 0, 0.5); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
behavior:url(js/PIE.htc);
-pie-background: linear-gradient(#000, #000 50%);
}
header .language img {
position:relative;
top:3px;
margin-left:3px;
}
/*===== aside =====*/
aside ul.last {
padding-bottom:0;
}
aside ul li {
background:url(../images/arrow1.gif) no-repeat 0 7px;
padding:0 0 8px 14px;
}
aside ul li a {
color:#c3c2c2;
text-decoration:none;
}
aside ul li a:hover {
color:#fff;
text-decoration:underline;
}
.new_product {
padding:0 0 0 0;
margin-bottom:-3px;
}
.new_product li {
font-size:13px;
color:#c3c2c2;
background:none;
padding:0 0 6px 0;
}
.new_product li.name {
padding-bottom:2px;
}
.new_product li.price {
font-size:16px;
color:#c52600;
padding-bottom:0;
}
.list1 {
padding-bottom:0;
}
.list1 li {
padding:0;
background:url(../images/line-hor.gif) 0 100% repeat-x;
padding:0 0 17px 0;
margin-bottom:17px;
color:#fff;
}
.list1 li.last {
background:none;
margin-bottom:0;
padding-bottom:0;
}
/*===== content =====*/
#content {
}
.pagination {
padding:0 0 15px 0;
width:100%;
overflow:hidden;
color:#6e6e6e;
}
.pagination.last {
padding-bottom:0;
}
.special {
width:100%;
overflow:hidden;
}
.special li {
float:left;
width:162px;
margin-right:86px;
padding-bottom:63px;
}
.special li.even {
margin-right:0;
}
.special li span.price {
margin:0;
float:right;
}
dl.faq dt {
font-weight:bold;
color:#fff;
}
dl.faq dd {
margin-bottom:18px;
}
dl.faq dd.last {
margin-bottom:9px;
}
/*===== footer =====*/
footer nav ul {
margin-left:-7px;
}
footer nav ul li {
display:inline;
color:#1f1f1f;
}
footer nav ul li a {
color:#464646;
text-decoration:none;
padding:0 9px 0 6px;
}
footer nav ul li a:hover {
color:#fff;
}
footer .billing {
display:block;
position:absolute;
right:25px;
top:25px;
}
/*----- forms -----*/
#login fieldset {
border:none;
}
#login .field {
padding-top:3px;
}
#login input.text {
width:115px;
background:#242424;
border:1px solid #000;
border-right:0;
color:#fff;
}
#login input.submit {
background:url(../images/submit.gif) no-repeat 0 0;
border:none;
width:28px;
height:19px;
cursor:pointer;
}
#currencies fieldset {
border:none;
}
#currencies .field {
padding-top:3px;
}
#currencies select {
width:152px;
background:#242424;
border:1px solid #000;
border-right:0;
color:#fff;
}
#contacts-form fieldset {
border:none;
width:100%;
overflow:hidden;
display:block;
padding-bottom:36px;
}
#contacts-form .col-1 {
width:210px !important;
margin-right:0 !important;
}
#contacts-form .col-2 {
width:210px !important;
margin-right:0 !important;
}
#contacts-form label {
display:block;
height:53px;
overflow:hidden;
}
#contacts-form input {
color:#111;
border:1px solid #a09b96;
background:#fff;
padding:3px 0 3px 5px;
width:170px;
}
#contacts-form textarea {
color:#111;
border:1px solid #a09b96;
background:#fff;
padding:3px 0 3px 5px;
width:200px;
overflow:auto;
height:120px;
margin-bottom:18px;
}
#contacts-form .button {
float:right;
margin-left:11px;
}
/*==========================================*/
Os lo agradeceria de todo corazon
Un cordial saludo a todos
Atentamente
WiseHidden