AD_Blueprint Layout zerschossen mit IE6
Eingetragen von JoergSchneider@... (3)am 20.02.2009 - 09:55 Uhr in
Hi,
ich habe ein Problem in Verbindung mit dem AD_Blueprint Theme und dem Internet Explorer 6.
Vorneweg: ich bin kein CSS-Held und habe das Layout mit Hilfe von Firebug angepasst. In allen anderen getesteten Browsern (IE7, IE8, FF2, FF3 und Opera) sieht das Layout auch normal aus, nur beim IE6 ist der Hauptinhalt ca. 5cm nach rechts verschoben.
Falls sich das jemand live anschauen will: http://www.daemm-tec.de
Ist das ein bekannter IE6 Bug oder kann mir jemand einen Tipp geben wie ich das Problem beheben kann?
Hier ist noch die Styles.css von AD_Blueprint:
/*
** HTML elements
*/
body {
color: #000000;
font: 12px Verdana, Arial, Helvetica, sans-serif;
background:#ffffff;
margin:0px 0px 15px;
}
tr.odd td, tr.even td {
padding: 0.3em;
}
h1, h2, h3, h4, h5, h6 {
font-family: Helvetica, Arial, "Lucida Grande", Verdana, sans-serif;
color:#111111;
clear:both;
font-weight:lighter;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3, h3 a {
font-size: 1.3em;
line-height:1.2;
color: #9C0204;
letter-spacing: 0px;
text-decoration: none;
}
h4 {
font-size: 1.2em;
line-height:1.25em;
font-weight:bold;
}
h5 {
font-size: 1em;
font-weight:bold;
}
h6 {
font-size: 1em;
}
p {
margin: 0px 0px 1.5em 0px;
}
a {
text-decoration: underline;
}
a:link, a:visited {
color: #3e4967;
text-decoration: none;
}
a:hover {
color: #9C0204;
}
blockquote {
margin: 1.5em 0px 1.5em 1.5em;
color: #666666;
background: url('images/quote.png') .5em top no-repeat;
padding: 0px 20px 0px 30px;
}
hr {
background: #b2cbff;
color: #b2cbff;
clear: both;
float: none;
width: 100%;
height: 0.1em;
margin: 0px 0px 1.4em 0px;
border: none;
}
* html hr { margin: 0px 0px 1.2em 0px; } /* IE6 fix */
pre {
margin-bottom: 1.3em;
background: #eeeeee;
border:0.1em solid #dddddd;
padding:1.5em;
}
input {
border: 1px solid #cccccc;
}
ul {
list-style-image: url('images/bullet.gif');
}
li.leaf, li.collapsed, li.expanded {
list-style-image: url('images/bullet.gif');
padding: 2px 0px 3px 0px;
line-height: 1.3em;
}
li a.active{
color: #9C0204;
}
ol {
margin-left: 35px;
}
strong {
color: #9C0204;
}
/*
** Page layout blocks / IDs
*/
#wrapper {
width:950px;
margin:0px auto;
}
#page {
background: url('images/bg.gif') right repeat-y;
}
#page2 {
background: url('images/bg2.gif') left repeat-y;
border:solid #cccccc;
border-width: 0px 1px 1px;
}
#main {
margin: 0px 191px 0px 241px;
float:left;
padding: 25px 48px 20px 48px;
}
#sidebar-left, #sidebar-right {
vertical-align: top;
padding:25px 10px 10px;
font-size: 1em;
z-index:2;
}
.block h2 {
font-size: 1.5em;
line-height: 1.2;
display:none;
}
#sidebar-left {
width: 219px;
float:left;
margin-right:-241px;
border-right: 1px solid #cccccc;
background: #f1f1f1;
position:relative;
}
#sidebar-right {
width: 148px;
float:right;
margin-left:-189px;
border-left: 1px solid #cccccc;
background: #f1f1f1;
position:relative;
z-index:2;
}
#header {
height:117px;
padding: 0px 0px 0px 0px;
background: url('images/logo.gif') no-repeat;
}
#header img {
float:left;
}
#header h1{
line-height: 1em;
}
.site-name a {
color: #101010;
/* font-family: Verdana,Helvetica,Arial,"Lucida Grande",sans-serif;*/
font-family: "Courier New",Courier,sans-serif;
font-style:italic;
/* font-variant:small-caps; */
/* font-weight:lighter*/
text-decoration: none;
}
.site-slogan {
line-height: 1em;
position:relative;
top:-20px;
}
.search-box {
float:right;
margin:10px 20px 0px 0px;
}
.search-box .form-text {
background: url('images/search.gif') no-repeat;
font-size: 0.9em;
color: #cccccc;
padding: 2px 0px 2px 17px;
}
.search-box .form-text:hover {
color:#000000;
}
#primary{
display:block;
height:32px;
background:#9c0204;
font-size: 1.2em;
line-height: 1.5em;
padding-left: 650px;
}
#header-region {
border-bottom: 3px solid #9c0204;
}
#primary a {
display:block;
text-align:center;
color:#f1ffdf;
padding:5px 15px;
float: left;
text-decoration:none;
}
#primary a:hover, #primary a:active {
text-decoration:none;
background: #560b0b;
}
#primary ul.links li {
padding:0px;
}
#mission {
background:#f1f1f1;
border:1px solid #cccccc;
padding:10px;
}
.messages {
background-color: #eeeeee;
border: 1px solid #cccccc;
padding: 0.3em;
margin-bottom: 1em;
}
.error {
border-color: red;
}
#footer {
text-align: center;
font-size: 0.9em;
width:950px;
margin:auto;
}
.title h2, .title a {
color: #9C0204;
border-bottom: 2px dotted #aaaaaa;
text-decoration: none;
display:block;
width:100%;
margin-bottom:-17px;
}
h1.title {
color: #3e4967;
text-decoration: none;
display:block;
width:100%;
margin:0px;
}
.block, .box {
padding: 0px 0px 1.5em 0px;
}
#sidebar-left .block{}
.block {
display:block;
}
.taxonomy, .submitted, .links-node {
font-size: 0.8em;
line-height: 1.875em;
margin-bottom:15px;
float:left;
display:inline;
}
.taxonomy li, .links-node li {
border-right: 1px solid #cccccc;
}
.links-node li.last {
border:0px;
}
.node .submitted {
border-right: 1px solid #cccccc;
}
.node .picture {
border: 1px solid #dddddd;
float: right;
margin: 0.5em;
}
.comment {
}
.comment .title a {
}
.comment .picture {
border: 1px solid #aabacc;
float: right;
margin: 0.5em;
}
/*
** Module specific styles
*/
.feed-icon img {
margin-top:15px;
}
#aggregator .feed-source {
background-color: #eeeeee;
border: 1px solid #cccccc;
padding: 1em;
margin: 1em 0px;
}
#aggregator .news-item .categories, #aggregator .source, #aggregator .age {
color: #999999;
font-style: italic;
font-size: 0.9em;
}
#aggregator .title {
margin-bottom: 0.5em;
font-size: 1em;
}
#aggregator h3 {
margin-top: 1em;
}
#forum table {
width: 100%;
}
#forum td {
padding: 0.5em;
}
#forum td.forum a{
text-decoration:none;
}
#forum td.forum, #forum td.posts {
background-color: #eeeeee;
}
#forum td.topics, #forum td.last-reply {
background-color: #dddddd;
}
#forum td.container {
background-color: #cccccc;
}
#forum td.container a {
color: #555555;
text-decoration:none;
}
#forum td.statistics, #forum td.settings, #forum td.pager {
height: 1.5em;
border: 1px solid #bbbbbb;
}
#forum td .name {
color: #9866cc;
}
#forum td .links {
padding-top: 0.7em;
font-size: 0.9em;
}
#profile .profile {
clear: both;
border: 1px solid #aabacc;
padding: .5em;
margin: 1em 0em;
}
#profile .profile .name {
padding-bottom: 0.5em;
}
.block-forum h3 {
margin-bottom: .5em;
}
div.admin-panel .description {
color: #999999;
}
div.admin-panel .body {
background: #f4f4f4;
}
div.admin-panel h3 {
background-color: #6698cc;
color: #ffffff;
padding: 5px 8px 5px;
margin: 0px;
}
.node img{
border:1px solid #cccccc;
margin:5px;
}
.poll .bar {
background:#e7e7e7;
border:#9c9c9c 1px solid;
}
.poll .bar .foreground{
background:#cecdcd;
border-right:#9c9c9c 1px solid;
}
.block-image IMG{
border:1px solid #cecece; padding:3px;
}
.block-user .item-list ul li{
list-style-type:none;
margin:0px;
margin-top:5px;
}
.block-user .item-list ul{
padding:0px;
}
span.clear {
display: block;
clear: both;
height: 1px;
line-height: 0px;
font-size: 0px;
margin-bottom: -1px;
}
.caption{}
.image-caption-container{}
.image-caption{
text-align: center;
}- Anmelden oder Registrieren um Kommentare zu schreiben
Unterschied margin/padding
am 20.02.2009 - 13:41 Uhr
Im IE6 liegen im Unterschied zu den anderen Browsern der Padding Bereich und die Border innen im Feld, und nur die Margin außen. Bei den anderen sind Padding, Margin und Border außerhalb. Das gibt bei der Angabe von width dann schon mal unschöne Unterschiede und muß in einem IE6 spezifischen CSS-File individuell korregiert werden.
Gruß
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *