Bonjour
Je suis le propriétaire d'un blog Google dont j'ai pérsonalisé le style, qui s'applique trés bien sur Firefox, mais beaucoup moins bien sur IE6. Qui peut m'aider à remettre de l'ordre ?
http://der-drachen.blogspot.com
Code du site :
En tête
Ici vient la déclaration des variables Google, mais les régles de couleur sont écrasés par les CSS.
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", "Segoe UI", "Sans", sans-serif;
background-color: #123456;
font-size: 9pt;
background-image: url(http://bp3.blogger.com/_KFGq138PgFM/R8A_BIopWcI/AAAAAAAAACI/XsVC-YoQY2M/S1600-R/Dragon_monde_v2_with_bg_123456.png);
background-repeat: no-repeat;
background-position: -295px 50px;
background-attachment: fixed;
}
a img {
border-width: 0;
vertical-align: bottom;
}
a {
color: #123456;
text-decoration: none;
}
a:hover, a:focus {
color: #456789;
text-decoration: underline;
}
#navbar {
position: fixed !important; /* Hack IE */
position: absolute;
display: block;
top: 0;
left: 0;
padding-left: 0;
margin-left: 0;
border-left-width: 0;
padding-right: 0;
margin-right: 0;
border-right-width: 0;
width: 100%;
border-bottom: 5px solid #C0C0C0;
z-Index: 1;
}
#navbar > * {
display:none;
}
#navbar:hover {
border-bottom: 2px solid #000000;
}
#navbar:hover > * {
display:inherit;
}
#outer-wrapper {
opacity: 0.8;
margin: 1em 1.5em 1em 7.5em;
border: 2px solid #000000;
background-color: #FFFFFF;
filter: alpha(opacity=80);
}
.main {
padding: 5px;
margin: 0;
}
#main-top {
border-bottom: 2px solid #000000;
background-color: #456789;
color: #FFFFFF;
}
#main-left{
display: block;
margin-right: 1em;
}
#main-right {
display: block;
float: right;
width: 23%;
padding-left: 1em;
padding-right: 1em;
}
#main-left-b {
display: table-cell !important; /* Hack Firefox */
display: inline-block;
border-right: 1px solid #123456;
}
#main-bottom {
border-top: 2px solid #000000;
background-color: #456789;
color: #FFFFFF;
text-align: center;
padding: 0;
margin: 0;
}
#main-bottom * {
margin: 0;
padding: 1px;
clear: both;
}
.date-header, #main-right h2 {
font-size: 95%;
color: #123456;
border-bottom: 1px solid #123456;
text-transform: uppercase;
padding-bottom: 0;
margin-bottom: 0;
text-align: right;
}
.post.hentry, .comments {
margin: 0 0 0 1em;
text-align: justify;
border-left: 1px solid #123456;
padding-top: 0;
padding-left: 5px;
}
.post-title {
color: #123456;
margin-top: 0;
padding-top: 0;
font-size: 150%;
font-variant: small-caps;
font-weight: bold;
}
.post-title a {
color: #123456;
text-decoration: none;
}
.post-title a:hover, .post-title a:focus {
color: #456789;
}
#header1, #header-inner {
background-image: none !important;
width: 100% !important;
height: 125px !important;
display: none;
}
#title {
font-size: 222%;
}
.feed-links {
margin-top: 1em;
border-top: 1px solid #123456;
text-align: right;
}
.BlogArchive h2 {
color: #123456;
margin-top: 0;
padding-top: 0;
font-size: 150%;
font-variant: small-caps;
margin-left: 5px;
border-left: 1px solid #123456;
margin-bottom: 0;
padding-bottom: 0.5em;
}
#separator {
border-bottom: 1px solid #123456;
padding: 0;
margin: 1.5em 0 0 0;
font-size: 95%;
color: #123456;
text-transform: uppercase;
text-align: right;
font-weight: bold;
}
#ArchiveList {
margin-top: 0;
padding-top: 0;
margin-left: 5px;
border-left: 1px solid #123456;
}
/* Hack IE */
div > .anti-ie {
display: none;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<b:section class='main' id='main-top' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Der Drachen (en-tête)' type='Header'/>
</b:section>
<b:section id='main-right' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Qui suis-je ?' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Téléchargements' type='HTML'/>
<b:widget id='HTML6' locked='false' title='Téléchargements annexes' type='HTML'/>
</b:section>
<div id='main-left'>
<b:section class='main' id='main-left-b' showaddelement='yes'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Messages blog' type='Blog'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Archive de blog' type='BlogArchive'/>
</b:section>
</div>
<b:section class='main' id='main-bottom' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
</body>
</html>
Je ne tiens pas forcément à la tranparence du fond, mais plus au fait que le corps soit sur le côté droit avec une marge sur la droite.
Merci d'avance pour votre aide !
|