Muy buenas a todos compañeros, hacia tiempo que no dejaba un post en el foro. Pues ahora cuando tenga alguna duda intento partirme antes el coco, buscando y aplicando mis propias dudas antes de consultarlo por aqui, pero esta en concreto me esta volviendo un poco loco pues no consigo dar con la respuesta adecuada.
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.
/* 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;
}
/*==========================================*/
Os lo agradeceria de todo corazon
Un cordial saludo a todos
Atentamente
WiseHidden