Css und IE8.. Ich verzweifle.. *g*

[prisca]

Hallo zusammen!!

Ich seh irgendwie den Wald vor lauter Bäume nicht mehr. Als ich gelernt habe Webseiten zu erstellen haben wir noch nicht wirklich mit CSS gearbeitet (ist also schon ne Weile her, hehehe) und nun sitze ich an meinem ersten ernsthaften CSS Vorhaben. Für meine Webseite habe ich ein Dropdown Menue erstellt mit Hilfe der Suckerfish Vorlagen. Ich habe herum gebastelt wie verrückt und schon einige Stunden daran gearbeitet, damit das ganze so aussieht wie ich es gerne hätte. Mancher bekommt vermutlich Krämpfe wenn er meinen Code sieht.. Aber eben.. Ist mein erstes Projekt.

Nun.. Bei FF sieht das ganze laaangsam ordentlich aus bis auf das Problem dass er meine Buttons nicht linksbündig darstellen will. Ich denke dass realisiert man mit text-align: left;.. Lieg ich da falsch? Wo muss ich das einsetzen, damit die schlussendlich linksbündig sind?
Und dann kommt der IE.. Der zeigt das ganze absolut anders an, ich denke da sind die Grössen nicht richtig angegeben. Ich bin sicher dass steht hier schon irgendwie, aber ich habe nix gefunden.. Gut Möglich dass ich falsch suche, wie gesagt, seh ich den Wald echt nicht mehr. Den IE 5/6 hab ich nicht, aber durch den Javateil sollte das Problem mit den Rollover Effekten ja eigentlich abgedeckt sein.

Also zusammengefasst habe ich 2 Probleme: Wie bring ich den Text linksbündig hin und wie bringe ich den IE8 dazu mir die Seite so anzuzeigen wie sie bei FF aussieht, bzw wie bring ich ihn dazu die Grösse der Buttons zu übernehmen..

Hier die Webseite:
www.listenhunde-hilfe.ch

Und hier mein CSS Teil:

#nav
{
position: absolute;
top: 145px;
left: 271px;
float: left;
width: 53em;
text-align: left;
list-style: none;
line-height: 1;
background: #7690ab;
font-weight: bold;
padding: 0;
border: none;
border-width: 1px 0;
margin: 0 0 1em 0;


}

#nav ul {


float: left;
display: block;
list-style: none;
line-height: 1;
background: #7690ab;
font-weight: bold;
padding: 0;
border: solid #f8f8fb;
border-width: 1px 0;
margin: 0 0 1em 0;

}

#nav a {

display: block;
width:65px;

color: #d8d8df;
text-decoration: none;
padding: 0.25em 2em;
text-align: left;
}

#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
width:65px;
}

#nav li {
float: left;
padding: 0;
width: 10em;
width:105px;

}

#nav li ul {

position: absolute;
left: -999em;

height: auto;
width: 11em;
width: 9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li li {
padding-right: 1em;
width: 13em
}

#nav li ul a {
width: 11em;
width: 9em;
}

#nav li ul ul {
margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #f8f8fb;
}

#content {
clear: left;
}

#content a {
color: #d8d8df;
}

#content a:hover {
text-decoration: none;
}

#scaffolding {
height: 70px;
background: white url(/images/header_bg.gif) no-repeat;
border: solid #f8f8fb;
border-width: 1px 0 0 0;
margin: 1em 0 0 0;
}

#scaffolding a {
text-decoration: none;
text-indent: -999em;
display: block;
height: 70px;
background: url(/images/hdlogo_flip2.gif) no-repeat;
background-position: 181px 0;
}

#scaffolding a:hover {
background-position: 181px -70px;
}
#Tabelle_01 { width: 1000px; height: 801px; }
--></style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script> 

Wie geschrieben, ist das mein erster CSS Versuch. Wenn ihr irgendwelche Böcke sieht.. Bitte einfach die Kritik reinwerfen. Ich glaub ich steh mir igrendwie selbst auf dem Schlauch..

Liebe Grüsse
Prisca

[uliS]

Hi,

ich würd mir nicht so`n Stress machen. Such dir doch einfach hier
http://www.cssplay.co.uk/menus/, oder hier http://www.stunicholls.com/menu/index.html eins aus.
Da brauchst du dann nur noch die Farben anpassen.
Für das Problem mit IE google mal nach "conditional comments". Falls es im IE nicht passt, musst du für jede relevante Version jeweils ein eigenes stylesheet erstellen. Um das zu überprüfen brauchst du natürlich auch die jeweilige Version vom IE...

ciao Uli

[hero-master]

Hi Prisca,

Also zusammengefasst habe ich 2 Probleme: Wie bring ich den Text linksbündig hin und wie bringe ich den IE8 dazu mir die Seite so anzuzeigen wie sie bei FF aussieht, bzw wie bring ich ihn dazu die Grösse der Buttons zu übernehmen..

Im Prinzip ist da alles Kraut und Rüben und hier mit Conditional Comments anzufangen ist erst einmal der falsche Weg.
Versuche dich einmal komplett vom Slicen ganzer Seiten zu lösen und den Code davon zu übernehmen. Arbeite mit semantischem HTML-Markup. Erst wenn du das hast, wenn das Grundgerüst steht, dann machst du dich an das Layouten über CSS.
EIn Beispiel für deine Seite, wie das Markup aussehen könnte:

<div id="seite">

<h1><img src="listenhunde-logo.png" alt="Listenhunde-Hilfe Logo" /><span>Listenhunde-Hilfe Schweiz eV.</span></h1>

<ul id="nav">
		<li><a href="ueberuns.html">&Uuml;beruns</a>
		<ul>

			<li><a href="ueberuns.html">Ziele</a></li>
			<li><a href="#">Verein</a>
			<ul>
					<li><a href="vorstand.html">Vorstand</a></li>
					<li><a href="#">Mitglied werden</a></li>
				</ul></li>
			<li><a href="#">Kontakt</a></li>

			<li><a href="#">Helfen</a></li>

		

		</ul>
	</li>
	<li><a href="#">Recht</a>
		<ul>
			<li><a href="#" class="daddy">Kantonale Gesetze</a></li>
			<li><a href="#" class="daddy">Reisebestimmungen</a></li>
			<li><a href="#">Urteile</a></li>
			<li><a href="#">Versicherungen</a></li>
			<li><a href="#">Anw&auml;lte</a></li>
		</ul>
	</li>
	<li><a href="#">Politik</a>
		<ul>
			<li><a href="#">Abstimmungen</a></li>
			<li><a href="#">Parteien</a></li>
		</ul>
	</li>
	<li><a href="#">Wissenschaft</a>
		<ul>
			<li><a href="wissarbeiten.html">Gef&auml;hrlichkeit</a></li>
			<li><a href="beissstatistik.html">Beissstatistiken</a></li>
		</ul>
	</li>	
	<li><a href="#">Medien</a>
		<ul>
			<li><a href="#">News</a></li>
			<li><a href="#">Leserbriefe</a></li>
		</ul>
	</li>
	<li><a href="#">Ausbildung</a>
		<ul>
			<li><a href="#">Hundeschulen</a></li>
			<li><a href="#">Sport</a></li>
			<li><a href="#">Militaris</a></li>
		</ul>
	<li><a href="#">Vermittlung</a>
		<ul>
			<li><a href="#">Wichtig!</a></li>
			<li><a href="#">Zuhause gesucht</a></li>
			<li><a href="#">Zuhause gefunden</a></li>
			<li><a href="#">Auslandshunde</a></li>
			<li><a href="#">Vermittlungshilfe</a></li>
			<li><a href="#">Bei Notf&auml;llen</a></li>
		</ul>
	</li>
	</li>
	<li><a href="#">Sonstiges</a>
		<ul>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">G&auml;stebuch</a></li>
			<li><a href="#">Gallerie</a></li>
			<li><a href="#">Gedichte</a></li>
		</ul>
	</li>
</ul>

<div id="inhalt">
	<h2>Willkommen auf der Webseite der Listenhunde-Hilfe Schweiz!</h2>
	<p>Hier entsteht die Webseite der Listenhunde-Hilfe Schweiz<br />
	<a href="mailto:info@listenhunde-hilfe.ch">info@listenhunde-hilfe.ch</a></p>
</div>

</div>

Jetzt überlegst du dir wie du die einzelnen Elemente per CSS so definierst (Schriften, Farben, Überschriften, horizontales Menu, Hintergrundbilder, padding, margin, Zentrierung von Blockelementen, abgerundete Ecken), dass es so wie aussehen soll. Das schaust du dir dann am besten im Chrome oder Firefox an. Erst wenn es dort passt, guckst du dir das im IE9, 8 und 7 an und suchst gegebenfalls nach Lösungen, falls es dort zu Unstimmigkeiten kommt. Arbeite auch ruhig mit CSS3, denn auch dafür gibt es für den IE mittlerweile viele Workarounds

[prisca]

Ich danke euch für die Tipps!!! Ich hab mal 2 Tage gar nix gemacht, um wieder einen klaren Kopf zu kriegen.. Ich hab die Probleme die ich hatte soweit gefunden und gelöst.. Ich bin noch dabei den feinschliff zu machen, aber ich bin davon weg gekommen den PC an die Wand schmeissen zu wollen

semantischem HTML-Markup sagt mir überhaupt nix. Klingt jedoch sehr interessant, vielen Dank für den Hinweis, ich lese mir das mal in Ruhe durch..

Herzlichen Dank ihr zwei!!!!