Como hago para que una web se visualice correctamente en los navegadores principales.

[somaria]

Buenas Noches.
Como puedo hacer para que una web de Html y CSS, se visualice de manera correcta en los navegadores principales. Con el Explorer 8 no hay problema, con el Mozila 3.6.3 se ve ligeramente más arriba, pero con en el Google Chrome, se ve muy arriba la web.
Gracias por la ayuda.

[noblejis]

Buenas,

La visualización en los navegadores y las resoluciones de pantallla son algo que trae de cabeza a todos los desarrolladores web.

Te recomiendo que leas esto:
[URL="http://www.maestrosdelweb.com/editorial/compnavega/"]Desarrollo compatible entre navegadores[/URL]

También si buscas un poco en el foro encontrarás muchos post relacionados.

Un saludo.

[angelAparicio]

Iniciado por somaria

Buenas Noches.
Como puedo hacer para que una web de Html y CSS, se visualice de manera correcta en los navegadores principales. Con el Explorer 8 no hay problema, con el Mozila 3.6.3 se ve ligeramente más arriba, pero con en el Google Chrome, se ve muy arriba la web.
Gracias por la ayuda.

Sin ver el código, es complicado.

Saludos

[somaria]

Iniciado por angelAparicio

Sin ver el código, es complicado.

Saludos

Gracias por intentar ayudarme
Te refieres al código style?, me comentarón que esos problemas se solucionan creando varios CSS para cada navegador. que hay de cierto en eso. sí es el código style me avisas para copiarlo. Añadiendo, que solo existe un solo style CSS en la web.
Saludos

[zornak]

Has usado primero un reset?

[emprear]

Somaria:

Si no pasas algún elemento concreto dudo que podamos ayudarte mucho.

Saludos

[somaria]

Iniciado por emprear

Somaria:

Si no pasas algún elemento concreto dudo que podamos ayudarte mucho.

Saludos

Buenas Noches, Que bonito tú gatito. Acá les copio el Style, aclarando que es el único que hay, por favor la ayuda que sea en lenguaje simple ya que no soy una experta como ustedes. Gracias

body {
font-family : Arial, Helvetica, sans-serif;
padding : 0;
font-size : 12px;
margin : 0 auto auto auto;
color : #000000;
background-color : #000000;
}
a {
font-weight : bold;
color : #000000;
border-top-style : none;
border-right-style : none;
border-bottom-style : none;
border-left-style : none;
}
.clear {
clear : both;
}
p {
padding : 5px 0 5px 0;
margin : 0;
text-align : justify;
line-height : 19px;
}
p.details {
padding : 5px 15px 5px 15px;
font-size : 11px;
}
p.details_cart {
clear : both;
padding : 25px 30px 5px 0;
font-size : 11px;
font-style : italic;
}
p.more_details {
padding : 25px 20px 0 20px;
font-size : 11px;
}
#wrap {
width : 900px;
height : 750px;
margin : auto;
background-color : #000000;
}
.header {
width : 900px;
height : 181px;
background-image : url(images/headertit2.jpg);
background-repeat : no-repeat;
background-position : center;
font-weight : bold;
padding : 0;
}
.logo {
padding-bottom : 5px;
border-top-style : none;
border-right-style : none;
border-bottom-style : none;
border-left-style : none;
}
#menu {
width : 900px;
height : 35px;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
color : #cc0000;
}
#menu ul {
display : block;
list-style : none;
margin : 0;
padding-top : 9px;
padding-right : 0;
padding-bottom : 0;
padding-left : 10px;
}
#menu ul li {
display : inline;
padding : 0;
margin : 0;
height : 20px;
}
#menu ul li a {
height : 27px;
display : block;
float : left;
text-decoration : none;
text-align : center;
font-size : 13px;
line-height : 25px;
margin-top : 0;
margin-right : 4px;
margin-bottom : 0;
margin-left : 4px;
padding-top : 0;
padding-right : 10px;
padding-bottom : 0;
padding-left : 10px;
color : #ffffff;
}
#menu ul li.selected a {
height : 27px;
display : block;
padding : 0 10px 0 10px;
margin : 0 5px 0 5px;
float : left;
text-decoration : none;
text-align : center;
font-size : 13px;
line-height : 25px;
font-weight : bold;
color : #ff0000;
}
#menu ul li a:hover {
color : #ffffff;
}
.crumb_nav {
padding : 5px 0 10px 0;
}
.crumb_nav a {
color : #990000;
}
span.red {
color : #990000;
}
.price {
font-size : 14px;
padding : 0 0 0 15px;
margin : 2px 0 5px 0;
}
span.colors {
padding : 2px 2px 0 2px;
}
.center_content {
width : 900px;
background-image : url(images/center_bg7b.gif);
background-position : center;
height : 520px;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
}
.left_content {
width : 425px;
float : left;
padding-top : 15px;
padding-right : 0;
padding-bottom : 5px;
padding-left : 20px;
height : 498px;
}
.right_content {
width : 430px;
float : right;
padding-top : 15px;
padding-right : 0;
padding-bottom : 10px;
padding-left : 25px;
height : 495px;
}
.title {
color : #cc0000;
float : left;
font-size : 19px;
margin-top : 10px;
margin-bottom : 10px;
margin-left : 0;
width : 405px;
font-weight : bold;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 7px;
}
.title2 {
color : #cc0000;
float : left;
font-size : 18px;
margin-top : 10px;
margin-bottom : 10px;
width : 390px;
font-weight : bold;
position : fixed;
margin-right : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 13px;
}
span.title_icon {
float : left;
padding : 0 5px 0 0;
}
.prod_title {
color : #cc0000;
font-size : 16px;
font-weight : bold;
background-color : #030303;
padding-top : 5px;
padding-right : 0;
padding-bottom : 0;
padding-left : 10px;
}
a.more {
font-style : italic;
color : #f8981d;
float : right;
text-decoration : none;
font-size : 11px;
padding : 0 15px 0 0;
}
.about {
width : 396px;
clear : both;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 10px;
background-image : url(images/border4.gif);
background-repeat : no-repeat;
background-position : center bottom;
height : 415px;
}
img.right {
float : right;
padding : 0 0 0 10px;
}
.right_box {
width : 170px;
float : left;
padding-top : 10px;
padding-right : 0;
padding-left : 0;
}
.feat_prod_box {
clear : both;
height : 453px;
width : 370px;
margin-top : 0;
margin-right : 0;
margin-bottom : 0;
margin-left : 0;
padding-top : 10px;
padding-right : 0;
padding-bottom : 0;
padding-left : 25px;
background-image : url(images/border4.gif);
background-repeat : no-repeat;
font-weight : bold;
color : #ff0000;
border-top-color : #333333;
border-right-color : #333333;
border-bottom-color : #333333;
border-left-color : #333333;
background-position : center bottom;
text-align : center;
font-style : italic;
font-size : 14px;
text-decoration : blink;
}
.feat_prod_box_details {
clear : both;
text-align : center;
height : 410px;
margin-top : 0;
margin-right : 10px;
margin-bottom : 0;
margin-left : 0;
padding-top : 10px;
padding-bottom : 0;
padding-left : 0;
}
.prod_img {
float : left;
padding : 0 5px 0 0;
text-align : center;
}
.prod_det_box {
width : 305px;
float : left;
height : 35px;
padding-top : 0;
padding-bottom : 0;
padding-left : 0;
background-image : url(images/rojo2.jpg);
clear : none;
}
.box_top {
width : 295px;
height : 9px;
background : url(images/box_top.gif) no-repeat center bottom;
color : #cc0000;
}
.box_center {
width : 265px;
height : auto;
color : #ff0000;
font-weight : bold;
background-color : #000000;
background-position : left top;
padding : 0;
float : right;
clear : both;
}
.box_bottom {
width : 295px;
height : 9px;
background : url(images/box_bottom.gif) no-repeat center top;
}
.new_prod_box {
float : left;
text-align : center;
padding : 10px;
}
.new_prod_box a {
padding : 5px 0 5px 0;
color : #b5b5b6;
text-decoration : none;
display : block;
}
.new_prod_bg {
width : 132px;
height : 119px;
text-align : center;
background : url(images/new_prod_box.gif) no-repeat center;
position : relative;
}
.new_icon {
position : absolute;
top : 0;
right : 0;
z-index : 200;
}
.special_icon {
position : absolute;
top : 0;
right : 2px;
z-index : 250;
}
img.thumb {
padding : 10px 0 0 0;
}
.new_products {
clear : both;
padding : 0;
}
ul.list {
clear : both;
padding : 10px 0 0 20px;
margin : 0;
}
ul.list li {
list-style : none;
padding : 2px 0 2px 0;
}
ul.list li a {
list-style : none;
text-decoration : none;
color : #000000;
background : url(images/left_menu_bullet.gif) no-repeat left;
padding : 0 0 0 17px;
}
div.demolayout {
width : 460px;
margin : 0 0 20px 0;
}
ul.demolayout {
list-style-type : none;
float : left;
margin : 0;
padding : 0;
}
ul.demolayout li {
margin : 0 10px 0 0;
float : left;
}
.tab {
border : 1px solid #dfdfdf;
padding : 0 0 25px 0;
}
ul.demolayout a {
float : left;
display : block;
padding : 5px 25px;
border : 1px solid #dfdfdf;
border-bottom : 0;
color : #666;
background : #eee;
text-decoration : none;
font-weight : bold;
}
ul.demolayout a:hover {
background : #fff;
}
ul.demolayout a.active {
background : #fff;
padding-bottom : 5px;
cursor : default;
color : #795636;
}
.tabs-container {
clear : left;
padding : 0;
}
.languages_box {
padding : 0 0 5px 0;
float : left;
}
.languages_box a {
padding : 0 2px 0 2px;
}
.languages_box a.selected {
padding : 2px 2px 0 2px;
border : 1px solid #cccccc;
color : #99ff00;
}
.currency {
float : none;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 15px;
border-top-color : #ff0000;
border-right-color : #ff0000;
border-bottom-color : #ff0000;
border-left-color : #ff0000;
}
.currency a {
text-decoration : none;
color : #000000;
padding : 3px;
border-top-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
border-top-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-left-style : solid;
border-top-color : #cc0000;
border-right-color : #cc0000;
border-bottom-color : #cc0000;
border-left-color : #cc0000;

[somaria]

}
.currency a.selected {
color : #0000ff;
padding : 3px;
border : 1px solid #eeedee;
background-color : #ff9900;
font-weight : bold;
}
.currency a:hover {
border : 1px solid #000099;
}
.cart {
width : 405px;
float : left;
height : 15px;
margin-top : 5px;
margin-right : 0;
margin-bottom : 5px;
margin-left : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 15px;
padding-left : 0;
background-image : url(images/border4.gif);
background-position : center bottom;
background-repeat : no-repeat;
}
.home_cart_content {
float : left;
padding : 3px;
border : 1px solid #eeedee;
margin : 10px 0 0 15px;
}
a.view_cart {
display : block;
float : left;
margin : 12px 0 0 10px;
color : #990000;
}
.contact_form {
width : 355px;
float : right;
position : relative;
margin-top : 5px;
margin-right : 0;
margin-bottom : 0;
margin-left : 10px;
padding-top : 20px;
padding-right : 20px;
padding-bottom : 0;
padding-left : 20px;
height : 380px;
background-image : url(images/border4.gif);
background-repeat : no-repeat;
background-position : center bottom;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0;
border-left-width : 0;
border-top-style : none;
border-right-style : none;
border-bottom-style : none;
border-left-style : none;
}
.form_row {
width : 335px;
clear : both;
color : #030303;
padding-top : 6px;
padding-right : 0;
padding-bottom : 6px;
padding-left : 0;
}
label.contact {
width : 75px;
float : left;
font-size : 14px;
text-align : left;
color : #030303;
padding-top : 4px;
padding-right : 5px;
padding-bottom : 0;
padding-left : 0;
}
input.contact_input {
width : 253px;
height : 18px;
background-color : #fff;
color : #030303;
border : 1px solid #dfdfdf;
float : right;
}
textarea.contact_textarea {
width : 253px;
height : 100px;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
color : #030303;
background-color : #fff;
border : 1px solid #dfdfdf;
float : right;
}
input.register {
width : 71px;
height : 25px;
border : none;
cursor : pointer;
text-align : center;
float : right;
color : #ffffff;
background : url(images/register_bt.gif) no-repeat center;
}
a.contact {
width : 53px;
height : 24px;
display : block;
float : right;
margin : 0 0 0 10px;
text-decoration : none;
text-align : center;
line-height : 24px;
color : #fff;
font-weight : bold;
background-image : url(images/contact_bt1.gif);
background-repeat : no-repeat;
background-position : center;
}
a.checkout {
width : 71px;
height : 25px;
display : block;
float : right;
margin : 10px 30px 0 10px;
background : url(images/register_bt.gif) no-repeat center;
text-decoration : none;
text-align : center;
line-height : 25px;
color : #fff;
}
a.continue {
width : 71px;
height : 25px;
display : block;
float : left;
margin : 10px 0 0 0;
background : url(images/register_bt.gif) no-repeat center;
text-decoration : none;
text-align : center;
line-height : 25px;
color : #fff;
}
.terms {
padding : 0 0 0 80px;
}
.form_subtitle {
position : absolute;
top : -16px;
left : 97px;
width : 197px;
height : 25px;
background-color : #cc0000;
text-align : center;
color : #ffffff;
font-size : 12px;
line-height : 20px;
font-weight : bold;
padding-top : 0;
padding-right : 7px;
padding-bottom : 0;
padding-left : 7px;
border-top-style : double;
border-right-style : double;
border-bottom-style : double;
border-left-style : double;
border-top-color : #000000;
border-right-color : #000000;
border-bottom-color : #000000;
border-left-color : #000000;
}
.cart_table {
width : 440px;
border : 1px solid #990000;
text-align : center;
}
tr.cart_title {
background-color : #dfdfdf;
}
td {
padding : 3px;
}
td.cart_total {
text-align : right;
padding : 5px 15px 5px 0;
}
img.cart_thumb {
border : 1px solid #b2b2b2;
padding : 2px;
}
div.pagination {
width : 420px;
padding : 5px;
margin : 5px;
text-align : center;
float : left;
clear : both;
font-size : 10px;
}
div.pagination a {
padding : 2px 5px 2px 5px;
margin-right : 2px;
border : 1px solid #795636;
text-decoration : none;
color : #795636;
}
div.pagination a:hover, div.pagination a:active {
color : #fff;
border-top-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-width : 1px;
border-top-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-left-style : solid;
background-color : #000000;
}
div.pagination span.current {
padding : 2px 5px 2px 5px;
margin-right : 2px;
border : 1px solid #795636;
font-weight : bold;
background-color : #795636;
color : #fff;
}
div.pagination span.disabled {
padding : 2px 5px 2px 5px;
margin-right : 2px;
border : 1px solid #f3f3f3;
color : #ccc;
}
.footer {
height : 10px;
border-top-width : 0;
border-top-style : none;
border-top-color : #000000;
background-color : #000000;
background-position : bottom;
color : #ffcc00;
font-weight : bold;
text-align : center;
padding : 20px;
letter-spacing : 2px;
margin-top : 0;
}
.left_footer {
float : left;
padding-top : 10px;
padding-right : 0;
padding-bottom : 10px;
padding-left : 10px;
background-color : #000000;
}
.right_footer {
float : right;
padding : 10px 10px 0 0;
}
.footer a {
text-decoration : none;
padding : 0 5px 0 5px;
color : #afaeaf;
}
.title3 {
color : #cc0000;
float : left;
font-size : 16px;
margin-top : 10px;
margin-bottom : 10px;
width : 200px;
font-weight : bold;
line-height : normal;
position : fixed;
text-align : left;
vertical-align : middle;
padding : 0;
}
.cart2 {
width : 380px;
float : right;
height : 15px;
margin-top : 5px;
margin-right : 0;
margin-bottom : 5px;
margin-left : 0;
padding-top : 0;
padding-bottom : 15px;
padding-left : 0;
background-image : url(images/border4.gif);
background-position : center bottom;
background-repeat : no-repeat;
clear : none;
}
a:link {
text-decoration : none;
color : #000000;
}
a:visited {
text-decoration : none;
}
a:hover {
text-decoration : none;
}
a:active {
text-decoration : none;
}
.mas {
width : 396px;
clear : both;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 10px;
background-image : url(images/border4.gif);
background-repeat : no-repeat;
background-position : center bottom;
height : 465px;
}
.mas2 {
width : 390px;
clear : left;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 10px;
background-image : url(images/border4.gif);
background-repeat : no-repeat;
background-position : center bottom;
height : 420px;
}
.cart3 {
width : 380px;
float : left;
height : 15px;
margin-top : 5px;
margin-right : 0;
margin-bottom : 5px;
margin-left : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 15px;
padding-left : 0;
background-image : url(images/border4.gif);
background-position : center bottom;
background-repeat : no-repeat;
clear : none;
}
.feat_prod_box2 {
clear : both;
height : 453px;
width : 365px;
margin-top : 0;
margin-right : 0;
margin-bottom : 0;
margin-left : 0;
padding-top : 10px;
padding-right : 0;
padding-bottom : 0;
padding-left : 25px;
background-image : url(images/border4.gif);
background-repeat : no-repeat;
font-weight : bold;
color : #000000;
background-position : center bottom;
font-style : normal;
font-size : 16px;
border-top-color : #cccccc;
border-right-color : #cccccc;
border-bottom-color : #cccccc;
border-left-color : #cccccc;
font-family : "Times New Roman", Times, serif;
line-height : normal;
text-align : center;
}
.box_center2 {
width : 320px;
height : auto;
color : #ffcc00;
font-weight : bold;
background-color : #000000;
float : none;
clear : both;
padding-top : 10px;
padding-right : 0;
padding-bottom : 0;
padding-left : 20px;
font-size : 24px;
}
.prod_title2 {
color : #ffffff;
font-size : 20px;
font-weight : bold;
background-color : #030303;
width : 270px;
line-height : 0;
white-space : nowrap;
text-align : center;
border : medium outset #ff0000;
float : left;
padding : 0;
clear : both;
}
.clear2 {
clear : both;
font-weight : bold;
text-align : left;
font-size : 16px;
color : #000000;
}
.centrado {
clear : both;
font-family : "Times New Roman", Times, serif;
font-size : 18px;
font-weight : bold;
text-align : center;
}
.clear3 {
clear : both;
font-family : "Times New Roman", Times, serif;
font-size : 18px;
font-weight : bold;
padding-left : 20px;
}
.titlee {
color : #cc0000;
float : left;
font-size : 19px;
margin-top : 10px;
margin-bottom : 10px;
margin-left : 0;
width : 395px;
font-weight : bold;
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 13px;
}

[emprear]

somaria:

Semejante css sin el html es como prepararte una taza de té con agua y sin bolsita...
postealo por favor, y si hay alguna url (dirección) mejor

Saludos

[juamd]

Que tal !!!

Puedes investigar algo acerca de frameworks para maquetar css son muy útiles y la mayoria muy sencillos de usar. Personalmente uso 960css (http://960.gs/) y me parece muy sencillo de usar.

Saludos.

[somaria]

Muchas Gracias por la ayuda este foro es el mejor

[PHPau]

Tienes que pensar que los model box son diferentes para cadanavegador... bueno más bien son distintos para IE ya que GC y Ff usan los mismos.

[JoseAlejandro_Realza]

Sinceramente creo que lo mejor que puedes hacer es Desarrollar tu Sitio, y trabajar en función a la visualización del Chrome que es la mas correcta, ademas que suele ser muy similar a la de Mozilla, Opera y Safari, IE8 y anteriores suelen verse muy diferente por su baja calidad con las normas ACID3. Saludos

[PHPau]

Pues yo creo que es mejor trabajar en Firefox porque te permite el uso de herramientas de apoyo al desarrollador