Problema con IE con css

fcmonier85 · #1 (**permalink**) 14/10/2013, 07:10

Hola a todos quisiera su ayuda para arreglar m css que en IE no me funciona y el sitio sale desorganisado y demas, y en firefox sale bien.

Le paso el css, y quisiera que me ayudaran a decirme cuales son las dichosa etiqutas que deberias cambian para que en mi IE 7 , 8 se vean bien, espeor me puedan ayudar saludos.

Hay esta el css comleto no pretendo que me lo rectifiquen completo solo que me digan cuales propiedades debo de cambiar para que se me vea en IE 7 , 8 bien y como debo de ponerlas....

espero me puedan ayudar.

Código CSS:

Ver original/* begin Page */
 
/* Generated with Artisteer version 2.2.0.17376, file checksum is C3511CE2. */
 
body
{
    margin: 0 auto;
    padding: 0;
    background-color: #FFFFFF;
    background-image: url('../images/Page-BgTexture.jpg');
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: top left;
}
 
#art-main
{
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
}
 
#art-page-background-glare
{
    position: absolute;
    width: 100%;
    height: 388px;
    left: 0;
    top: 0;
}
 
#art-page-background-glare-image
{
    background-image: url('../images/Page-BgGlare.png');
    background-repeat: no-repeat;
    height: 388px;
    width: 1086px;
    margin: 0 auto;
}
 
html:first-child #art-page-background-glare
{
    border: 1px solid transparent; /* Opera fix */
}
 
 
 
#art-page-background-gradient
{
    background-position: top left;
}
 
 
.cleared
{
    float: none;
    clear: both;
    margin: 0;
    padding: 0;
    border: none;
    font-size:1px;
}
 
 
form
{
    padding:0 !important;
    margin:0 !important;
}
 
table.position
{
    position: relative;
    width: 100%;
    table-layout: fixed;
}
/* end Page */
 
/* begin Box, Sheet */
.art-Sheet
{
    position:relative;
    z-index:0;
    margin:0 auto;
    width: 826px;
    min-width:55px;
    min-height:55px;
}
 
.art-Sheet-body
{
    position: relative;
    z-index:1;
    padding: 18px;
}
 
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
{
    position:absolute;
    z-index:-1;
}
 
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
    width: 74px;
    height: 74px;
    background-image: url('../images/Sheet-s.png');
}
 
.art-Sheet-tl
{
    top:0;
    left:0;
    clip: rect(auto, 37px, 37px, auto);
}
 
.art-Sheet-tr
{
    top: 0;
    right: 0;
    clip: rect(auto, auto, 37px, 37px);
}
 
.art-Sheet-bl
{
    bottom: 0;
    left: 0;
    clip: rect(37px, 37px, auto, auto);
}
 
.art-Sheet-br
{
    bottom: 0;
    right: 0;
    clip: rect(37px, auto, auto, 37px);
}
 
.art-Sheet-tc, .art-Sheet-bc
{
    left: 37px;
    right: 37px;
    height: 74px;
    background-image: url('../images/Sheet-h.png');
}
 
.art-Sheet-tc
{
    top: 0;
    clip: rect(auto, auto, 37px, auto);
}
 
.art-Sheet-bc
{
    bottom: 0;
    clip: rect(37px, auto, auto, auto);
}
 
.art-Sheet-cr, .art-Sheet-cl
{
    top: 37px;
    bottom: 37px;
    width: 74px;
    background-image: url('../images/Sheet-v.png');
}
 
.art-Sheet-cr
{
    right:0;
    clip: rect(auto, auto, auto, 37px);
}
 
.art-Sheet-cl
{
    left:0;
    clip: rect(auto, 37px, auto, auto);
}
 
.art-Sheet-cc
{
    position:absolute;
    z-index:-1;
    top: 37px;
    left: 37px;
    right: 37px;
    bottom: 37px;
    background-image: url('../images/Sheet-c.png');
}
 
 
.art-Sheet
{
    margin-top: -18px !important;
}
 
#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
    min-width:826px;
}
 
/* end Box, Sheet */
 
/* begin Header */
div.art-Header
{
    margin: 0 auto;
    position: relative;
    z-index:0;
    width: 790px;
    height: 150px;
}
 
 
div.art-Header-jpeg
{
    position: absolute;
    z-index:-1;
    top: 0;
    left: 0;
    width: 790px;
    height: 150px;
    background-image: url('../images/Header.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}
/* end Header */
 
/* begin Menu */
/* menu structure */
 
.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
    text-align:left;
    text-decoration:none;
    outline:none;
    letter-spacing:normal;
    word-spacing:normal;
}
 
.art-menu, .art-menu ul
{
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
}
 
.art-menu li
{
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    position: relative;
    z-index: 5;
    background:none;
}
 
.art-menu li:hover
{
    z-index: 10000;
    white-space: normal;
}
 
.art-menu li li
{
    float: none;
}
 
.art-menu ul
{
    visibility: hidden;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    background:none;
}
 
.art-menu li:hover>ul
{
    visibility: visible;
    top: 100%;
}
 
.art-menu li li:hover>ul
{
    top: 0;
    left: 100%;
}
 
.art-menu:after, .art-menu ul:after
{
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}
.art-menu, .art-menu ul
{
    min-height: 0;
}
 
.art-menu ul
{
    background-image: url(../images/spacer.gif);
    padding: 10px 30px 30px 30px;
    margin: -10px 0 0 -30px;
}
 
.art-menu ul ul
{
    padding: 30px 30px 30px 10px;
    margin: -30px 0 0 -10px;
}
 
 
 
 
 
/* menu structure */
 
.art-menu
{
    padding: 12px 6px 0px 6px;
}
 
.art-nav
{
    position: relative;
    height: 41px;
    z-index: 100;
}
 
.art-nav .l, .art-nav .r
{
    position: absolute;
    z-index: -1;
    top: 0;
    height: 41px;
    background-image: url('../images/nav.png');
}
 
.art-nav .l
{
    left: 0;
    right:0px;
}
 
.art-nav .r
{
    right: 0;
    width: 790px;
    clip: rect(auto, auto, auto, 790px);
}
 
 
/* end Menu */
 
/* begin MenuItem */
.art-menu ul li
{
    clear: both;
}
 
.art-menu a
{
    position:relative;
    display: block;
    overflow:hidden;
    height: 29px;
    cursor: pointer;
    text-decoration: none;
    margin-right: 2px;
    margin-left: 2px;
}
 
 
.art-menu a .r, .art-menu a .l
{
    position:absolute;
    display: block;
    top:0;
    z-index:-1;
    height: 87px;
    background-image: url('../images/MenuItem.png');
}
 
.art-menu a .l
{
    left:0;
    right:4px;
}
 
.art-menu a .r
{
    width:408px;
    right:0;
    clip: rect(auto, auto, auto, 404px);
}
 
.art-menu a .t 
{
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #DDE0DC;
    padding: 0 19px;
    margin: 0 4px;
    line-height: 29px;
    text-align: center;
}
 
.art-menu a:hover .l, .art-menu a:hover .r
{
    top:-29px;
}
 
.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
    top:-29px;
}
 
.art-menu li:hover a .l, .art-menu li:hover a .r
{
    top:-29px;
}
.art-menu a:hover .t
{
    color: #232622;
}
 
.art-menu li:hover a .t
{
    color: #232622;
}
 
.art-menu li:hover>a .t
{
    color: #232622;
}
 
 
.art-menu a.active .l, .art-menu a.active .r
{
    top: -58px;
}
 
.art-menu a.active .t
{
    color: #111311;
}
 
 
/* end MenuItem */
 
/* begin ContentLayout */
.art-contentLayout
{
    position: relative;
    margin-bottom: 4px;
    width: 790px;
}
/* end ContentLayout */
 
/* begin Box, Block */
.art-Block
{
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:15px;
    min-height:15px;
}
 
.art-Block-body
{
    position: relative;
    z-index:1;
    padding: 7px;
}
 
.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl, .art-Block-tc, .art-Block-bc,.art-Block-cr, .art-Block-cl
{
    position:absolute;
    z-index:-1;
}
 
.art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
{
    width: 14px;
    height: 14px;
    background-image: url('../images/Block-s.png');
}
 
.art-Block-tl
{
    top:0;
    left:0;
    clip: rect(auto, 7px, 7px, auto);
}
 
.art-Block-tr
{
    top: 0;
    right: 0;
    clip: rect(auto, auto, 7px, 7px);
}
 
.art-Block-bl
{
    bottom: 0;
    left: 0;
    clip: rect(7px, 7px, auto, auto);
}
 
.art-Block-br
{
    bottom: 0;
    right: 0;
    clip: rect(7px, auto, auto, 7px);
}
 
.art-Block-tc, .art-Block-bc
{
    left: 7px;
    right: 7px;
    height: 14px;
    background-image: url('../images/Block-h.png');
}
 
.art-Block-tc
{
    top: 0;
    clip: rect(auto, auto, 7px, auto);
}
 
.art-Block-bc
{
    bottom: 0;
    clip: rect(7px, auto, auto, auto);
}
 
.art-Block-cr, .art-Block-cl
{
    top: 7px;
    bottom: 7px;
    width: 14px;
    background-image: url('../images/Block-v.png');
}
 
.art-Block-cr
{
    right:0;
    clip: rect(auto, auto, auto, 7px);
}
 
.art-Block-cl
{
    left:0;
    clip: rect(auto, 7px, auto, auto);
}
 
.art-Block-cc
{
    position:absolute;
    z-index:-1;
    top: 7px;
    left: 7px;
    right: 7px;
    bottom: 7px;
    background-color: #EDEDED;
}
 
 
.art-Block
{
    margin: 7px;
}
 
/* end Box, Block */
 
/* begin BlockHeader */
.art-BlockHeader
{
    position:relative;
    z-index:0;
    height: 30px;
    padding: 0 7px;
    margin-bottom: 7px;
}
 
.art-BlockHeader .t
{
    height: 30px;
    color: #000000;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    white-space : nowrap;
    padding: 0 7px;
    line-height: 30px;
}
 
.art-BlockHeader .l, .art-BlockHeader .r
{
    display:block;
    position:absolute;
    z-index:-1;
    height: 30px;
    background-image: url('../images/BlockHeader.png');
}
 
.art-BlockHeader .l
{
    left:0;
    right:6px;
}
 
.art-BlockHeader .r
{ 
    width:810px;
    right:0;
    clip: rect(auto, auto, auto, 804px);
}
 
 
 
 
 
.art-header-tag-icon
{
    display:inline-block;
    background-position:left top;
    background-image: url('../images/BlockHeaderIcon.png');
    padding:0 0 0 14px;
    background-repeat: no-repeat;
    min-height: 14px;
    margin: 0 0 0 5px;
}
 
 
/* end BlockHeader */

Crazylegs · #2 (**permalink**) 16/10/2013, 04:33

Como no has puesto el código HTML no tengo ni idea de como se visualiza la página. Pero podrías probar con CSS3 PIE (http://css3pie.com/) para subsanar las compatibilidades de CSS3 con IE6,7,8 y 9.

Para usar CSS3PIE, te lo descargas en la sección download, lo descomprimes en una carpeta de tu web.

Y en cada regla del CSS que tengas alguna propiedad de CSS3 insertas:

Código CSS:

Ver originalbehavior: url(path/to/pie_files/PIE.htc);

La url, lo más recomendable es que la pongas absoluta desde la raíz del document root. Ya que no es relativa al archivo .css si no al HTML.