Estou trabalhando com um cliente que exige que a página abra idêntica em todos os navegadores, inclusive em tablets, iOS, android e mobile.
Construimos um framework para gerenciar todo o site.
Mas enfrento um problema com CSS no iE.
A princípio estava com problema com a border-radius no iE, consegui fazer funcionar com um .htc externo, mas o problema persiste com o posicionamento, altura e alinhamento da página.
Já inclui hacks para iE mas o problema permanece.
Segue abaixo o css
Para comparação nos diversos navegadores http://pmmc.mabalus.com
@charset "utf-8";
body{
margin:0;padding:0;
font-family:Arial;
}
iframe,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
border: 0;
}
table, th,td {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
q:before,q:after {
content:'';
}
/* --- STANDARD CSS LINK STATE --- */
a {text-decoration:none;color:#333;}
a:hover {text-decoration:none;color:#fda213;}
/*clean insided border of buttons for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, button::-moz-focus-inner , button[type="submit"]::-moz-focus-inner, button[type="button"]::-moz-focus-inner, button[type="button"]::-moz-focus-inner
{
border : 0px;
}
/*clean insided border of buttons for IE8 */
input[type="submit"]:focus, input[type="button"]:focus, button[type="submit"]:focus, button[type="button"]:focus
{
outline : none;
}
/* --- STANDARD CSS FONT FORMATS --- */
body{
font:9pt/1.231 "Lucida Grande",Verdana,Arial,helvetica,clean,sans-serif;
text-rendering:optimizelegibility;
color:#333;
width: 100%;
border: 0;
background:#444;
}
input, select, option{
border:1px solid #CCC;
padding: 1px 2px;
*padding: 1px 0px;
margin:0px;
font:100% "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
}
table{
font-size:inherit;font:100%;
}
pre,code,kbd,samp,tt{
font-family:monospace;*font-size:108%;line-height:100%;
}
h1 {
/*18px via YUI Fonts CSS foundation*/
font-size:145%;
}
h2 {
/*16px via YUI Fonts CSS foundation*/
font-size:133%;
}
h3 {
/*14px via YUI Fonts CSS foundation*/
font-size:120%;
}
h4 {
/*13px via YUI Fonts CSS foundation*/
font-size:110%;
}
h1,h2,h3,h4 {
/* top & bottom margin based on font size */
padding: 2px 0px;
margin-bottom: 3px;
}
h1,h2,h3,h4,h5,h6,strong {
/*bringing boldness back to headers and the strong element*/
font-weight:bold;
font: "Lucida Grande",Verdana,Arial,helvetica,clean,sans-serif;
}
abbr,acronym {
/*indicating to users that more info is available */
border-bottom:1px dotted #000;
cursor:help;
}
em {
/*bringing italics back to the em element*/
font-style:italic;
}
blockquote,ul,ol,dl {
/*giving blockquotes and lists room to breath*/
margin:0;
padding: 0;
list-style: none;
}
th {
/*distinguishing table headers from data cells*/
font-weight:bold;
text-align:center;
}
p,fieldset,table {
/*so things don't run into each other*/
margin-bottom:1em;
}
.Font100{ font-size:100%;}
.Font80{ font-size:80%;}
/* --------------------- */
/* --------HEADER------- */
/* --------------------- */
#header {
width:100%;
padding:0;
overflow:hidden;
height:204px;
background:url(../images/topfill.jpg) top left repeat-x;
diplay: table;
}
#MenuTop ul{
margin: 0 auto;
padding:0;
padding-top: 6px;
*padding-top: 7px;
background:url(../images/top.png) top left repeat-x;
-moz-border-radius: 0px 0px 12px 12px;
-webkit-border-radius: 0px 0px 12px 12px;
/**/-o-border-radius: 0px 0px 12px 12px;
/**/border-radius: 0px 0px 12px 12px;
/**/behavior: url(border-radius.htc);
border: 1px solid #9e9e9e;
border-top:0px;
width:984px;
height:38px;
}
#MenuTop ul li{
list-style: none;
padding: 0px;
display:table-cell;
margin-top:3px;
*margin-top:4px;
text-align:center;
border: 0px;
}
#MenuTop select option{
padding: 2px;
line-height:22px;
letter-spacing: -0.7px;
text-decoration: none;
font-family:Tahoma;
font-size:11px;
font-weight: lighter;
color:#707070;
width:194px;
border: 0px;
}
#MenuTop a{
padding: 2px 15px;
text-shadow:0 1px 0 #FFF;
line-height:22px;
letter-spacing: -0.7px;
text-decoration: none;
font-family:Tahoma;
font-size:11px;
color:#707070;
}
#MenuTop a:hover{
color:#888;
}
#logo {
*float: left;
height:67px;
width:268px;
position: relative;
padding-top: 25px;
padding-right: 35px;
display:table-cell;
}
#logo a{
background:url(../images/logo.png) top left no-repeat;
width:268px;
height:67px;
display:block;
}
#searchBox {
*float: left;
height:61px;
width:501px;
position: relative;
top: 25px;
padding-right: 45px;
display:table-cell;
}
#searchBox .Tabs {
height: 61px;
margin: 0px;
padding: 0px;
}
#searchBox .innerTabsMenu li.active {
list-style: none;
padding: 6px 15px;
margin: 0;
margin-top: 6px;
background: url("../images/BE_Tab.gif") 0px -74px;
border: 1px solid #999;
border-bottom: 0px;
float: left;
font-weight: bold;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
/**/-o-border-radius: 8px 8px 0px 0px;
/**/behavior: url(border-radius.htc);
}
#searchBox .innerTabsMenu li.inactive {
padding: 5px 10px;
margin: 0px;
margin-top: 8px;
background: url("../images/BE_Tab.gif");
border: 1px solid #c1cad2;
border-bottom:0px;
float: left;
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
/**/-o-border-radius: 8px 8px 0px 0px;
/**/behavior: url(border-radius.htc);
text-decoration: none;
color: #555;
}
#searchBox .innerTabsMenu li.inactive:hover{
background-position: 0px -38px;
}
#searchBox .content{
width: 100%;
display: block;
border:1px solid #c1cad2;
background:#e8ecef;
padding: 5px;
}
#MapBox {
margin: 0px;
padding: 0px;
height: 32px;
width: 32px;
display: table-cell;
}
#Sheets {
margin: 15px 0;
padding:0;
background:url("../images/sheets.png") top left repeat-x;
border: 1px solid #9e9e9e;
width: 100%;
height: 42px;
}
#Sheets ul{
display: table-row;
list-style: none;
padding: 0px;
margin: 0px;
padding: 0px;
width: 984px;
}
#Sheets li{
display:table-cell;
margin: 0px;
padding: 0px;
margin-top:3px;
*margin-top:4px;
text-align:center;
border: 0px;
}
#Sheets a{
position: relative;
top: 8px;
padding: 2px 15px;
text-shadow: 0 1px 0 #CCC;
line-height:22px;
letter-spacing: -0.7px;
text-decoration: none;
font-family:Arial;
font-size:16px;
color:#FFFFFF;
}
#Sheets a:hover{
color: #FEED53;
text-shadow: 0 1px 0 #FCC853;
}
.bt_yellow {
border:0px;
padding: 0px;
margin: 0px;
width: 92px;
height: 27px;
background: url("../images/bt_yellow.jpg");
}
#footer {
width:100%;
padding-top: 35px;
background:#444;
border-top:5px solid #333;
diplay: table;
}
#footer p {
width:100%;
diplay: table-row;
line-height:22px;
text-align: center;
font-family:Tahoma;
color:#FFF;
text-decoration: none;
}
#footer span {
font-size:14px;
font-weight: bold;
}
#footer a {
font-size:11px;
padding-left: 5px;
padding-right: 5px;
color:#CCC;
}
#footer a:hover {
color: #FEED53;
}
Desde já agradeço a ajuda.
Tiago
