Zunächst mal, ich bin blutiger Anfänger was CSS angeht, aber ich habe mich die letzten Wochen eingearbeitet um ein eigenes Wordpress Theme zu designen. Ich habe dieses dann auf einer lokalen WP Installation so lange getweaked bis es im Firefox für OSX gut aussah. Heute habe ich es dann online eingesetzt und unter Windows getestet und habe nur Probleme...
Im Internet Explorer wird die Navigationsleiste in die einzelnen Grafiken zerlegt und stufenmäßig dargestellt. Muss wohl ein Problem mit den Abständen im CSS Teil für die Navigation sein, ich sitze jetzt schon seit Stunden dran und finde den Fehler einfach nicht.
Auch der Text in den Blogeinträgen sieht im IE ganz anders aus, kann es sein dass IE Probleme mit dem Font hat?
Zusätzlich sind die Abstände zwischen den einzelnen Linkblocks in der rechten Sidebar viel größer als im FF, der Hintergrund der einzelnen Elemente sollte beim Hover eigentlich mit der border der anderen Elemente abschließen.
Wie gesagt, bin Anfänger und schaffe es einfach nicht alleine. Wäre nett wenn mir hier jemand helfen könnte.
URL: Filmabend.info
Code
/*
RESET
*/
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
html, body { height: 100%; }
body { font-size: 62.5%; font-family: Georgia, times new roman, serif; color: #333333; background-color: #151313;}
ul { list-style: none; }
ol { list-style: none }
a { font-family: arial, sans-serif; font-weight: bold; outline: none; text-decoration: none; }
a img { border: none; }
img { vertical-align: middle; margin: 0 5px 15px 0; }
table { border-collapse: collapse; }
label { font-size: 12px; font-family: Arial, sans-serif; font-weight: bold; padding: 0 0 0 10px; }
/*
TOOLS
*/
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.button { border: none; background: #151313; padding: 3px 8px; margin-top: 4px;
-moz-border-radius: 5px; -webkit-border-radius: 5px; color: white; cursor: pointer; }
.button:hover { background: #990000; color: white; }
.commentbutton { border: 1px solid; border-color: black; background: white; padding: 3px 8px; margin-top: 4px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #333333; cursor: pointer; }
.commentbutton:hover { background: #2f0606; color: white; }
/*
TYPOGRAPHY
*/
p, li { font-size: 1.3em; line-height: 1.4em; }
a { color: #2f0606; }
a:hover { background: #2f0606; color: white; }
h1 { font-size: 2.8em; font-family: Arial, sans-serif; font-weight: bold; color: #2f0606; }
h2 { font-size: 16px; font-family: Arial, sans-serif; font-weight: bold; }
h3 { font-size: 2.6em; font-family: Arial, sans-serif; color: #2f0606; font-weight: bold; padding: 25px 0 15px 20px; }
h4 { font-size: 12px; font-family: Arial, sans-serif; font-weight: bold; }
h5 { font-family: arial, sans-serif; font-size: 12px; }
h6 { font-family: arial, sans-serif; font-size: 10px; font-weight: bold; }
/*
BLOG ELEMENTE
*/
.post { margin: 0 0 25px 0; }
.post p { padding: 0 20px 15px 20px; }
.post h1 { padding: 10px 20px 10px 20px; }
.entryfooter { height: 50px; background: #cecece; margin: 15px 20px 15px 20px; }
.entryfooter p { padding: 10px 5px 5px 10px; font-family: arial, sans-serif; font-size: 12px; font-weight: bold; color: black; }
.avatar { margin: 0 15px 0 0; float: left; }
.entryinfo { float: left; }
.singlefooter { height: 56px; background: #cecece; margin: 15px 20px 15px 20px; }
.singlefooter p { padding: 5px 5px 5px 10px; font-family: arial, sans-serif; font-size: 12px; font-weight: bold; color: black; }
.kommentieren p { margin: 0 auto; }
#commentform { background: #151313; padding: 0 0 25px 15px; }
.commentinfo { margin: 0 0 10px 20px; }
.commentlabel { color: white; }
.commenttext { padding: 0 0 0 20px; }
/*
LAYOUT
*/
#container { width: 1020px; margin: 0 auto; background: url(images/background_08.png) repeat-y white; }
#wrapper { width: 1020px; margin: 0 auto; background: url(images/background_08.png) repeat-y white; float: left; }
#header { width: 1020px; height: 262px; float: left; }
#catsidebar { width: 200px; float: left; }
#catcontent: { width: 180px; float: right; }
#content { width: 595px; float: left; margin: 0 auto; }
#sidebar { width: 225px; float: right; }
#s { width: 110px; margin-right: 4px; }
#sidebarcontent { width: 206px; float: left; }
#sidebarcontent a { display: block; color: #c9c9c9; background: #2f0606; padding-left: 5px; font-size: 12px; line-height: 1.2; padding: 7px 5px 5px 10px; border-bottom: 1px dotted; border-color: #1c0606; cursor: pointer; }
#sidebarcontent a:hover { display: block; background: #1c0606; color: white; }
.widgettitle { background: url(images/widgetback.png); color: white; padding: 0 0 0 8px; margin-top: 20px; }
.textwidget { width: 180px; float: right; }
-textwidget p { padding-left: 10px; }
#commentbuttons { margin: 0 0 30px 20px; }
ol.commentlist { margin: 0 20px; }
ol.commentlist li p { font-family: arial, sans-serif; font-size: 14px; margin: 15px; padding: 0 50px; }
.singlecomment { margin: 10px 10px 0 0; padding: 10px; border: 1px solid; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.thumb { padding-left: 8px; }
/*
HEADER
*/
h1#logo { width: 1020px; height: 220px; background: url(images/header_02.jpg) top left no-repeat; text-indent: -9999px }
ul#navigation {
width: 1020px;
text-indent: -9999px;
}
/*
NAVIGATION
*/
ul#navigation li.feed a {
width: 199px;
height: 42px;
display: block;
background: url(images/nav-feed.png);
float: left; }
ul#navigation li.news a {
width: 101px;
height: 42px;
display: block;
background: url(images/nav-news.png) bottom center;
float: left; }
ul#navigation li.reviews a {
width: 125px;
height: 42px;
display: block;
background: url(images/nav-reviews.png) bottom center;
float: left; }
ul#navigation li.trailer a {
width: 117px;
height: 42px;
display: block;
background: url(images/nav-trailer.png) bottom center;
float: left; }
ul#navigation li.podcast a {
width: 121px;
height: 42px;
display: block;
background: url(images/nav-podcast.png) bottom center;
float: left; }
ul#navigation li.kontakt a {
width: 131px;
height: 42px;
display: block;
background: url(images/nav-about.png) bottom center;
float: left; }
ul#navigation li.datum {
width: 226px;
height: 42px;
background: url(images/nav-datum.png);
float: left;
font-family: Arial, sans-serif;
font-color: white;
font-size: 14px;
text-indent: 10px; }
ul#navigation li a:hover {
background-position: top center; }
/*
FOOTER
*/
#footer { width: 980px; background: url(images/footerback.png) no-repeat black; margin: 0 0 0 20px; }
#footercontent { padding: 30px; margin: 50px; }
#footercontent p { font-family: arial, sans-serif; color: white; text-align: center; margin-bottom: 15px; }
#footercontent a { color: #990000; }