ich habe vor kurzem angefangen mit CMSms. Nun habe ich mich dran getraut das Template und die Stylesheets etwas zu verändern was auch erst super geklappt hat. Als ich es dann allerdings mit IE6 u 7 getestet habe kamen dabei Fehler auf. Ich selbst verwende ja lieber Mozilla
aber da es auf meiner Seite mindestens dreimal so viel IE User gibt, sollte es bei ihnen auch gut aussehen.Hier was ich versucht habe und wie es im Mozilla Firefox angezeigt wird:
Nun der MS Internet Explorer:
Version 7 (Fehler: Lücke zwischen Navigation und Content)
Version 6 (Fehler: Lücke links von der Navigation und falsch positionierte Fußleisten)
Hier noch der Code aus dem Stylesheet:
Code: Select all
/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}
/*
Set initial font styles
*/
body {
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 75.01%;
line-height: 1em;
}
/*
set font size for all divs,
this overrides some body rules
*/
div {
font-size: 1em;
}
/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
border: 0;
}
/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link
a:active {
text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
background-color: inherit;
color: #18507C;
}
a:visited {
text-decoration: underline;
background-color: inherit;
color: #18507C; /* a different color can be used for visited links */
}
/* remove underline on hover and change color */
a:hover {
text-decoration: none;
background-color: #C3D4DF;
color: #385C72;
}
/*****************
basic layout
*****************/
body {
background-color: #fff;
color: #333;
}
/* center wrapper, min max width */
div#pagewrapper {
border: 0px solid black;
margin: 0 auto; /* this centers wrapper */
width: 83em; /* IE wont understand these, so we will use javascript magick */
background-color: #fff;;
background-image:url(uploads/images/gfx/background2.jpg);
color: black;
}
/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
height: 177px; /* adjust according your image size */
background: #fff;
background-image:url(uploads/images/gfx/background1.jpg);
}
/*--------------------
vorerst mal weg
div#header h1 a {
/* you can set your own image here */
background:none url(uploads/images/logo1.gif) no-repeat 0 12px;
display: block;
height: 80px; /* adjust according your image size */
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}
vorerst mal weg
----------------------*/
div#content {
margin: 1.5em 0 2em 0; /* some air above and under menu and content */
}
div#main {
margin-left: 238px; /* this will give room for sidebar, make this space bigger than sidebar width */
min-height: 400px;
margin-right: 19px; /* and some air on the right */
background-image:url(uploads/images/gfx/background6.jpg);
padding:20px;
padding-right:30px;
}
div#mainFooter {
margin-left: 238px; /* same like main */
margin-right: 19px; /* and some air on the right */
background-image:url(uploads/images/gfx/background7.jpg);
background-repeat:no-repeat;
height:20px;
padding-right:30px;
}
div#sidebar {
float: left; /* set sidebar on the left side. Change to right to float it right instead. */
width: 221px; /* sidebar width, if you change this please also change #main margins */
margin-left: 17px;
background-image:url(uploads/images/gfx/background4.jpg);
background-repeat:no-repeat;
padding-left:8px;
}
div#sidebarFooter {
float: left; /* set sidebar on the left side. Change to right to float it right instead. */
width: 221px; /* sidebar width, if you change this please also change #main margins */
height: 22px;
margin-left: -8px;
background-image:url(uploads/images/gfx/background5.jpg);
background-repeat:no-repeat;
padding-left:1px;
}
div#footer {
clear: both; /* keep footer below content and menu */
color: #fff;
background-image:url(uploads/images/gfx/background3.jpg);
background-repeat:no-repeat;
background-color: #fff;
}
div#footer p {
font-size: 0.8em;
padding: 1.5em; /* some air for footer */
text-align: center; /* centered text */
margin: 0;
color: #c0c0c0;
}
div#footer p a {
color: #c0c0c0; /* needed becouse footer link would be same color as background otherwise */
}
/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
height: 1px;
padding: 1em;
border-bottom: 1px dotted black;
margin: 1em;
}
Vielleicht hatte jemand schonmal die selben Probleme und hat nützliche Tipps oder weis wo welche stehen.
vielen Dank im Vorraus
Tryr
