Fehler im CSS?

Mauki · 17.08.2008

Ich bin gerade dabei meine Rapidweaver Seite mit Wordpress neu aufzubauen. Ich verwenden das gleiche Stylesheet mit kleinen Änderungen nur hab ich jetzt Darstellungsfehler drin?

1. Am rechten Rand wird ein grauer Strich angezeigt, weiß aber nicht wie der entsteht. Wenn ich den Container auf 968 px setze verschwindet er?
2. Meine Obere Navigation ist im IE zu groß, im Safari und Firefox passt es. Komisch ist das unter RW das passt?

Code:

/*
Theme Name: VCP Denkendorf
Theme URI: http://www.vcp-denkendorf.de
Description: Custom Theme für den VCP Denkendorf
Version: 1.0
Author: Markus "Mauki" Burkhardt
*/

/*  Allgemeine Einstellungen */
	
body {
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:  #000000;
    margin: 10px;
	padding: 0px;
	background-color: #CCCCCC;
    }
   
.container {
	width: 970px;
	text-align: left;
	margin: 0 auto 0 auto;
	border: 3px solid #FFFFFF;
   	background: url("images/faux_columns.jpg") repeat-y;
   	}
	
.header {
	padding: 0px;
	margin: 0px;
    }
    
a:link {
	color: #5B91AD;
	text-decoration: none;
	}

a:visited {
	color: #5B91AD;
	text-decoration: none;
	}

a:hover {
    color: #00387D;
    text-decoration: underline;
	}    

a:active {
    color: #00387D;
    text-decoration: none;
	}

/* Stylesheets fuer Navigation oben */

.navi_oben {
	padding:5px;
	background-color: #5B91AD;
	text-align: right;
	color:#FFFFFF;
	}

.navi_oben ul {
	list-style: none;
	margin: 2px;
	display: inline;
    }

.navi_oben li {
    display: inline;
    }

.navi_oben a {
	text-decoration: none;
	height: 1px;
    padding: 5px 6px 4px 6px;
	}

.navi_oben a:visited {
	text-decoration: none;
	color:#FFFFFF;
	}

.navi_oben a:link  { 
  	color:#FFFFFF; 
  	text-decoration:none;
	}
			
.navi_oben a:hover {
	color: #00387D;
	}

.navi_oben a:active {
    color: #00387D;
	}   
	 
/* Stylesheet für Sidebar */

.sidebar {
	width: 165px;
	min-height: 450px;
	margin-bottom: 0px;
	float: left;
	background-color: #5B91AD;
	}

 
/* Main Navigation */

.navcontainer {
	line-height: 2.0em;
	border-top: 1px solid #FFFFFF;
	margin-bottom: 0px;
	position: relative;
}

.navcontainer #current {
	color: #FFFFFF;
}

.navcontainer .currentAncestor {
	color: #FFFFFF;
}

/* Parent - Level 0 */

.navcontainer ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.navcontainer li {
}

.navcontainer a {
	display: block;
	text-decoration: none;
	padding-left: 10px;
	border-bottom: 1px solid #FFFFFF;
	height: 23px;
}

.navcontainer a:visited {
	text-decoration: none;
	color:#FFFFFF;
				}

.navcontainer a:link  { 
  color:#FFFFFF; 
  text-decoration:none;
			}
			
.navcontainer a:hover {
	background-color: #00387D;
	color: #FFFFFF;
}

.navcontainer a:active {
	background: #FFFFFF;
  	background-color: #00387D;
}

/* Child - Level 1 */

.navcontainer ul ul {
	text-indent: 20px;
   	background-color: #83B9CD;
   	color: #FFFFFF;
	}

.navcontainer ul ul li {
}

.navcontainer ul ul a {
}

.navcontainer ul ul a:hover {
}

.navcontainer ul ul .currentAncestor {
	color: #ffffff;
}

/* Stylesheets fuer Content */
	
.content {
	min-height: 450px;
	margin: 10px 20px 20px 190px;
    background-color: #FFFFFF;
	}

/* Stylesheet Breadcrumb */


.breadcrumb {
	font-size: 10px;
	color: #666666;
	margin: 0px;
    padding: 10px 0px 20px 0px
	}	
         	
/* Stylesheet Footer */

.footer {
	border-top:1px solid #5B91AD;
	font-size: 10px;
	color: #666666;
	text-align: center;
	}
		 	
/*  Bilder Anordnen */	
.right {
    float:right;
	margin-left:15px; 
	}

Gerry233 · 17.08.2008

Hi Mauki,

hier erst einmal die Antwort zu einem der Probleme:

Du kannst mit einem Hack im CSS dem IE andere Größen zuweisen:

Beispiel:
* html .klassenname {
width: 125px;
height: 30px;
}

Diese Info liest dann nur der IE aus, Du solltest diesen UNTER die allgemeine Definition der Klasse .klassenname schreiben, damit nicht auch der IE die eigentlich richtige Infos wieder ausliest.

Hilft das?

Gruß
Gerry

PS.: Den anderen Punkt schaue ich mir noch einmal an...

Gerry233 · 17.08.2008

... und der Strich rechts der Grafik im Header, den meinst Du (richtig?), der kommt daher, dass die Breite der Grafik 969 px beträgt, der Container aber 970 px breit ist. Hier kommt also die Hintergrundfarbe durch.

Am besten die Grafik links um 1 Pixel in der passenden Farbe erweitern und es sollte funktionieren.

Falls Du noch etwas anderes meinst, dann schreib es kurz...

Gruß
Gerry

Mauki · 18.08.2008

Gerry233 schrieb:
... und der Strich rechts der Grafik im Header, den meinst Du (richtig?), der kommt daher, dass die Breite der Grafik 969 px beträgt, der Container aber 970 px breit ist. Hier kommt also die Hintergrundfarbe durch.

Am besten die Grafik links um 1 Pixel in der passenden Farbe erweitern und es sollte funktionieren.

Hab jetzt die Grafik mit 970 px drin, aber leider keine Änderung

Pingu · 18.08.2008

Du könntest dem IE auch als letztes ein eigenes Style-Sheet unterschieben, welches die IE spezifischen styles überschreibt. Dafür gibt es ganz ohne Hack, die IE-spezifischen Conditional Comments: http://msdn.microsoft.com/en-us/library/ms537512.aspx

Mauki · 18.08.2008

Hab nochmals rumprobiert und die Ansicht ist im IE ein klein wenig besser geworden. Jetzt hab ich aber über der Navi einen weißen Strich und der graue Strich ist auch noch da?

Ich kann mir aber nicht vorstellen das ich da für den IE extra was definieren muß, weil meine aktuell mit Rapidweaver erstellte Seite nutzt genau das gleiche Stylesheet und da passt ja alles auch im IE?

Oder liegt das etwa an Wordpress?

Bin etwas ratlos, das übersteigt meine CSS-Kenntnisse

Gerry233 · 18.08.2008

Die Header-Grafik vom VCP ist lt Firefox immer noch "nur" 969 Pixel breit. Hatte der Upload funktioniert?

Der IE entwickelt manchmal eigene Verhalten und ich habe es schon erlebt, dass ich hier wirklich deutlich unterschiedliche Werte definieren musste, damit die Anzeige optisch gleich war, wie in den anderen Browsern...

Mit welchen IE testest Du?

Pingu · 18.08.2008

Ich habe es mir jetzt nicht genau durchgelesen. Aber meistens ist das Problem dieses hier: http://carsten-protsch.de/zwischennetz/doctype/box_model_bug.html

Mauki · 18.08.2008

Gerry233 schrieb:
Die Header-Grafik vom VCP ist lt Firefox immer noch "nur" 969 Pixel breit. Hatte der Upload funktioniert?

Das ist komisch. Der Banner ist wirklich 970px breit und auch das CSS weist 970 aus?

Gerry233 schrieb:
Mit welchen IE testest Du?

Ich habe hier den IE 7 im Büro und zu Hause ist der IE 6 drauf.

Gerry233 · 18.08.2008

Okay, ich schaue es mir morgen im Büro noch an, dann werde ich hoffentlich dem Fehler auf die Spur kommen.

Ciao
Gerry

Mauki · 18.08.2008

Ich hab den Fehler selber gefunden. Ich habe ein faux_columns drin und das war 2 px zu schmal. Jetzt ist auf jedenfall der graue Strich weg. Der weiße oben im IE hängt damit auch zusammen. Ich werd mir was einfallen lassen, wie ich das am besten löse

Mauki · 19.08.2008

So jetzt hab ich ja das Layout geändert und im Safari auf dem Mac sah es gut aus. Hier im Safari Windows erhalte ich jetzt unten einen grauen Strich. Im FF passt es und im IE sieht es schon wieder scheisse aus.

Mann da hat man doch echt keine Lust mehr.

Jetzt brauch ich erst mal ne Lösung wie ich meinen Fuß ohne faux_columns so formatieren kann das er die Navigation verlängert?

Gerry233 · 20.08.2008

Ich würde sagen, dass die Seite im IE durchaus akzeptabel aussieht....

... und meinst Du mit Deinem Fuß?

Fehler im CSS?

Mauki

Aktives Mitglied

Gerry233

Aktives Mitglied

Gerry233

Aktives Mitglied

Mauki

Aktives Mitglied

Pingu

Aktives Mitglied

Mauki

Aktives Mitglied

Gerry233

Aktives Mitglied

Pingu

Aktives Mitglied

Mauki

Aktives Mitglied

Gerry233

Aktives Mitglied

Mauki

Aktives Mitglied

Mauki

Aktives Mitglied

Gerry233

Aktives Mitglied